Масштабирование изображений отдельных продуктов в Shopify

Я настраиваю структуру 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/

Есть ли способ для java-кода динамически выбирать источник изображения, или мне не хватает какой-либо переменной Liquid?

Спасибо, Лука

РЕДАКТИРОВАТЬ: удаление источника изображения из кода javascript тоже не помогло, оно по-прежнему показывает изображение по умолчанию:

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