Question

我正在配置Shopify Timber框架：https://shopify.github.io/Timber/ 我想在单个产品页面上为图像添加缩放选项。虽然缩放功能适用于主产品图像，但在选择不同图像时似乎不会更新。将鼠标悬停在图像上总是预览默认缩放。

以下是代码：

 <div class="product-single__photos" id="ProductPhoto">
    {% assign featured_image = current_variant.featured_image | default: product.featured_image %}
    <img src="{{ featured_image | img_url: '1024x1024' }}" alt="{{ featured_image.alt | escape }}" id="ProductPhotoImg" class="zoom">  
    <script>
    $(document).ready(function(){
        $('.product-single__photos').zoom({url: '{{ product.featured_image.src | img_url: '1024x1024' }}'});
    });
    </script>
 </div>

  {% comment %}
    Create thumbnails if we have more than one product image
  {% endcomment %}
  {% if product.images.size > 1 %}
    <ul class="product-single__thumbnails grid-uniform" id="ProductThumbs">

      {% for image in product.images %}
        <li class="grid__item one-quarter">
          <a href="{{ image.src | img_url: '1024x1024' }}" class="product-single__thumbnail">
            <img src="{{ image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}">
          </a>
        </li>
      {% endfor %}

    </ul>
  {% endif %}

我正在使用Jack Moore的缩放插件：http://www.jacklmoore.com/zoom/

有没有办法让java代码以dinamically方式选择图像源，还是我缺少任何Liquid变量？

谢谢，卢卡

编辑：从javascript代码中删除图像源也没有帮助，它仍然显示默认图像：

    $(document).ready(function(){
        $('.product-single__photos').zoom();
    });

Answer 1

尝试此操作来迭代每张产品照片：

$(function(){
    $(".product-single__photos").each(function(){
        $(this).zoom();
    });
});

在Shopify中缩放单个产品图像

1 个答案: