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');
           }
        });
      }
    });
  }
});

Hi I have this issue everything working fine but I can not solve this error anybody know what's the issue Maximum call stack size exceeded in jquery

I have a question: How can you get this to work for mobile? We use the Retina theme (from OutOfTheSandbox), and this works just fine on desktop, but on mobile it refuses to work. My boss is adamant that it needs to work on BOTH desktop and mobile, but I can't seem to get it working on mobile. Any suggestions?

I'm having the same issue with the Parallax theme from OutOfTheSandbox. Works fine on desktop, breaks on mobile. Any fixes available?

Hi, This works perfectly for the product page. But in my quick view (quick shop) pop up, this doesn't work. I would appreciate a ton if someone genius can solve the issue. Please.

Hi there,
I'm using Masonry theme and have tried all the above given options, however, its not working. Can someone please help. Thanks

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!

Not sure if this has been updated/solved for mobile issues in the repo, but what I discovered a year ago and forgot to post back here is that when I used chrome on my pixel 3 to select a thumbnail, it did not fire a click event, but a touch event. So I bound the event handler for each element not just to the click event, but also to the touch events and that fixed my issue.

The current code worked well for me in the native language of my Shopify, which is english, but did not work when switching to another language, e.g. french.

I could make it work by replacing "return $(this).text()" with "return $(this).val()" in the code.

The .text() is different from language to language, but .val() is invariant.

I use the Pop theme.

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?