更新：破坏性较小的选项

Question

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

我的灯箱包含div：

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

如果我：

使用$("#demoLightbox").lightbox()
使用$("#demoLightbox").lightbox('hide')
通过AJAX更改图像
要求用$("#demoLightbox").lightbox()

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

大小计算是在Lightbox类的构造函数中完成的，所以我认为$("#demoLightbox").lightbox()会给我一个 new 实例并再次进行计算。但似乎我得到了同一个！发生了什么事？

Answer 1

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

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

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

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

<小时/>

更新：破坏性较小的选项

这个插件似乎有一些未记录的功能，其中一个功能可能对您要完成的任务有用。也就是说，选项中有一个名为 resizetofit 的标记。默认情况下，它设置为false。此标志用于使灯箱大小本身适合窗口大小。在调整大小的过程中，它将重新计算内容的维度。

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

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

（不）重用jQuery插件实例

1 个答案:

更新：破坏性较小的选项