以防万一没有人找到解决方案,这里有一种方法。您将需要使用 fancybox 而不是 lightbox 和 elevatezoom。您可以通过以下链接找到它们:
http://fancyapps.com/fancybox/#license http://fancyapps.com/fancybox/#license
http://www.elevateweb.co.uk/image-zoom/download http://www.elevateweb.co.uk/image-zoom/download
下载后,在标头中添加不同的插件(或在正文底部以加快加载速度),标头应如下所示:
<link rel="stylesheet" type="text/css" href="css/jquery.fancybox.css" />
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="js/jquery.elevateZoom-3.0.8.min.js"></script>
在 jquery.fancybox 之后添加以下内容:
<style type="text/css">
.zoomContainer { z-index: 100000; }
</style>
这是一个修复,因此缩放容器出现在实际的 fancybox 上方。
添加班级.fancybox
在包装图像的链接上。
然后在不同的脚本后面添加以下内容:
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox({
afterShow: function() {
$('.fancybox-image').elevateZoom({
zoomType : "lens",
lensShape : "round",
lensSize : 200
});
}
});
});
</script>
然后你应该让镜头与 fancybox 一起使用!