How to embed custom code to each product (dynamic)

I have a question about applying custom code to each product’s photo.

My client want zooming effect(magnifying) so I found this Jquery :
https://cdn.rawgit.com/dlekrud7/goralskazooming/master/jquery.zoom.js

And I want to apply this effect to detail page’s each product picture. But I don’t know how to do this.
Please tell me how! :-0

And also, I bought a two hosts from another hosting site, and I want to connect those with my site but I can’t find how to do it. Hosting site said that I have to find my site’s IP or Server but I’can’t find it.

this is my detail page
: http://goralska.webflow.io/olivetree/ebony-necklace-large
: https://webflow.com/design/goralska

Help me!
Please reply soon :slight_smile:
Thank you!

I too would like more information on installing custom code!!!

Hi, for the plugin take a look to the example I made https://webflow.com/website/zoomdemo

Could you explain a little bit more about what your trying to do :slight_smile:

Thanks for quick response. But I can’t understand process of applying custom code to my page yet!
Can you explain it more specifically?
Thank you!

A tutorial from webflow

Should I just copy your code and paste it to my image?
I tried it but It didn’t work.
I want to apply only hover-zooming effect to my detail page.
(http://goralska.webflow.io/element/flame-necklace-gold)
Thank you. Please reply :slight_smile:

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.15/jquery.zoom.min.js'></script>

<script> $(document).ready(function(){ $('#ex1').zoom(); }); </script>

The hover effect will be applied to all the the div’s that have id #ex1 (In this case you have a div with a class called zoom and also have the #ex1 id)

Thanks a lot !! I solve this problem! Thank you :slight_smile: