JQuery zoom installation (on product page)

PascalBro
New Member
3 0 1

Hello,

After spending the last few days trying to implement the Zoom plugin in my Narrative theme without success, I come here to seek help !
My goal is to get the same zoom effect of the Debut theme's product page, so I thoroughly followed the tutorial from this page "Using JQuery Zoom and JavaScript Zoom for Product Images on Shopify"
but the zoom doesn't work.
Here's what I've done :


1/ Upload the "jquery.zoom.min.js" to the assets folder

2/ Link the Jquery library in theme.liquid before the </head>

3/ Link the "jquery.zoom.min.js" in theme.liquid before the </head>

 

 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js" defer="defer"></script>
  <script type="text/javascript" src="{{ 'jquery.zoom.min.js' | asset_url }}" defer="defer"></script>
  <script src="{{ 'lazysizes.min.js' | asset_url }}" async="async"></script>
  <script src="{{ 'vendor.min.js' | asset_url }}" defer="defer"></script>
  <script src="{{ 'theme.min.js' | asset_url }}" defer="defer"></script>
  <script src="{{ 'custom.js' | asset_url }}" defer="defer"></script>
</head>

 

 

 


4/ Added the code from the tutorial in product-template.liquid

 

 

 

<div class=”image-container”>
  <img class=”image-zoom” src=”{{ featured_image | img_url: '480x480' }}” alt="{{ image.alt | escape }} data-zoom="{{ featured_image | img_url: '1024x1024', scale: 2 }}>
  <div class="image-details"></div>
</div>

 

 

 


5/ Seeing the error I corrected the quotation marks and changed "featured_image" to "featured_media"

 

 

 

<div class="image-container">
  <img class="image-zoom" src="{{ featured_media | img_url: '480x480' }}" alt="{{ image.alt | escape }} data-zoom="{{ featured_media | img_url: '1024x1024', scale: 2 }}>
  <div class="image-details"></div>
</div>

 

 

 


6/ I then noticed in the inspector that the url of the "zoomed" image was broken 

 

 

 

<img class="image-zoom" src="//cdn.shopify.com/s/files/1/0576/9432/2857/products/57c399cb66f94be79274fd75f4428208_480x480.jpg?v=1623944930" alt=" data-zoom=" cdn.shopify.com="" s="" files="" 1="" 0576="" 9432="" 2857="" products="" 57c399cb66f94be79274fd75f4428208_1024x1024@2x.jpg?v="1623944930" style="display: block;">

 

 

 

 

7/ I figured that it was again coming from the quotation marks of the html bit from the tutorial, after a change this showed

 

 

 

<div class="image-container">
  <span style="display:inline-block"><img class="image-zoom" src="//cdn.shopify.com/s/files/1/0576/9432/2857/products/57c399cb66f94be79274fd75f4428208_480x480.jpg?v=1623944930" alt="" data-zoom="//cdn.shopify.com/s/files/1/0576/9432/2857/products/57c399cb66f94be79274fd75f4428208_1024x1024@2x.jpg?v=1623944930" style="display: block;"></span>
  <div class="image-details"></div>
</div>

 

 

 


Oh and here's the script part, put in product-template.liquid

 

 

 

<script>
  $(document).ready(function(){
    $('.image-zoom')
    .wrap('<span style="display:inline-block"></span>')
    .css('display', 'block')
    .parent()
    .zoom({
      url: $(this).find('img').attr('data-zoom')
    });
  });
</script>

 

 

 

 
After all these steps, I can see that Jquery loads, so does the zoom plugin, the script kind of works as it adds a span in the div, but no signs of zoom on hover. Isn't the plugin supposed to create another <img></img> to contain the "zoomed" image ? I am genuinely at loss and would be so grateful for some help !

0 Likes