使云缩放插件上的内部缩放图像可点击(jQuery)

Question

我正在使用‘内部缩放’函数(link to plugin page)的云缩放jQuery插件。我想要它，以便当有人悬停在图像上时，他们可以单击放大的图像转到一个链接。有人知道这是如何实现的吗？

提前感谢！

Answer 1

cloud-zoom在使用Cloud-Zoom的每个图像上生成一个名为"wrap“的div。我们可以使用jQuery将“单击”功能添加到#wrap。在本例中，我们将创建一个名为"myurl“的自定义属性，您将在其中指定您希望图像链接到的位置。

在您的<head>标签中：

<script>
jQuery(window).load( function() {
    jQuery('div#wrap').click(function(){ window.location=$(this).find("a").attr("myurl");
     return false; });
});
</script>

然后将myurl="http://www.website.com"添加到每个云缩放图像的<a>中。您的html应该如下所示：

<a href='main.jpg' myurl="http://www.bungy.com/" class='cloud-zoom'
    rel="position: 'inside', adjustX: 0, adjustY: 0, showTitle: false">
    <img src="thumb.jpg" style="opacity: 1;"/>
</a>

让我知道这是如何为你工作的。