Zoom Effect Only Zooms Original Image Not New Imag

Question

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!

Answer 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.