如何使用javascript动态更改cloud-zoom Zoom Image 1.0.2

Question

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

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

谢谢你们

Answer 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更新为新图像标记的原因。