Linking images with its ALT

Question

I am working on a product page in Shopify, my product has 11 variations, so I would like to show only the images of the selected variant. Right now, I got everything working except when I click a different variant, the thumbnail images do not change (the main image does though), Initially: Green Variant, Change to Red Variant
I have deep linked my product variant images using its ALT, so when I click color "Red", only the images that have the ALT "Red" will show up in the thumbnail, so I am guessing I should use the same concept to switch the images, I have worked around but I could not get the variant image link in the last part, please kindly help if you know how to do it, thank you in advance.

$(function() {
  if($(".product-single__thumbnails").length) {
  $(".product-single__thumbnails").each(function(i) {
       var $thisSelect = $(this);
       $thisSelect.find("img").each(function() {
         var $this = $(this);
         $this.attr('src', 'IMAGES IN PRODUCT VARIATION THAT HAVE THE SAME ALT');
});
   });
        }
                });

Lastly, since I have 3 images per variant, all of them have the same ALT, how do I put each one of them in 3 different thumbnails instead of having one of them repeating 3 times? Thank you!

Here is the code for my thumbnail:

 <ul class="grid grid--uniform product-single__thumbnails product-single__thumbnails-{{ section.id }}">

            {% assign featured_alt = product.selected_or_first_available_variant.option1 %}           
            {% for image in product.images %} 
            {% if image.alt == featured_alt or image == featured_image %}

              <li class="grid__item {{ product_thumbnail_width }} product-single__thumbnails-item">
                <a
                  href="{{ image.src | img_url: product_image_size, scale: product_image_scale }}" id="thumbnaillinkid"
                    class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"
                    {% if enable_zoom %}data-zoom="{{ image.src | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
                    <img class="product-single__thumbnail-image" id="thumbnailimageid" src="{{ image.src | img_url: product_thumb_size, scale: product_image_scale }}" alt="{{ image.alt | escape }}">
                </a>
              </li>
              {% endif %}
            {% endfor %}
          </ul>

Instead of using "alt" tags to swap the images, give a "class" to the images and then use it to hide/show. — HymnZzy

HymnZzy HymnZzy · Accepted Answer · 2017-04-04T09:24:15

Change image element to this

<img class="product-single__thumbnail-image {{ image.alt | handleize }}" id="thumbnailimageid" src="{{ image.src | img_url: product_thumb_size, scale: product_image_scale }}" alt="{{ image.alt | escape }}">

Function to display/hide color based images/thumbs will be something like follows

$(document).on('click','<.palette_holder_class> <.palette_element_class>',function(){
    var color = '.product-single__thumbnail-image.'+$(this).attr('thumb_color')
    $('.product-single__thumbnail-image').css('display','none')
    $(color).css('display','')
});

{{ image.alt | handleize }} should be same as thumb_color attribute value

Linking images with its ALT

1 Answers