Как заставить elevatezoom работать с несколькими изображениями

Я могу заставить elevateZoom работать только с одним изображением. Поэтому, когда я нажимаю на миниатюру, которая обновляет изображение до выбранного, масштабирование больше не работает.

Код:

<div class="product-single__photo--flex-wrapper">
<div class="product-single__photo--flex">
    {% include 'image-style' with image: featured_image, width: 575, height: 850, small_style: true, wrapper_id: wrapper_id, img_id_class: img_id_class %}
    <div id="{{ wrapper_id }}" class="product-single__photo--container product-single__photo--container-thumb">
        <div class="product-single__photo-wrapper" style="padding-top:{{ 1 | divided_by: featured_image.aspect_ratio | times: 100}}%;">
            {% assign img_url = featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
            <img id="zoom_03" class="product-single__photo lazyload {{ img_id_class }}"
              src="{{ featured_image | img_url: '300x300' }}"
                                       data-zoom-image="{{ featured_image | img_url: '1080x1080' }}"
              data-src="{{ img_url }}"
              data-widths="[180, 360, 590, 720, 900, 1080, 1296, 1512, 1728, 2048]"
              data-aspectratio="{{ featured_image.aspect_ratio }}"
              data-sizes="auto"
              {% if section.settings.zoom_enable %}data-mfp-src="{{ featured_image | img_url: '1024x1024' }}"{% endif %}
              data-image-id="{{ featured_image.id }}"
              alt="{{ featured_image.alt | escape }}"
                 data-zoom="{{ featured_image | img_url: '1024x1024', scale: 2 }}">

            <noscript>
                <img id="zoom_03" class="product-single__photo"
                src="{{ featured_image | img_url: 'master' }}"
                data-zoom-image="{{ featured_image | img_url: '1080x1080' }}"
                {% if section.settings.zoom_enable %}data-mfp-src="{{ featured_image | img_url: '1024x1024' }}"{% endif %}
                alt="{{ featured_image.alt | escape }}" data-image-id="{{ featured_image.id }}" data-zoom="{{ featured_image | img_url: '1024x1024', scale: 2 }}">
            </noscript>
            <script>
                $('#zoom_03').ezPlus({
                    zoomType: 'inner',
                    cursor: 'crosshair'
                });
            </script>
        </div>
    </div>
</div

Это используется на Shopify. Одно изображение работает, несколько - нет. Любые предложения о том, как я могу заставить это работать?

Пример здесь - https://allsops.myshopify.com/products/zoom-test

Используйте не id, а class. И повторение имени id не является допустимым HTML, и вам не следует этого делать.

drip 10.09.2018 12:45

Спасибо, проблема решена!

Allsops 11.09.2018 13:24
0
2
508
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

вам необходимо обновить атрибут основного изображения также с помощью атрибутов миниатюрного изображения

Как мне это сделать?

Allsops 11.09.2018 13:16
Ответ принят как подходящий

Согласно комментарию Drip выше.

Чтобы исправить это, нужно было изменить его с идентификатора на класс.

Я следовал руководству на сайте elevateZoom-Plus, что не подходило для моей ситуации.

Другие вопросы по теме