CODEWITHSUNDEEP
javascriptjqueryhtmlimagezooming
Yigit Altay
Yigit Altay

Reputation: 57

Jquery Image Zoom for All Images

I found a jquery image zoom plugin on the web (http://www.elevateweb.co.uk/image-zoom) but I have more than 200 small images that I would like to apply this plugin. I think I need to track mouse on elevatezoom.js, how can I do that?

HTML

<img id="zoom_01" src="image1.png" data-zoom-image="image1.jpg"/>

Script

<script> $("#zoom_01").elevateZoom(); </script>

(elevatezoom.js file can be found on http://www.elevateweb.co.uk/download-file)

Upvotes: 1

Views: 584

Answers (1)

Leo
Leo

Reputation: 1231

Try something like this:

First, give a .class to handle all images

<img class="image-to-zoom" 
     id="zoom_01" src="image1.png" data-zoom-image="image1.jpg"/>

Then, attach to the .class the mouseover event to trigger elevateZoom() on the element has the mouse hover

$('.image-to-zoom').on('mouseover',function(){
    //This element is being 'mouseovered', so trigger the plugin
    $(this).elevateZoom();
});

Upvotes: 2

Related Questions