Zooms original image in thumbnail gallery, not new image

[Chris-Reedy]

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 is that 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.

SEE FIDDLE: http://jsfiddle.net/zuhloobie/bcuh489d/1/

How do I fix that?

Thanks in advance!

[Digital-1mpulse]

You need to recall the zoom function somehow. If you have it in a directive figure out how to recall the directive so that the zoom function can be called again.

[pinkp]

I think you need to update the source for the zoom image too. So for example after line 38 of query.zoom.js I added:

.attr('id','zoomimage')

I then used the id "zoom image" with some javascript or jquery so that onclick on the thumbnail its swaps the src for the zoom. Hopefully this makes sense. See what I did here: http://bit.ly/1T0TylS

[jmcausing]

Hi guys, I think I am having the same issue.

The zoom image is not changing after i click on of the image or thumbnail. Please see: https://kauppa.paljasjalkakengat.net/products/kiinalainen-gua-sha-kivi

I am following this guide for shopify: https://www.shopify.com/partners/blog/jquery-image-zoom

Can someone give me hint please what am I missing?

`

});

`