这篇文章上次修改于 1080 天前,可能其部分内容已经发生变化,如有疑问可询问作者。

2019-12-16T12:30:16.png
lightbox 是一个JavaScript 库,用来在前端显示图片。它的特点是轻量,容易部署,适用于现代的浏览器。

官网:https://lokeshdhakar.com/projects/lightbox2/
GitHub 项目地址:https://github.com/lokesh/lightbox2
release 下载:https://github.com/lokesh/lightbox2/releases

下载

在发布页下载最新版本到本地或服务器:

wget https://github.com/lokesh/lightbox2/archive/v2.11.1.tar.gz
tar -zxvf v2.11.1.tar.gz

css/js 文件在解压包的 dist 目录下。

引用

在 html 的 <head> 标签栏内引用 css 文件:

<link href="path/to/lightbox.css" rel="stylesheet" />

在 html 结束前的 </body> 标签前引用 js 文件:

<script src="path/to/lightbox.js"></script>

lightbox2 的 js 需要 jQuery 1.7,所以确保 jQuery 在 lightbox 的 js 文件之前引用。

如果你没有安装 jQuery,可以使用预先包含了 lightbox 和 jQuery 的 js 文件 代替上面的 lightbox.js:

<script src="dist/js/lightbox-plus-jquery.js"></script>

使用

在图片链接内增加属性 data-lightbox 来激活 lightbox。

单图片显示

<a href="images/image-1.jpg" data-lightbox="image-1" data-title="My caption">Image #1</a>

选项:
增加 data-title 属性,如果你想增加一个title.
增加 data-alt 属性,如果你想附加一个图片的属性.

多图片库

如果你有多张图片想要通过左右箭头切换显示,可以设置如下:

<a href="images/image-2.jpg" data-lightbox="roadtrip">Image #2</a>
<a href="images/image-3.jpg" data-lightbox="roadtrip">Image #3</a>
<a href="images/image-4.jpg" data-lightbox="roadtrip">Image #4</a>

属性设置

如果想要修改默认的显示设置,可以引用 option method,例如:

<script>
    lightbox.option({
      'resizeDuration': 200,
      'wrapAround': true
    })
</script>

所有可设置的参数,可查看官网:https://lokeshdhakar.com/projects/lightbox2/