javascript - 在 Shopify 中缩放单个产品图像

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代码有没有办法动态地选择图像源，或者我是否缺少任何Liquid变量？

谢谢，卢卡

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

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

Answer 1

尝试迭代每张产品照片:

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