JS响应式画廊插件baguetteBox.js

简介

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