获取灯箱（或其替代品）以在单击链接时动态显示图库

Question

注意：我已经使用了 lightbox 及其许多替代方案来尝试解决此问题，目前我正在使用clearbox。

问题：目前我有 JavaScript 代码，根据单击的元素，灯箱的模式弹出窗口应该向用户显示一组不同的图像。下面是我目前正在修改的代码。

$("download").html(" \
<span style='color:white'> \
    <a href='img/26.jpg' rel='clearbox' title='Caption'>View Screenshots</a> \
</span><br /> \

然而，该链接不会启动灯箱（适用于页面上已有的链接），我花了两天时间浏览谷歌和 stackoverflow 试图找到解决方案。

我想要实现的目标概述：我的作品展示，其中一张图像将根据所选作品通过 javascript 作为超链接动态添加。当用户单击时，他们将可以浏览所有其他隐藏但属于图库的图像。将会有多个画廊。感谢您的阅读。

编辑1：请原谅mspaint工作 https://i.sstatic.net/rN8q1.jpg

Answer 1

问题是您必须对通过 ajax 拉入页面的任何链接调用clearbox。当您最初调用clearbox时，jQuery会从选择器中获取所有元素并向它们添加功能。然后，如果您通过 ajax 拉入其他链接（或者甚至稍后将它们添加到 dom），那么这些元素的clearbox 尚未实例化。

jQuery .live() 函数修复了添加到 dom 的元素的此问题，但clearbox 并不是为使用 .live() 而构建的。因此，您必须对单独添加到页面的任何其他链接调用clearbox。

http://api.jquery.com/live/

---

编辑
我快速浏览了clearbox文档页面：http://www.clearbox.hu/index_en。 html

它指出您可以调用 CB_Init() 为新项目添加clearbox：

通过 AJAX 使用脚本
如果您使用 AJAX 加载新内容
网页无需刷新，您希望 Clearbox 可以工作
对于新内容，您也必须调用 CB_Init();之后函数
您的 AJAX 内容加载。

所以你可以这样做：

$("download").html(" \
        <span style='color:white'> \
           <a href='img/26.jpg' rel='clearbox' title='Caption'>View Screenshots</a> \
        </span><br /> \ ");
CB_Init();