一个灵活、响应迅速、移动友好的JavaScript插件可以帮助您在桌面和移动网站上创建图像灯箱和图库灯箱。

特征：

• 响应灵敏，触感友好。
• 图像预加载和加载微调器。
• CSS3支持的动画。
• 键盘/触摸滑动导航。
• 自定义图像纵横比。
• 捏住或双击/单击以进行缩放。
• 可作为JavaScript或jQuery插件使用。

如何使用它:

1.加载简单灯箱.最小.css在页眉和简单灯箱.min.js在网页的页脚部分。

<link href="dist/simple-lightbox.min.css" rel="stylesheet" />
<!-- As A Vanilla JavaScript Plugin -->
<script src="dist/simple-lightbox.min.js"></script>
<!-- For legacy browsers -->
<script src="dist/simple-lightbox.legacy.min.js"></script>
<!-- As A jQuery Plugin -->
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="dist/simple-lightbox.jquery.min.js"></script>

2.将您的所有图像插入到图库容器中。该插件将自动从中高音的属性国际货币基金组织标签要对图像进行分组，只需将rel属性添加到链接中，如下所示：

<div class="gallery"> 
 
  <a href="1.jpg" class="big" rel="rel1">
    <img src="thumb1.jpg" alt="" title="Image 1">
  </a>
 
  <a href="2.jpg" class="big" rel="rel1">
    <img src="thumb2.jpg" alt="" title="Image 2">
  </a>
 
  <a href="3.jpg" class="big" rel="rel2">
    <img src="thumb3.jpg" alt="" title="Image 3">
  </a>
 
  <a href="4.jpg" class="big" rel="rel2">
    <img src="thumb4.jpg" alt="" title="Image 4">
  </a>
  
</div>

3.使用默认选项调用插件以启用灯箱。

// As A Vanilla JavaScript Plugin
var gallery = new SimpleLightbox('.gallery a', { 
    /* options */ 
});
 
// As A jQuery Plugin -->
var gallery = $('.gallery a').simpleLightbox({
    /* options */
});

4.具有默认值的完全自定义选项。

// default source attribute
sourceAttr: 'href',
 
// shows fullscreen overlay
overlay: true,
 
// shows loading spinner
spinner: true,
 
// shows navigation arrows
nav: true,
 
// text for navigation arrows
navText: ['←','→'],
 
// shows image captions
captions: true,
captionDelay: 0,
captionSelector: 'img',
captionType: 'attr',
captionPosition: 'bottom',
captionClass: '',
 
// captions attribute (title or data-title)
captionsData: 'title',
 
// shows close button
close: true,
 
// text for close button
closeText: 'X',
 
// swipe up or down to close gallery
swipeClose: true,
 
// show counter
showCounter: true,
 
// file extensions
fileExt: 'png|jpg|jpeg|gif',
 
// weather to slide in new photos or not, disable to fade
animationSlide: true,
 
// animation speed in ms
animationSpeed: 250,
 
// image preloading
preloading: true,
 
// keyboard navigation
enableKeyboard: true,
 
// endless looping
loop:  true,
 
// group images by rel attribute of link with same selector
rel: false,
 
// closes the lightbox when clicking outside
docClose:  true,
 
// how much pixel you have to swipe
swipeTolerance: 50,
 
// lightbox wrapper Class
className: 'simple-lightbox',
 
// width / height ratios
widthRatio: 0.8,
heightRatio: 0.9,
 
// scales the image up to the defined ratio size
scaleImageToRatio: false,
 
// disable right click
disableRightClick: false,
 
// disable page scroll
disableScroll: true,
 
// show an alert if image was not found
alertError:  true,
 
// alert message
alertErrorMessage: 'Image not found, next image will be loaded',
 
// additional HTML showing inside every image
additionalHtml: false,
 
// enable history back closes lightbox instead of reloading the page
history: true,
 
// time to wait between slides
throttleInterval: 0,
 
// Pinch to Zoom feature for touch devices
doubleTapZoom: 2,
maxZoom: 10,
 
// adds class to html element if lightbox is open
htmlClass: 'has-lightbox',
 
// RTL mode
rtl: false,
 
// elements with this class are fixed and get the right padding when lightbox opens
fixedClass: 'sl-fixed',
 
// fade speed in ms
fadeSpeed: 300,
 
// whether to uniqualize images
uniqueImages: true,
 
// focus the lightbox on open to enable tab control
focus: true,

5.API方法。

// Opens the lightbox
gallery.open(); 
 
// Closes the lightbox
gallery.close(); 
 
// Goto next image
gallery.next(); 
 
// Goto previous image
gallery.prev(); 
 
// re-init the lightbox
gallery.refresh(); 
 
// get lightbox data
gallery.getLighboxData(); 
 
// Destroys the lightbox
gallery.destroy(); 

6.事件。

• 打开简易照明盒：在灯箱打开之前点火
• 打开的简易灯箱：灯箱打开后起火
• 关闭简易照明盒：在灯箱关闭之前点火
• 封闭式简易灯箱：灯箱关闭后起火
• 更改简易照明盒：在图像更改之前激发
• 已更改。简单灯箱：更改图像后激发
• 下一个简单灯箱：在下一个图像到达之前激发
• nextDone.simplelightbox：到达下一个图像后发生火灾
• 上一个简易工具箱：在上一个图像到达之前激发
• 上一篇Done.simple灯箱：在上一个图像到达后激发
• nextImageLoaded.简单灯箱：在加载下一个图像后激发（如果预加载已激活）
• prevImageLoaded.简单灯箱：在加载上一个图像后激发（如果预加载已激活）
• 错误。简单框：在图像加载错误时激发

$('.gallery a').on('open.simplelightbox', function () {
  // do something…
});

更新日志：

v2.13.0版本（2023-03-29）

• 错误修复程序

v2.12.1版本（2023-01-12）

• 修复了下载链接的错误

v2.12.0版本（2023-01-12）

• 错误修复程序

v2.11.0版本（2022-11-21）

• 增加了在标题中添加多个类的可能性，增加了更好的选择器的可能性

v2.10.4版本（2022-10-13）

• Bugfixed（错误修复）

v2.10.3版本（2022-03-21）

• 修复了滚动页面时错误的鼠标缩放

v2.10.2版本（2022-01-27）

• 修复了上次发布后的小标题错误

v2.10.1 (2021-11-16)

• 已修复Bug

v2.10.0 (2021-11-10)

• 固定导航按钮消失
• 添加了新方法getLighborxData

v2.9.0 (2021-09-30)

• 添加了鼠标滚动功能。

v2.8.1 (2021-09-08)

• 修复了滚动错误

v2.8.0 (2021-06-24)

• 固定右侧版本号

v2.8.0 (2021-04-21)

• 更新的程序包

v2.7.2 (2021-04-21)

• 固定源Attr不起作用。

v2.7.2 (2021-04-14)

• 修正了“disableRightClick”选项不再有效的问题

v2.7.1 (2021-04-13)

• 修正了firefox中没有鼠标滑动的问题

v2.7.0版本（2020-11-19）

• 允许captionSelector作为返回元素的回调函数

v2.6.0版本（2020-10-29）

• 添加了新选项：uniqueImages和focus
• 修复了错误

v2.5.0版本（2020-10-21）

• 添加了新选项fadeSpeed

v2.4.1版本（2020-10-19）

• 添加了支持IE 11的新simple-lightbox.legacy.js
• 错误修复程序

v2.4.0/v2.3.0版本（2020-10-13）

• 为固定元素类添加了新选项。

v2.2.2版本（2020-09-29）

• 修复了一些错误

v2.2.1版本（2020-05-19）

• 已修复：当触摸向上或向下滑动时手机中的问题

v2.1.5版本（2020-04-29）

• 已修复：在触摸设备上双击缩放
• 固定：在移动设备上平移

v2.1.4版本（2020-04-07）

• 已修复：在触摸设备上双击缩放

v2.1.3版本（2020-03-17）

• Bugfixed（错误修复）

v2.1.2版本（2020-02-26）

• 修复了额外的Html错误

v2.1.1版本（2020-02-18）

• 固定字幕错误

v2.1.0版本（2020-02-17）

• 增加了rel分组功能

2019-06-06

• 修复了双击时字幕消失的问题，并添加了更好的关闭符号

2019-04-11

• 在fileExt列表中添加了webp
• 删除了isValidLink函数中的硬编码a标记

2019-03-24

• 添加了双击以缩放桌面浏览器

2019-02-21

• 如果图像上的触摸启动发生在A标签上，请转到其href

2019-02-15

• 如果lightbox处于打开状态，则向html元素添加类

2019-02-07

• 用于触摸设备的缩放功能，具有新选项doubleTapZoom和maxZoom

2018-11-27

• Bugfixed（错误修复）

2018-10-17

• 修正了错误并增加了在加载时关闭灯箱的可能性

2018-10-05

• 修复覆盖z索引

2018-06-20

• 将Imagecaption设置为与图像相同

2018-06-20

• 使覆盖不透明度可配置

2018-03-09

• 错误修复

2018-01-29

• 修复了错误并删除了绑定/解除绑定

2017-11-24

• 新选项标题Class
• refresh（）和jquery 3.2.1的错误

2017-07-19

• 多亏了walterebert，增加了对带有参数的图像和文件扩展名检查的支持

2017-05-15

• 图像src的新选项。例如数据属性

2017-04-04

• 增加了引导程序兼容性

2017-03-22

• 仅当灯箱打开时才阻止默认设置关键帧操作

2017-01-11

• 添加默认标志
• 提高字幕不透明度

2016-11-24

• 错误修复程序

2016-11-13

• 错误修复程序

2016-10-31

• 对齐导航和关闭按钮，修复了图像错误错误错误

2016-10-25

• 增加了对jQuery 3.x的支持

2016-10-13

• 为移动网站的打开灯箱添加哈希选项
• 一些错误修复和代码样式

2016-07-27

• 添加了用于对图像进行分组的rel选项

2016-07-03

• 允许重新初始化simpleightbox

2016-06-06

• 滑动顶部/底部以关闭图库

2016-05-03

• 修复了iPad上的docClose问题
• 添加了用于图像内部附加html的选项

2016-04-12

• 错误修复。

2016-02-29

• 错误修复。

2016-02-08

• Geoffrey Crofte带来的新API事件（改为open to show）和函数open（）中的小修复以及其他一些小错误修复

2016-01-23

• 更多错误修复

2016-01-08

• 错误修复

2016-01-04

• 添加对照片之间淡入淡出的支持
• 单图像导航的Bugfix

2015-12-15

• 标题位置选项
• 如果循环为false并且位置为第一个或最后一个，则禁用上一个或下一个箭头。

2015-12-03

• 一个页面上多个灯箱的错误修复

2015-11-08

• 添加了禁用右键单击和滚动的选项，更改了默认的上一个和下一个按钮文本

2015-11-03

• fileExt的选项现在可以为false

2015-10-27

• Bugfix灯箱打开在移动设备上不起作用

2015-10-26

• 修正了FF中没有拖放的错误，更改了默认的关闭文本，仅在灯箱打开时输出数据

2015-10-15

• 将微调器的z索引修复为较低，添加了sass文件

2015-10-13

• 增加Z索引
• 已修复鼠标离开窗口时不触发Drop事件

2015-10-03

• 整个标题选择器被重写。现在可以选择一个元素并获取其文本、使用数据或属性

2015-09-14

• 标题属性现在可以是任何属性。错误修复程序

2015-09-05

• 如果灯箱关闭，则禁用键盘控制

2015-08-17

• 增加了当前索引指示器/计数器

2015-07-06

• 添加了标题属性选项（标题或数据标题）

2015-05-31

• 循环错误修复

预览截图

响应式触控图像灯箱插件