skip to Main Content

I can only get elevateZoom to work with one image.
So when I click on a thumbnail that updates the image to the selected one the zoom no longer works.

Code:

<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

This is being used on Shopify. One image works, multiple don’t.
Any suggestions on how I can get this to work?

Example here – https://allsops.myshopify.com/products/zoom-test

2

Answers


  1. Chosen as BEST ANSWER

    As per Drip's comment above.

    The way to fix this was to change it from id to class.

    I was following the guide on the elevateZoom-Plus website, which wasn't correct for my situation.


  2. you need to update main image attribute also with thumbnail image attributes

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search