Q:

Get preview image to display in main box when clicked on

I have been looking for a way, for example whenever I click on the images preview on the left , It will display only that image I clicked on, in the main box (Bigger Box).  I have tried doing this using data target and Id but I got confused and didn't know how to proceed since nothing work. 
Anyone know how I can achieve that? 

     $(document).ready(function(){
         $('.thumb-image').click(function(){
               var active = $('.thumb-image.active'); //get the element that has active class
               var image = $(this).find('img'); //get the clicked image
               var imageUrl = image.attr('src'); //get the src of the image
               active.removeClass('active'); //remove current active class
               $(this).addClass('active'); //add active class to clicked image
               $('#big-image').css('background-image', 'url(' + imageUrl + ')'); //transfer imageUrl to the main box
         }); 
     });
.left-col {
  width: 48.27586%;
  float: left;
  margin-right: 3.44828%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

 .left-col:after {
  content: " ";
  display: block;
  clear: both;
}

 .left-col .thumbs {
  width: 15.25424%;
  float: left;
  margin-right: 1.69492%;
}

 .left-col .thumbs a {
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -moz-border-radius: 1px;
  -webkit-border-radius: 1px;
  border-radius: 1px;
  border: 1px solid #e2e2e3;
  display: block;
  margin-bottom: 8px;
  position: relative;
  width: 100%;
}


.tab-content {
  overflow: hidden; }
  .tab-content img {
    width: 100%;
    -webkit-animation-name: opacity;
            animation-name: opacity;
    -webkit-animation-duration: .3s;
            animation-duration: .3s; }

.left-col .thumbs a.active {
  border-color: #086fcf;
}

.left-col .thumbs a.active:hover {
  border-color: #086fcf;
}

 .left-col .thumbs a:hover {
  border-color: #b5b6bd;
}

 .left-col .thumbs img {
  display: block;
  width: 100%;
}

 .left-col .big {
  width: 83.05085%;
  float: right;
  margin-right: 0;
}

 .left-col .big .img {
  -moz-transition: all 600ms ease-out 0s;
  -o-transition: all 600ms ease-out 0s;
  -webkit-transition: all 600ms ease-out;
  -webkit-transition-delay: 0s;
  transition: all 600ms ease-out 0s;
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
  -moz-border-radius: 1px;
  -webkit-border-radius: 1px;
  border-radius: 1px;
  background: transparent no-repeat center center;
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  border: 1px solid #e2e2e3;
  display: block;
  height: 0;
  opacity: 1;
  padding-bottom: 133%;
}

.product-detail .left-col .big .img.animate {
  -moz-transition: all 0ms ease-out 0s;
  -o-transition: all 0ms ease-out 0s;
  -webkit-transition: all 0ms ease-out;
  -webkit-transition-delay: 0s;
  transition: all 0ms ease-out 0s;
  -moz-transform: translateY(-30px);
  -ms-transform: translateY(-30px);
  -webkit-transform: translateY(-30px);
  transform: translateY(-30px);
  opacity: 0;
}
<div class="left-col">
  <div class="thumbs tab-content">
    <a class="thumb-image active"  data-target="#pic-1" data-toggle="tab" href="//cdn.shopify.com/s/files/1/1047/6452/products/product_1024x1024.png?v=1446769025" data-index="0">
      <span><img src="//cdn.shopify.com/s/files/1/1047/6452/products/product_150x150.png?v=1446769025" alt="Tommy Hilfiger T-Shirt New York"></span>
    </a>
    <a class="thumb-image" data-target="#pic-2" data-toggle="tab" href="//cdn.shopify.com/s/files/1/1047/6452/products/tricko1_1024x1024.jpg?v=1447104179" data-index="1">
      <span><img src="//cdn.shopify.com/s/files/1/1047/6452/products/tricko1_150x150.jpg?v=1447104179" alt="Tommy Hilfiger T-Shirt New York"></span>
    </a>
    <a class="thumb-image" href="//cdn.shopify.com/s/files/1/1047/6452/products/tricko2_1024x1024.jpg?v=1447104180" data-index="2">
      <span><img src="//cdn.shopify.com/s/files/1/1047/6452/products/tricko2_150x150.jpg?v=1447104180" alt="Tommy Hilfiger T-Shirt New York"></span>
    </a>
    <a class="thumb-image" href="//cdn.shopify.com/s/files/1/1047/6452/products/tricko3_1024x1024.jpg?v=1447104182" data-index="3">
      <span><img src="//cdn.shopify.com/s/files/1/1047/6452/products/tricko3_150x150.jpg?v=1447104182" alt="Tommy Hilfiger T-Shirt New York"></span>
    </a>
  </div>
  <div class="big">
  <span id="big-image" class="img" quickbeam="image" style="background-image: url('//cdn.shopify.com/s/files/1/1047/6452/products/product_1024x1024.png?v=1446769025')" data-src="//cdn.shopify.com/s/files/1/1047/6452/products/product_1024x1024.png?v=1446769025"></span>
  <div id="banner-gallery" class="swipe">
    <div class="swipe-wrap">
      <div  id="pic-1" style="background-image: url('//cdn.shopify.com/s/files/1/1047/6452/products/product_large.png?v=1446769025')"></div>
      <div   id="pic-2" style="background-image: url('//cdn.shopify.com/s/files/1/1047/6452/products/tricko1_large.jpg?v=1447104179')"></div>
      <div style="background-image: url('//cdn.shopify.com/s/files/1/1047/6452/products/tricko2_large.jpg?v=1447104180')"></div>
      <div style="background-image: url('//cdn.shopify.com/s/files/1/1047/6452/products/tricko3_large.jpg?v=1447104182')"></div>
    </div>
</div>

A:

The problem is that your thumbnail images are contained within <a> tags that have href attributes.  In other words, your images are links.  The default action that a web browser will take when you click a link is to navigate to the URL that is specified as the value of the href attribute.  That's exactly what is happening in your example. 
In other words, when you click on an <a> tag like
<a class="thumb-image active"  data-target="#pic-1" data-toggle="tab" href="//cdn.shopify.com/s/files/1/1047/6452/products/product_1024x1024.png?v=1446769025" data-index="0">
  <span><img src="//cdn.shopify.com/s/files/1/1047/6452/products/product_150x150.png?v=1446769025" alt="Tommy Hilfiger T-Shirt New York"></span>
</a>

then the browser will navigate to https://cdn.shopify.com/s/files/1/1047/6452/products/product_1024x1024.png?v=1446769025.  As a result, you see that large image in your browser, and you loose the thumbnails.  You have actually navigated away from the page that contains the other thumbnails. 
What you need to do is to prevent this default browser action.  Fortunately, this is easy. :) 
Your click handler function can accept an argument, which is the click event that triggered the handler.  Currently you are ignoring this argument in your click event handler by just writing function().  Change this to function(event) in order to capture that event argument. 
Now that you have a reference to that click event, you can prevent the browser's default behavior of navigating to the link's href by calling event.preventDefault(). 
See working snippet below. 

$(document).ready(function() {
  $('.thumb-image').click(function(event) {
    event.preventDefault();
    var active = $('.thumb-image.active'); //get the element that has active class
    var image = $(this).find('img'); //get the clicked image
    var imageUrl = image.attr('src'); //get the src of the image
    active.removeClass('active'); //remove current active class
    $(this).addClass('active'); //add active class to clicked image
    $('#big-image').css('background-image', 'url(' + imageUrl + ')'); //transfer imageUrl to the main box
  });
});
.left-col {
  width: 48.27586%;
  float: left;
  margin-right: 3.44828%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.left-col:after {
  content: " ";
  display: block;
  clear: both;
}

.left-col .thumbs {
  width: 15.25424%;
  float: left;
  margin-right: 1.69492%;
}

.left-col .thumbs a {
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -moz-border-radius: 1px;
  -webkit-border-radius: 1px;
  border-radius: 1px;
  border: 1px solid #e2e2e3;
  display: block;
  margin-bottom: 8px;
  position: relative;
  width: 100%;
}

.tab-content {
  overflow: hidden;
}

.tab-content img {
  width: 100%;
  -webkit-animation-name: opacity;
  animation-name: opacity;
  -webkit-animation-duration: .3s;
  animation-duration: .3s;
}

.left-col .thumbs a.active {
  border-color: #086fcf;
}

.left-col .thumbs a.active:hover {
  border-color: #086fcf;
}

.left-col .thumbs a:hover {
  border-color: #b5b6bd;
}

.left-col .thumbs img {
  display: block;
  width: 100%;
}

.left-col .big {
  width: 83.05085%;
  float: right;
  margin-right: 0;
}

.left-col .big .img {
  -moz-transition: all 600ms ease-out 0s;
  -o-transition: all 600ms ease-out 0s;
  -webkit-transition: all 600ms ease-out;
  -webkit-transition-delay: 0s;
  transition: all 600ms ease-out 0s;
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
  -moz-border-radius: 1px;
  -webkit-border-radius: 1px;
  border-radius: 1px;
  background: transparent no-repeat center center;
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  border: 1px solid #e2e2e3;
  display: block;
  height: 0;
  opacity: 1;
  padding-bottom: 133%;
}

.product-detail .left-col .big .img.animate {
  -moz-transition: all 0ms ease-out 0s;
  -o-transition: all 0ms ease-out 0s;
  -webkit-transition: all 0ms ease-out;
  -webkit-transition-delay: 0s;
  transition: all 0ms ease-out 0s;
  -moz-transform: translateY(-30px);
  -ms-transform: translateY(-30px);
  -webkit-transform: translateY(-30px);
  transform: translateY(-30px);
  opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left-col">
  <div class="thumbs tab-content">
    <a class="thumb-image active" data-target="#pic-1" data-toggle="tab" href="//cdn.shopify.com/s/files/1/1047/6452/products/product_1024x1024.png?v=1446769025" data-index="0">
      <span><img src="//cdn.shopify.com/s/files/1/1047/6452/products/product_150x150.png?v=1446769025" alt="Tommy Hilfiger T-Shirt New York"></span>
    </a>
    <a class="thumb-image" data-target="#pic-2" data-toggle="tab" href="//cdn.shopify.com/s/files/1/1047/6452/products/tricko1_1024x1024.jpg?v=1447104179" data-index="1">
      <span><img src="//cdn.shopify.com/s/files/1/1047/6452/products/tricko1_150x150.jpg?v=1447104179" alt="Tommy Hilfiger T-Shirt New York"></span>
    </a>
    <a class="thumb-image" href="//cdn.shopify.com/s/files/1/1047/6452/products/tricko2_1024x1024.jpg?v=1447104180" data-index="2">
      <span><img src="//cdn.shopify.com/s/files/1/1047/6452/products/tricko2_150x150.jpg?v=1447104180" alt="Tommy Hilfiger T-Shirt New York"></span>
    </a>
    <a class="thumb-image" href="//cdn.shopify.com/s/files/1/1047/6452/products/tricko3_1024x1024.jpg?v=1447104182" data-index="3">
      <span><img src="//cdn.shopify.com/s/files/1/1047/6452/products/tricko3_150x150.jpg?v=1447104182" alt="Tommy Hilfiger T-Shirt New York"></span>
    </a>
  </div>
  <div class="big">
    <span id="big-image" class="img" quickbeam="image" style="background-image: url('//cdn.shopify.com/s/files/1/1047/6452/products/product_1024x1024.png?v=1446769025')" data-src="//cdn.shopify.com/s/files/1/1047/6452/products/product_1024x1024.png?v=1446769025"></span>
    <div id="banner-gallery" class="swipe">
      <div class="swipe-wrap">
        <div id="pic-1" style="background-image: url('//cdn.shopify.com/s/files/1/1047/6452/products/product_large.png?v=1446769025')"></div>
        <div id="pic-2" style="background-image: url('//cdn.shopify.com/s/files/1/1047/6452/products/tricko1_large.jpg?v=1447104179')"></div>
        <div style="background-image: url('//cdn.shopify.com/s/files/1/1047/6452/products/tricko2_large.jpg?v=1447104180')"></div>
        <div style="background-image: url('//cdn.shopify.com/s/files/1/1047/6452/products/tricko3_large.jpg?v=1447104182')"></div>
      </div>
    </div>

