Question

INFO
我有一个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'));
});

它应该可以解决你的问题。

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

1 个答案: