CODEWITHSUNDEEP
javascriptjqueryimage
Nick Duffell
Nick Duffell

Reputation: 340

How to dynamically change cloud-zoom Zoom Image 1.0.2 using javascript

I have found ways of changing the zoom image using links with rel="smallImage:image1.jpg" etc, but I am creating an image at runtime and adding it to the page, so the link will not be there when the page first loads (which it seems like it needs to be). When I generate the image at runtime, I add a thumbnail to the page and a link to open the thumbnail as the large image. I then want to be able to hover over this image to get the cloud-zoom functionality, but even if I use the code I mentioned above to set the image, I still see the original image as the zoom image.

I was wondering if there was a way I can use JQuery to change the zoom image at the same time I change the source of the image? I was hoping for something as simple as $("image1").CloudZoom.zoomImage = "image2.jpg" but nothing like that seems to work.

Thanks guys

Upvotes: 2

Views: 2866

Answers (1)

Remy
Remy

Reputation: 252

You can place the thumbnail in a div and give the div an onclick event.

 <div onclick="DisplayThumbnail(ImagePath)"><img src="ImagePath" /></div>

Call a javascript function and add this:

$('#CloudZoom').attr("href", newimagepath); $('.cloud-zoom, .cloud-zoom-gallery').CloudZoom();

The cloudzoom uses the anchor tag's href to point to the image to use, so that is the reason we update the href to the new image tag.

Upvotes: 1

Related Questions