Question

我正在使用Elevate Zoom插件，当您将鼠标悬停在缩略图上时会显示完整尺寸的图片：http://www.elevateweb.co.uk/image-zoom/examples

我有一些JQuery交换缩略图src，例如：

HTML

<div id="primaryimage">
<img src="image1.jpg" data-zoom-image="image1.jpg"">
</div>

JQuery的

$("#prodimages img").click(function() {
     var imgsrc = $(this).attr("src");
    $("#primaryimage img").attr("src", imgsrc);
});

但是，我似乎无法交换data-zoom-image属性来交换较大的放大图像。

到目前为止，我已经尝试过：

$("#primaryimage img").attr("data-zoom-image", imgsrc);

和

$("#primaryimage img").data("data-zoom-image", imgsrc);

并在点击功能中重新激活插件：

$("#primaryimage img").elevateZoom({
zoomWindowFadeIn: 500,
zoomWindowFadeOut: 500,
lensFadeIn: 500,
lensFadeOut: 500
});

$("#primaryimage img").data("data-zoom-image", imgsrc);

没有影响。

任何人都可以帮助我吗？

Answer 1

尝试将$("#primaryimage img").data("data-zoom-image", imgsrc);更改为$("#primaryimage img").data("zoom-image", imgsrc);，因为在调用.data()函数时无需附加数据

Answer 2

在这里找到答案：How to change data-zoom-image value

必须使用新的图片网址数据重新初始化Elevate Zoom。

我的完整代码：

$("#prodimages img").click(function() {
     var imgsrc = $(this).attr("src");
    $("#primaryimage img").attr("src", imgsrc);


    $("#primaryimage img").data('zoom-image', imgsrc).elevateZoom({
    zoomWindowFadeIn: 500,
    zoomWindowFadeOut: 500,
    lensFadeIn: 500,
    lensFadeOut: 500
    });

    $("#primaryimage img").data("zoom-image", imgsrc);
});

Answer 3

无需重新初始化提升缩放。只需按照支持的代码交换图像：

 var ez = $('#YourZoomId').data('elevateZoom');
 ez.swaptheimage(smallImageURL, largeImageURL);

交换插件的'data-zoom-image'属性值？

3 个答案: