Jquery 所有图像的图像缩放

Question

我在网上找到了一个 jquery 图片缩放插件 (http://www.elevateweb.co.uk/image-zoom)，但是我有 200 多张小图片想要应用这个插件。我想我需要在 elevatezoom.js 上跟踪鼠标，我该怎么做？

HTML

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

脚本

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

(elevatezoom.js 文件可以在 http://www.elevateweb.co.uk/download-file 上找到)

Answer 1

尝试这样的事情：

首先给出一个.class来处理所有的图片

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

然后，附加到 .class mouseover 事件以触发 elevateZoom() 元素上有鼠标悬停

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

Jquery Image Zoom for All Images