缩放效果仅缩放原始图像而不是缩略图中的新图像

Question

信息
我有一个div的网格。每个 div 打开一个模式。每个模态都有一个简单的缩略图库（点击缩略图，主图被替换）。

问题
缩放仅适用于原始主图像。单击缩略图后它没有意识到有一个新的主图像，因此它继续缩放原始图像。

FIDDLE
http://jsfiddle.net/zuhloobie/bcuh489d/2/

问题
如何更改代码以缩放从缩略图中选择的新主图像？

HTML
<div class="container"> <div class="image wow rotateIn" data-wow-delay=".3s" data-wow-duration=".3s"> <div id="gallery" class="zoom"> <div class="content"> <img src="http://dummyimage.com/900x900/000/fff" class="image_1"> <img src="http://dummyimage.com/900x900/f00/fff" class="image_2" style="display:none"> </div> </div> </div> <div class="body wow fadeInDown" data-wow-delay=".5s" data-wow-duration=".3s"> <div class="thumbnail"> <div class="thumb view2"> <a href="#" rel="2"> <img src="http://dummyimage.com/900x900/f00/fff" id="thumb_2" class="fit"> </a> </div> <div class="thumb view2"> <a href="#" rel="1"> <img src="http://dummyimage.com/900x900/000/fff" id="thumb_1" class="fit"> </a> </div> </div> </div> </div> </div>
JQUERY
$('#gallery').simplegallery({ galltime : 400, // transition delay gallcontent: '.content', gallthumbnail: '.thumbnail', gallthumb: '.thumb' }); $('.zoom').zoom({ on:'grab' });
使用的插件
[1]http://www.jacklmoore.com/zoom/
[2]http://www.jqueryscript.net/gallery/Minimalist-jQuery-Image-Gallery-with-Thumbnails.html

提前致谢！

Answer 1

您遇到的问题是 simplegallery 不知道您正在使用的缩放插件。

缩放插件使用他根据您提供的元素找到的第一张图片创建一个新元素。

为了使缩放插件更改您正在缩放的​​图像，您需要确保该图像已更新为您刚刚单击的图像。

在初始化缩放插件后添加此代码：

$('.thumb img').click(function() {
    $('.zoomImg').attr('src', $(this).attr('src'));
});

应该可以解决你的问题。