用ALT鏈接圖像

我在Shopify的產品頁面上工作，我的產品有11個版本，所以我只想顯示所選變體的圖像。現在，我得到了一切工作，除了當我點擊一個不同的變種，縮略圖圖像不會改變（主要圖像雖然），Initially: Green Variant,Change to Red Variant
我用我的產品變體圖像使用其ALT，所以當我點擊顏色「紅色」，只有具有ALT「紅色」的圖像會顯示在縮略圖中，所以我猜測我應該使用相同的概念來切換圖像，我已經解決了，但我無法獲得變體圖像鏈接在最後一部分，如果你知道如何去做，請提前幫助，謝謝。用ALT鏈接圖像

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

來源

2017-04-04 jcyu215

不是使用「alt」標籤交換圖像，而是給圖像添加一個「類」，然後用它來隱藏/顯示。 – HymnZ

@HymnZ你介意給我一個例子嗎？謝謝！ – jcyu215

更改圖片的元素添加到

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

功能顯示基於/隱藏彩色圖像/大拇指將會像如下

$(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屬性值相同

來源

2017-04-04 09:24:15 HymnZ

用ALT鏈接圖像

回答

相關問題