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() === optionValue }).length) {
             $('.single-option-selector:eq('+i+')').val(optionValue).trigger('change');
           }
        });
      }
    });
  }
});

was there an answer for brzy? " -- I am using the latest Debut theme (16.5.1) and I cannot get this to fire correctly. When the thumb image is selected the dropdown changes correctly but when I choose to add to cart the first variant is added not the selected color. If I use the dropdown to select a color (default theme behavior) it works fine, just not when the thumbnail image is selected. I have no other modifications to the theme code.
Any help would be much appreciated!"
I had it working until I downloaded the new Debut theme. Help please! thank you!

impossible pour moi, j'ai beau suivre toute la procédure cela ne fonctionne pas! J'utilise également le théme Début

Since Debut is now shipping without JQuery, we are now utilizing a vanilla js model. Here is one that works for newer Debut themes.

https://gist.github.com/drabbytux/7f3f2c57c01fcd4baba98668c9473adc

I have implemented 2-way binding however the variant names do not switch to the correct name. Also is there a way to bind multiple photos?