Question

自从几天以来我一直在尝试（和搜索），但没有让我的想法奏效......

我使用featherlight lightbox来显示HTML内容（带有一些图像的文本）。由于一些照片非常小，我想对它们进行图像缩放。

此处放大的示例：jquery.elevatezoom.js #6:inner-zoom

elevatezoom.js可以很好地在外面灯箱，但不幸的是不在里面。是否有人让这个一起工作？或者我需要另外一个javascript（？）我尝试了几个..感谢您的帮助！

Answer 1

问题似乎与ElevateZoom插件计算图像的位置和尺寸有关。

如果你试图将图片放在dragonlight隐藏的div中，你会看到ElevateZoom确实创建了一个zoomContainer并且一切正常，除了这是它生成的css：

left: 0px;
top: 0px;
height: 0px;
width: 0px;

这似乎发生了，因为当您致电$('#image_element').offset()时，它会返回{top:0,left:0}我假设因为当它位于featherlight容器内时，其位置为fixed。

我认为解决这个问题的最简单方法是，如果您还没有找到另一个图像缩放库，那就是自己制作这个效果。你可以简单地在featherlight容器中有两个div，一个隐藏包含较大的图片，一个较小包含普通图片。当鼠标进入图片时，你隐藏小图并显示大图。那将是第一步。

第二步是滚动。 elevateZoom处理此方法的方法是将background-image设置为大图像，然后使用background-position属性移动它。以下是elevateZoom生成的示例：

<div style="z-index: 999; overflow: hidden; margin-left: 0px; margin-top: 0px; width: 411px; height: 274px; float: left; cursor: crosshair; position: absolute; top: 0px; left: 0px; display: block; opacity: 0; background-image: url(&quot;images/large/image1.jpg&quot;); background-position: -152.651px -545.577px; background-repeat: no-repeat;" class="zoomWindow">&nbsp;</div>

注意background-image和background-repeat。当光标相对于图像所在的位置移动时，您可以使用Javascript移动它。

我希望这有帮助！

featherlight.js - 可以与灯箱中的img-zoom一起使用吗？

1 个答案: