Lightbox JS 2.04 源码改造：支持富文本图片说明

Lightbox JS 2.04 源码改造：支持富文本图片说明

本次改造基于 Lightbox JS 2.04 版本进行。

在使用 Lightbox 展示图片时，通常采用以下基础配置方式：

 
<a href="image-url" rel="lightbox" title="image-remark">
内容部分
</a>

核心在于为链接添加 rel="lightbox" 属性。

配置好链接后，点击即可显示图片，并利用 title 属性作为简短说明。然而，若需添加详细且带有格式（如字体大小、颜色等）的图片说明，仅依靠 title 属性无法实现，因为该属性仅支持纯文本。

为满足客户对复杂说明功能的需求，我们查阅了 Lightbox 源代码。由于代码量不大且逻辑清晰，只需进行少量修改即可实现目标。尽管对 Prototype.js 框架不熟悉，但通过排查仍找到了可行的修改方案。

以下是具体的修改步骤：

打开 lightbox.js 文件，定位到原第 218 行代码：

this.imageArray.push([imageLink.href, imageLink.title]);

该行代码直接读取了链接对象的 title 属性。因此，我们需要替换 imageLink.title 的取值逻辑：

this.imageArray.push([imageLink.href, document.getElementById(imageLink.contentId).innerHTML]);

即将 imageLink.title 替换为 document.getElementById(imageLink.contentId).innerHTML。

从上述代码可以看出，我们需要为链接对象新增一个 contentId 属性。该属性的值应指向某个 DOM 元素的 ID，图片的详细说明内容即存储在该元素中。

修改完成后，HTML 中的图片说明设置方式如下：

 
<a href="image-url" rel="lightbox" contentId="imgDesc" title="image">
<div id="imgDesc" style="display:none">description</div>
内容部分
</a>