1

我为产品页面创建了一个相当简单的画廊。一个产品可以有多张图片，所以我决定在上面放一张大特色图片，在下面显示缩略图。当您单击缩略图时，大特色图像将更新以显示更大版本的缩略图。这一切都很好。问题是我想使用一个名为loupe的 jQuery 插件，它为特色图像添加了放大功能。它有点工作，但是当我更改特色图像（通过单击缩略图）时，放大镜插件无法识别源更改，并且仍将以前的图像显示为叠加。

请参阅此代码笔：http ://codepen.io/vobpler/pen/klfEb 编辑： jsFiddle 链接以防上述情况不起作用：http: //jsfiddle.net/c8bXE/

这是我的标记：

<div class="featured">
    <a href="">
        <img src="" alt="">
    </a>
</div>

<div class="thumbnails">
    <a href="">
        <img src="" alt="">
    </a>
    <a href="">
        <img src="" alt="">
    </a>
    <a href="">
        <img src="" alt="">
    </a>
</div>

有没有办法“卸载”放大镜，并在特色图像更改后重新附加它？我尝试在源更改后重新应用它，但没有做任何事情。

4

1 回答 1

1

查看插件的代码并进行一些检查后，我可以看到您只需要在处理程序的末尾添加以下行fullImg.load()：

$('.loupe > img').prop('src', fullSrc);

见工作小提琴

于 2013-04-19T11:09:04.670 回答