图片灯箱类库Lightbox.js使用方法

实现点击图片放大显示功能的前端有类库很多，这里介绍的是lightbox.js。

官网和Github仓库显示这个组件已经是2.0版本了，所有都是叫light2。

官网： https://lokeshdhakar.com/projects/lightbox2

Github： https://github.com/lokesh/lightbox2

下面是使用方法，基本上把自官方网站的说明精简一下。

有两种安装方法，一种是通过npm命令行。

还一种是在其官方的发布网站，也就是从Lightbox Github仓库中下载发版的资源包，然后将js和css文件引入到html中。

首先，在标签内部添加css引用：

引入css的时候要一起将资源包的images文件一起部署，确保能访问到其中的四个小图片，程序会用到。

然后，在标签关闭标志之前添加js引用：

当然，在引用的时候要考虑到具体的相对路径。

另外需要注意的是，本组件是基于jQuery的，因此在引入之前要确保jQuery在其之前引入，jQuery要求是1.7或者更高的版本。因为用到jQuery的效果模块，所以，只引入精简版的jQuery slim是不行的。

如果系统没有单独引用jQuery，这个类库发版文件夹中也有一个集成了jQuery的版本，引入这个版本的就无需提前引入jQuery了。

在原有的图片标签外部包上一个a标签，这个a标签也可以放在自己想要放置的被点击的位置，其中的href属性指向要放大显示的原图路径即可。

在a标签中添加一个data-lightbox属性，属性值自己定义，如果是独立的图片，则不能重复。

如果是一系列的图集，在放大后可以直接浏览前后的图片，那么要将data-lightbox的属性值保持一致。

另外，有两个可选属性：

data-title，内容是点击放大后显示在放大的图片下方的标题。

data-alt，内容是放大后的图片的alt属性。

在html中设置完成后，即完成了相关工作，刷新页面后点击图片应该可以看到效果了。

本组件预留了一些配置选项，配置方法如下：

这里的lightbox是组件自动生成的对象，调用其option方法即可进行属性配置。

下面这个表格是各个支持配置的选项。