javascript - 如何使用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 使用 anchor 标记的 href 指向要使用的图像，这就是我们将 href 更新为新图像标记的原因。