如何使用javascript动态更改云变焦Zoom Image 1.0.2

时间:2014-03-10 12:15:27

标签: javascript jquery image

我找到了使用rel="smallImage:image1.jpg"等链接更改缩放图像的方法,但是我在运行时创建了一个图像并将其添加到页面中,因此当页面首次加载时链接不会出现(它似乎需要)。 当我在运行时生成图像时,我会在页面上添加一个缩略图和一个用于打开缩略图的链接作为大图像。然后我希望能够将鼠标悬停在此图像上以获得云缩放功能,但即使我使用上面提到的代码来设置图像,我仍然将原始图像看作缩放图像。

我想知道是否有一种方法可以在更改图像源的同时使用JQuery来更改缩放图像?我希望有一些像$("image1").CloudZoom.zoomImage = "image2.jpg"这样简单的东西,但是这样的东西似乎没有用。

谢谢你们

1 个答案:

答案 0 :(得分:1)

您可以将缩略图放在div中,并为div提供onclick事件。

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

调用javascript函数并添加:

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

cloudzoom使用锚标记的href指向要使用的图像,这就是我们将href更新为新图像标记的原因。