baguetteBox是一款简单实用的纯js响应式lightbox插件。它支持移动触摸设备，使用CSS3过渡动画效果，兼容IE8浏览器，具有图片响应式的特点。另外它的特点还有：
- 使用纯JavaScript编写，没有外部依赖。
- 支持显示多个画廊，允许分别设置它们的参数。
- 支持移动触摸屏的滑动手势。
- lightbox的外观时尚美观。
- 支持图片标题。
- 响应式图片设计。
- 动画使用CSS3 transitions平滑过渡。
- 按钮使用SVG，不用请求图片。
- 插件压缩后尺寸只有2.3KB。
安装
可以使用npm或bower来安装该插件。
npm install baguettebox.jsbower install baguettebox.js |
使用方法
使用该lightbox插件首先要引入baguetteBox.min.css和baguetteBox.min.js文件。
<link rel="stylesheet" href="css/baguetteBox.min.css"><script src="js/baguetteBox.min.js" async></script> |
HTML结构
该lightbox插件的html结构使用一个<div>来包裹<a>元素。
<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> |
要使用图片标题，可以在<a>元素添加title属性或data-caption属性。
调用插件
通过下面的方法来初始化该lightbox插件。
baguetteBox.run('.gallery', { // Custom options}); |
配置参数
下面是该Lightbox插件的所有可用的配置参数：
{ captions: true, // true|false|callback(gallery, element) - Display image captions // or return from the callback buttons: 'auto', // 'auto'|true|false - Display buttons async: false, // true|false - Load files asynchronously preload: 2, // [number] - How many files should be preloaded from current image animation: 'slideIn', // 'slideIn'|'fadeIn'|false - Animation type 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 - pattern to match image files} |
buttons: 'auto'会在触摸屏设备上隐藏按钮，或只有一副图片被显示的时候隐藏按钮。
公共方法
- showNext ：切换到下一张图片。
- showPrevious ：切换到前一张图片。
两个方法在有图片或无更多图片加载时返回true或false。
响应式图片
要使用响应式图片特性，可以在<a>标签上添加data-at-{width}属性，每个属性值对应一种尺寸的图片。{width}是屏幕可以显示的图片的最大尺寸。插件会选择第一幅大于或等于{width}的图片来展示。最后的data-at-X是用于屏幕大于X使的显示图片。
下面是一个示例：
<a href="img/2-1.jpg" data-at-450="img/thumbs/2-1.jpg" data-at-800="img/small/2-1.jpg" data-at-1366="img/medium/2-1.jpg" data-at-1920="img/big/2-1.jpg"> <img src="img/thumbs/2-1.jpg"></a> |
如果你的屏幕分辨率是1366×768，那么插件会选择"img/medium/2-1.jpg"。如果是1400X900，插件则会选择"img/big/2-1.jpg"。href属性是作为一个回退在旧的浏览器中显示大图片（如一些高清大图）。
浏览器兼容
- IE 8+
- Chrome
- Firefox 3.6+
- Opera 12+
- Safari 5+
- Sleipnir
