Zoomen einzelner Produktbilder in Shopify

Question

Ich konfiguriere Shopify Timber Rahmen: https://shopify.github.io/Timber/ Ich wollte Zoom-Option Bilder auf einzelne Produktseite hinzufügen. Während die Zoomfunktion auf das Hauptproduktbild wirkt, scheint sie nicht zu aktualisieren, wenn ein anderes Bild ausgewählt wird. Wenn Sie mit der Maus über das Bild fahren, wird immer eine Vorschau des Standard-Zooms angezeigt.

Hier ist der Code:

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

Ich bin Jack Moore Zoom-Plugin: http://www.jacklmoore.com/zoom/

Gibt es eine Möglichkeit für Java-Code Bildquelle dinamically zu holen, oder bin ich jede Flüssigkeit Variable fehlt?

Danke, Luca

EDIT: Bildquelle von Javascript-Code Entfernen entweder nicht helfen, es zeigt immer noch Standardbild:

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

Answer 1

das über jedes Produkt Foto zu iterieren Versuche:

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