javascript - Featherlight.js - 可以在灯箱内与 img-zoom 一起使用吗？

Question

我几天来一直在尝试(和搜索)，但没有实现我的想法......

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

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

elevatezoom.js 在灯箱外部运行良好，但不幸的是在灯箱内部不行。有没有人让这个一起工作？或者我需要另一个javascript(？)我尝试了几次..感谢您的帮助!

Answer 1

问题似乎出在 ElevateZoom 插件计算图像位置和尺寸的方式上。

如果您尝试将图片放入featherlight隐藏的div中，您会看到ElevateZoom确实创建了一个zoomContainer并且一切正常，除了这是它生成的CSS:

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

这似乎会发生，因为当您调用 $('#image_element').offset() 时，它会返回 {top:0,left:0} 我认为是因为当它位于featherlight容器内时，它的位置是固定。

如果您还没有找到另一个图像缩放库，我认为解决此问题的最简单方法就是自己制作此效果。您只需在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>

注意背景图像和背景重复。当光标相对于图像所在位置移动时，您可以使用 Javascript 来移动它。

希望这会有所帮助!