缩放效果仅缩放原始图像而不是缩略图中的新图像 [英] Zoom Effect Only Zooms Original Image Not New Image From Thumbnail

问题描述

信息

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

INFO
I have a grid of div's. Each div opens a modal. Each modal has a simple thumbnail gallery (click thumbnail, main image is replaced).

问题

缩放仅限使用原始主图像。单击缩略图后没有意识到有新的主图像，因此它会继续缩放原始图像。

PROBLEM
Zoom is only working with the original main image. It doesn't realize there is a new main image after clicking a thumbnail so it continues to zoom the original image.

FIDDLE

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

问题

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

QUESTION
How do I alter the code so that it zooms the new main image chosen from the thumbnail?

HTML

< div class =container>
< div class =image wow rotateIndata-wow-delay =。3sdata-wow-duration =。3s>
< div id =galleryclass =zoom>
< div class =content>
< img src =http://dummyimage.com/900x900/000/fffclass =image_1>
< img src =http://dummyimage.com/900x900/f00/fffclass =image_2style =display：none>
< / div>
< / div>
< / div>
< div class =body wow fadeInDowndata-wow-delay =。5sdata-wow-duration =。3s>
< div class =thumbnail>
< div class =thumb view2>
< a href =＃ =2>
< img src =http://dummyimage.com/900x900/f00/fffid =thumb_2class =fit>
< / a>
< / div>
< div class =thumb view2>
< a href =＃ =1>
< img src =http://dummyimage.com/900x900/000/fffid =thumb_1class =fit>
< / a>
< / div>
< / div>
< / div>
< / div>
< / div>



JQUERY

$（'＃gallery'） .simplegallery（{
加仑时间：400，//转换延迟
胆限：'。内容'，
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



提前致谢！

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' });
PLUGINS USED
[1] http://www.jacklmoore.com/zoom/
[2] http://www.jqueryscript.net/gallery/Minimalist-jQuery-Image-Gallery-with-Thumbnails.html

Thanks in advance!

推荐答案

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

The problem that you have is that the simplegallery is not aware of the zoom plugin that you are using.

缩放插件使用他找到的第一个图像创建一个新元素基于您提供的元素。

The zoom plugin creates a new element with the first image that he finds based on the element you supply.

为了使缩放插件更改您要缩放的图像，您需要确保将图像更新为您的图像只需点击。

In order to make the zoom plugin change the image that you are zooming you need to make sure that image is updated to the one that you just clicked.

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

Add this code after you initialize the zoom plugin:

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

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

It should solve your problem.

这篇关于缩放效果仅缩放原始图像而不是缩略图中的新图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！