简介

baguetteBox.js 是一个简单和易于使用lightbox纯JavaScript脚本，拥有图像放大缩小并带有相应的CSS3过度，并能在触摸屏等设备上完美展示。

特定：

纯JS编写，无任何依赖
支持多重画廊(Multiple-gallery)效果, 且允许自定义参数
支持手势滑动(仅在支持多点触控设备上)
现代简约风格
图像字幕支持
响应式的图像
CSS3转换
SVG按钮,没有额外的文件下载
压缩后大约2.3KB

参数说明：

baguetteBox.run('.gallery', {
  captions: true,       // true|false|callback(element) - 显示图片说明
  buttons: 'auto',      // 'auto'|true|false - 显示翻页按钮
  async: false,         // true|false - 异步加载
  preload: 2,           // [number] - 需要预加载图片的个数
  animation: 'slideIn', // 'slideIn'|'fadeIn'|false - 动画
  afterShow: null,      // callback - To be run after showing the overlay
  afterHide: null,      // callback - To be run after hiding the overlay
  onChange: null,       // callback(currentIndex, imagesElements.length) - When image changes
  filter: /.+\.(gif|jpe?g|png|webp)/i // RegExp object - 正则去匹配文件
});

使用

1.  引入 baguetteBox.min.css 和 baguetteBox.min.js 文件

2.  HTML

<div class="gallery">
	<a href="img/2-1.jpg" data-caption="Image caption"><img src="img/thumbs/2-1.jpg"></a>
	<a href="img/2-2.jpg"><img src="img/thumbs/2-2.jpg"></a>
  ...
</div>

用title 或者 data-caption 标签来描述图片。当一个div标签里有多组a链接组成的图片时，单击其中一张图片会发现自动有左右翻页效果。

3. 调用

初始化脚本运行：

baguetteBox.run('.gallery', {
  // Custom options
});

相关链接

GitHub 地址 ：https://github.com/feimosi/baguetteBox.js

中文文档：https://github.com/52fhy/baguetteBox.js

在线演示 ：https://github.com/52fhy/baguetteBox.js