Lightbox2是一个简单实用的脚本，可以用来将您的图像或照片叠加在当前网页上

它还可以用作图像库或幻灯片，用户可以在同一组中的图像之间切换。

使用起来非常简单，无需编写任何JS代码。

如何使用它:

1.将jQuery JavaScript库和Lightbox2插件的JavaScript&CSS添加到您的html页面中。

<link rel="stylesheet" href="dist/css/lightbox.min.css">
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="dist/js/lightbox.js"></script>

2.使用数据灯箱属性

<a class="demo" href="1.jpg" data-lightbox="example-1">
  <img class="example-image" src="thumb-1.jpg" alt="image-1">
</a>

<a class="demo" href="2.jpg" data-lightbox="example-2">
  <img class="example-image" src="thumb-2.jpg" alt="image-2">
</a>

3.有时您可能需要在灯箱中显示图片说明。该插件允许您使用数据标题属性：

<a class="demo" href="3.jpg" data-lightbox="example-3" data-title="Caption">
  <img class="example-image" src="thumb-3.jpg" alt="image-3">
</a>

4.要创建画廊灯箱，只需制作数据灯箱属性的值与以下值相同：

<a class="demo" href="1.jpg" data-lightbox="gallery">
  <img class="example-image" src="thumb-1.jpg" alt="image-1">
</a>

<a class="demo" href="2.jpg" data-lightbox="gallery">
  <img class="example-image" src="thumb-2.jpg" alt="image-2">
</a>

<a class="demo" href="3.jpg" data-lightbox="gallery">
  <img class="example-image" src="thumb-3.jpg" alt="image-3">
</a>

<a class="demo" href="4.jpg" data-lightbox="gallery">
  <img class="example-image" src="thumb-4.jpg" alt="image-4">
</a>

<a class="demo" href="5.jpg" data-lightbox="gallery">
  <img class="example-image" src="thumb-5.jpg" alt="image-5">
</a>

...

5.具有默认值的可能选项。请随意覆盖以下选项以自定义图像灯箱和画廊插件。

lightbox.option({
  albumLabel: 'Image %1 of %2',
  alwaysShowNavOnTouchDevices: false,
  fadeDuration: 600,
  fitImagesInViewport: true,
  imageFadeDuration: 600,
  maxWidth: 800,
  maxHeight: 600,
  positionFromTop: 50,
  resizeDuration: 700,
  showImageNumberLabel: true,
  wrapAround: false, // If true, when a user reaches the last image in a set, the right navigation arrow will appear and they will be to continue moving forward which will take them back to the first image in the set.
  disableScrolling: false,
  /*
  Sanitize Title
  If the caption data is trusted, for example you are hardcoding it in, then leave this to false.
  This will free you to add html tags, such as links, in the caption.
  If the caption data is user submitted or from some other untrusted source, then set this to true
  to prevent xss and other injection attacks.
   */
  sanitizeTitle: false
})

更新日志：

v2.11.4版本（2023-02-22）

• 已修复Bug

v2.11.3版本（2020-07-12）

• 专长：当显示SVG时，最大限度地扩大它们的大小

v2.11.2版本（2020-07-07）

• 显示SVG时，最大化其大小

v2.11.1版本（2019-07-15）

• 错误修复-MaxHeight无法工作
• 修复了fitImagesInViewport为false时使用max[Width|Height]的问题。
• 功能：防止Esc键冒泡

v2.11.0版本（2019-04-22）

• IE11和旧版Firefox中没有宽度和高度属性的SVG大小不正确。
• 删除关闭和导航的alpha kbd别名（x/c/o/n/p）。保持ESC和箭头。
• 禁用单击图像时滚动到顶部
• 为占位符图像添加空的alt文本
• 为上一个和下一个图像添加咏叹调标签
• 打开/关闭时元素的可见性切换，显示有意隐藏的元素。
• 标题链接处理程序不触发。
• 固定了更改位置FromTop时的图像大小

2018-05-31

• JS+CSS+DEMO+DOC更新

2018-05-31

• JS+CSS+DEMO+DOC更新

预览截图

jQuery 图像灯箱和图库 Lightbox2