将图像与其 ALT 链接

Question

我正在 Shopify 的产品页面上工作，我的产品有 11 个变体，所以我只想显示所选变体的图片。现在，我的一切正常，除了当我点击不同的变体时，缩略图不会改变（但主图像会改变），Initially: Green Variant, Change to Red Variant
我使用其 ALT 深入 link 编辑了我的产品变体图像，因此当我单击颜色 "Red" 时，只有具有 ALT "Red" 的图像会显示在缩略图中，所以我猜想我应该使用相同的概念来切换图像，我已经解决了但我无法在最后一部分获得变体图像 link ，请知道如何做的人帮忙，提前谢谢你。

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

最后，由于我每个变体有 3 张图片，它们都具有相同的 ALT，我如何将每张图片放在 3 个不同的缩略图中，而不是让其中一张重复 3 次？谢谢！

这是我的缩略图的代码：

 <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>

Answer 1

将图像元素更改为此

<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 }}">

display/hide 基于颜色 images/thumbs 的函数如下所示

$(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 }} 应与 thumb_color 属性值相同

将图像与其 ALT 链接

Linking images with its ALT

html

javascript

css

jquery

shopify