Exploring the functionalities of the Shopify Timber framework can be an engaging experience. I recently attempted to integrate a zoom option for images on a single product page. While the zoom feature worked well with the main product image, it failed to update when a different image was selected. Hovering over the image always displayed the default zoom preview.
Below is the code snippet in question:
<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 %}
Utilizing Jack Moore's zoom plugin adds an extra layer of functionality to the project:
I am intrigued by the possibility of dynamically selecting the image source using Java code. Is there a way for the Java code to achieve this task, or could I possibly be overlooking a Liquid variable?
Thank you, Luca
EDIT: Even after removing the image source from the JavaScript code snippet, the issue persisted with the default image being displayed:
$(document).ready(function(){
$('.product-single__photos').zoom();
});