Question

我为产品页面创建了一个相当简单的图库。一个产品可以有多个图像，所以我决定在上面放一个大的特色图片，并在下面显示缩略图。单击缩略图时，大特色图像将更新以显示缩略图的更大版本。一切正常。问题是我想使用一个名为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>

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

Answer 1

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

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

请参阅working fiddle

属性更改后，将jquery插件重新绑定到选择器？

1 个答案: