jQuery Lightbox 图片展示插件使用说明

简介

jQuery Lightbox是一款轻量级的开源图片展示插件，可以快速方便地实现制作图片画廊、幻灯片轮播等功能。该插件使用了很多jQuery动画效果，能给用户带来流畅的图片展示体验。

安装

从官网下载

从jQuery Lightbox的官网下载插件。下载完成后，将 lightbox.min.js 和 lightbox.min.css 这两个文件复制到项目中并引入到HTML文件。

<head>
  <link href="path/to/lightbox.min.css" rel="stylesheet">
</head>
<body>
  <!-- 页面内容 -->
  <script src="path/to/lightbox.min.js"></script>
</body>

npm 安装

使用 npm 安装插件：

npm install lightbox2

在 HTML 中通过以下方式引入其样式表和 JavaScript 文件：

<head>
  <link href="../node_modules/lightbox2/src/css/lightbox.css" rel="stylesheet">
</head>
<body>
  <!-- 页面内容 -->
  <script src="../node_modules/lightbox2/src/js/lightbox.js"></script>
</body>

注意事项：

需要在引入 lightbox.min.js 文件之后引用 jQuery 库文件，因为插件是基于 jQuery 开发的。

使用

普通链接图片展示

使图片成为一个带有 lightbox 图片展示效果的链接，只需要在链接中添加 data-lightbox 和 data-title 属性。其中 data-lightbox 属性的值必须是相同的，它们表示图片所在同组中的唯一标识，而 data-title 则是图片展示后附带上的标题。

<a href="path/to/image.jpg" data-lightbox="gallery" data-title="Image Title">
  <img src="path/to/thumb.jpg" alt="">
</a>
<a href="path/to/image2.jpg" data-lightbox="gallery" data-title="Image Title 2">
  <img src="path/to/thumb2.jpg" alt="">
</a>

网页嵌入图片展示

在网页中嵌入图片时，只需要将 img 标签的链接地址修改为高清大图的位置即可。以下面的代码片段为例：

<div class="lightbox-gallery">
  <img src="path/to/image.jpg" alt="">
  <img src="path/to/image2.jpg" alt="">
</div>

嵌入多张图片时，要确保它们的外层容器有一个 class 属性 lightbox-gallery。这样就可以在图片嵌套时使用 data-lightbox 来作为唯一标识符：

<div class="lightbox-gallery">
  <a href="path/to/image.jpg" data-lightbox="gallery-1" data-title="Image Title">
    <img src="path/to/thumb.jpg" alt="">
  </a>
  <a href="path/to/image2.jpg" data-lightbox="gallery-1" data-title="Image Title 2">
    <img src="path/to/thumb2.jpg" alt="">
  </a>
</div>

效果预览

下面展示使用 jQuery Lightbox 插件制作的一个画廊效果预览：

<div class="lightbox-gallery">
  <a href="https://picsum.photos/id/741/1200/800" data-lightbox="gallery-1" data-title="Image Title">
    <img src="https://picsum.photos/id/741/200/133" alt="">
  </a>
  <a href="https://picsum.photos/id/371/1200/800" data-lightbox="gallery-1" data-title="Image Title 2">
    <img src="https://picsum.photos/id/371/200/133" alt="">
  </a>
  <a href="https://picsum.photos/id/435/1200/800" data-lightbox="gallery-1" data-title="Image Title 3">
    <img src="https://picsum.photos/id/435/200/133" alt="">
  </a>
  <a href="https://picsum.photos/id/996/1200/800" data-lightbox="gallery-1" data-title="Image Title 4">
    <img src="https://picsum.photos/id/996/200/133" alt="">
  </a>
</div>

jQuery Lightbox 图片展示插件使用说明