jquery - Zoom Effect Only Zooms Original Image Not New Image From Thumbnail -
info
have grid of div's. each div opens modal. each modal has simple thumbnail gallery (click thumbnail, main image replaced).
problem
zoom working original main image. doesn't realize there new main image after clicking thumbnail continues zoom original image.
fiddle
http://jsfiddle.net/zuhloobie/bcuh489d/2/
question
how alter code zooms new main image chosen 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
in advance!
the problem have simplegallery not aware of zoom plugin using.
the zoom plugin creates new element first image finds based on element supply.
in order make zoom plugin change image zooming need make sure image updated 1 clicked.
add code after initialize zoom plugin:
$('.thumb img').click(function() { $('.zoomimg').attr('src', $(this).attr('src')); });
it should solve problem.
Comments
Post a Comment