html [Shopify]每个变体显示多个图像

Posted 2021-05-11

<!-- Begin thumbnails -->
<div class="thumbs clearfix">
  {% assign featured_alt = product.selected_or_first_available_variant.option1 %}
  {% for image in product.images %}
  {% if image.alt == featured_alt or image == featured_image %} 
  {% if settings.enable_product_image_zoom %}
  <div class="image span2{% cycle 'last-in-row': '', '', ' last-in-row' %}">
    <a href="{{ image | product_img_url: '1024x1024' }}" class="cloud-zoom-gallery">
      <img src="{{ image | product_img_url: 'medium' }}" alt="{{ image.alt | escape }}" />
    </a>
  </div>
  {% else %}
  <div class="image span2{% cycle 'last-in-row': '', '', ' last-in-row' %}">
    <a href="{{ image | product_img_url: '1024x1024' }}" data-original-image="{{ image | product_img_url: '1024x1024' }}">
      <img src="{{ image | product_img_url: 'medium' }}" alt="{{ image.alt | escape }}" />
    </a>
  </div>
  {% endif %}
  {% endif %}
  {% endfor %}
</div>
<!-- End thumbnails -->

<script>
jQuery(document).ready(function($){

var images = [];

{% for image in product.images %}
  images.push({url: "{{ image | product_img_url: 'medium' }}", alt: "{{ image.alt }}"});
{% endfor %}

  var thumbnails = $(".thumbs");                         
  $('#product-select-option-0').change(function() {
    var selected = $(this).val(), mainImage = jQuery('.featured img').attr('src').replace('_1024x1024', '_medium');
    thumbnails.hide().html("");
    arr = [];

    var addImage = $.each( images, function( i, image ) {
      var alt = images[i].alt, url = images[i].url;   
      if (alt == selected || url == mainImage) {
        thumbnails.append('<div class="image span2"><a href="' + url.replace('_medium', '_1024x1024') + '" data-original-image="' + url.replace('_medium', '_1024x1024') + '"><img src="' + url + '" alt="' + alt + '"></a></div>');
      }
    });
    arr.push(addImage);
    $.when.apply($, arr).done(function () {
      thumbnails.fadeIn(); 
      $('#product .thumbs a').on('click', function(e) { 
        e.preventDefault();
        switchImage($(this).attr('href'), null, $('.featured img')[0]);
      });
    });
  });
});    
</script>