缩放效果仅缩放原始图像而不是缩略图的新图像
Zoom Effect Only Zooms Original Image Not New Image From Thumbnail
信息
我有一个 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
提前致谢！
您遇到的问题是 simplegallery 不知道您正在使用的缩放插件。
缩放插件根据您提供的元素，使用他找到的第一张图片创建一个新元素。
为了使缩放插件更改您正在缩放的图像，您需要确保该图像已更新为您刚刚单击的图像。
初始化缩放插件后添加此代码：
$('.thumb img').click(function() {
$('.zoomImg').attr('src', $(this).attr('src'));
});
应该可以解决您的问题。
信息
我有一个 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
提前致谢！
您遇到的问题是 simplegallery 不知道您正在使用的缩放插件。
缩放插件根据您提供的元素，使用他找到的第一张图片创建一个新元素。
为了使缩放插件更改您正在缩放的图像，您需要确保该图像已更新为您刚刚单击的图像。
初始化缩放插件后添加此代码：
$('.thumb img').click(function() {
$('.zoomImg').attr('src', $(this).attr('src'));
});
应该可以解决您的问题。