javascript - Jack Moore Zoom() 脚本以及如何更改悬停时多个图像的 img src

Question

我有多个具有这种结构的 div:

<div class="container">
    <div class="zoom">
        <img src="http://mywebsite.net/images/products/small/image1.jpg" />
    </div>
</div>

js部分是:

$('document').ready(function () {
  $(".zoom").zoom({
    url: 'big/image1.jpg',
    on: 'mouseover'
  });
});

将鼠标悬停在 .zoom div 上时，我希望脚本从 src 加载 img: http://mywebsite.net/images/products/big/image1.jpg

如您所见，唯一的区别是网址中的 small 变为 big。

如何更改？

Answer 1

将 JavaScript 更改为:

$(".zoom").each(function(arg, el){
    var image = $(el).find("img");
    $(el).zoom({
        on: 'mouseover',
        url: image.attr("src").replace("small", "big")
    });
});