JQuery zoom installation (on product page)

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

3/ Link the “jquery.zoom.min.js” in theme.liquid before the


  
  
  
  
  

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


  
  

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


  
  

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


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


  
  

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


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 to contain the “zoomed” image ? I am genuinely at loss and would be so grateful for some help !