Zoom Effect Only Zooms Original Image Not New Image From Thumbnail

纵然是瞬间 提交于 2019-12-11 02:19:32

问题


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 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!


回答1:


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.



来源:https://stackoverflow.com/questions/31305037/zoom-effect-only-zooms-original-image-not-new-image-from-thumbnail

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!