1

在尝试将这个jquery lightbox 插件用于 Bootstrap（点击查看源代码）时，我偶然发现了一个关于 jQuery 插件如何工作的奇怪问题。

我有一个div灯箱的容器：

<div class="lightbox fade" id="demoLightbox" style="display: none;">
    <div class='lightbox-content'>
        <img src="image.png">
    </div>
</div>

如果我：

  1. 打开灯箱$("#demoLightbox").lightbox()
  2. 关闭它$("#demoLightbox").lightbox('hide')
  3. 通过AJAX改变图像
  4. 要求重新打开一个 nre 灯箱$("#demoLightbox").lightbox()

然后出现第二个灯箱，但尺寸与第一个灯箱相同；它们没有根据新图像重新计算！

大小计算是在 Lightbox 类的构造函数中完成的，所以我认为这$("#demoLightbox").lightbox()会给我一个新实例并再次进行计算。不过好像我也有同款！发生了什么 ？

4

1 回答 1

1

如果大小计算仅在构造函数中进行，那么最简单的做法是创建一个新实例，正如您所尝试的那样。但是，您首先需要删除旧实例：

$('#demoLightbox').removeData('lightbox');

如果你想要一个新的实例，那么

$('#demoLightbox').removeData('lightbox').lightbox();

更新：破坏性较小的选择

这个插件似乎有一些未记录的特性，其中一个可能对你想要完成的事情有用。即，选项中有一个名为resizetofit的标志。默认情况下，它设置为false。此标志用于使灯箱大小本身适合窗口大小。在调整大小的过程中，它将重新计算内容的尺寸。

将属性添加data-resizetofit="true"到启动链接的标记或<div class="lightbox" >应该触发每次调用该show()方法时重新计算内容。

注意：只有在<img>替换为全新的<img>. 仅仅更改src属性将失败，因为维度计算在第一次计算后被缓存到元素上。

于 2012-09-05T22:14:27.400 回答