Make Image Change javascript (for theme.js file)

make-image-change-javascript.js

$(document).ready(function() {
  thumbnails = $('img[src*="/products/"]').not(':first');
  if (thumbnails.length) {
    thumbnails.bind('click', function() {
      var arrImage = $(this).attr('src').split('?')[0].split('.');
      var strExtention = arrImage.pop();
      var strRemaining = arrImage.pop().replace(/_[a-zA-Z0-9@]+$/,'');
      var strNewImage = arrImage.join('.')+"."+strRemaining+"."+strExtention;
      if (typeof variantImages[strNewImage] !== 'undefined') {
          productOptions.forEach(function (value, i) {
           optionValue = variantImages[strNewImage]['option-'+i];
           if (optionValue !== null && $('.single-option-selector:eq('+i+') option').filter(function() { return $(this).text().trim() === optionValue }).length) {
             $('.single-option-selector:eq('+i+')').val(optionValue).trigger('change');
           }
        });
      }
    });
  }
});

Ok i found a solution after few hours searching :)

Here the code in product file :

`

<div class="col-sm-6 col-lg-5 product_images">
  
       
  
      {% if product.images.size != 0 %}
          {% if product.images.size > 1 %}
  
              
  
  
  
  <div class="product_image">
        <img id="elevatezoom_big" class="fancybox" src="{{ product.featured_image.src | product_img_url: 'grande' }}" data-zoom-image="{{ product.featured_image.src | product_img_url: 'grande' }}" alt="{{ product.title | escape }}" />

`

And here the javascript :

` <script>
var selectCallback = function(variant, selector) {

   if (variant && variant.featured_image) {
    var originalImage = $(".product_image img");
    var newImage = variant.featured_image;
    var element = originalImage[0];
    Shopify.Image.switchImage(newImage, element, function (newImageSizedSrc, newImage, element) {
        $(element).parents('a').attr('href', newImageSizedSrc);
        $(element).attr('src', newImageSizedSrc);
    });
}

</script> `