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

Answer 2

您需要保持所有图像的图像分辨率。图像分辨率至少应为 1200 x 900。它对我有用。

我已通过将所有图像的分辨率设置为 1200 x 900 来修复它