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

私はジャック・ムーアのズームプラグインを使用しています：http://www.jacklmoore.com/zoom/

はdinamicallyイメージソースを選択するためのJavaコードのための方法はありますか、私は、任意の液体の変数をしないのですか？

おかげで、 ルカ

EDIT：

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

Answer 1

各製品の写真を反復するためにこれを試してみてください：どちらかの助けにはならなかったJavaScriptコードから映像ソースを削除 、それはまだ、デフォルトの画像が表示さ

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