介绍

baguetteBox.js是一个响应式画廊插件(纯JS)，拥有图像放大缩小并带有相应的CSS3过度，并能在触摸屏等设备上完美展示。

Github

特点用纯JavaScript编写，不需要依赖项多画廊支持允许为每个画廊提供自定义选项支持触摸屏设备上的滑动手势全屏模式可用现代简约的外观图片字幕支持响应式图像CSS3过渡SVG按钮，无需下载其他文件压缩约3.2KB考虑可靠性安装使用使用npm安装

npm install baguettebox.js

使用Bower

bower install baguettebox.js

直接引入

<link rel="stylesheet" href="css/baguetteBox.min.css"><script src="js/baguetteBox.min.js" async></script>

#使用commonjsconst baguetteBox = require('baguettebox.js');#使用es模块化import baguetteBox from 'baguettebox.js';@import 'baguettebox.js/dist/baguetteBox.min.css';

baguetteBox.run('.gallery');//初始化脚本

<div class="gallery">    <a href="img/2-1.jpg" data-caption="Image caption">        <img src="img/thumbnails/2-1.jpg" alt="First image">    </a>    <a href="img/2-2.jpg">        <img src="img/thumbnails/2-2.jpg" alt="Second image">    </a>    ...</div>

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

常用方法

showNext - 切换到下一张图片

showPrevious - 切换到上一张图片

响应式图片

如果需要响应式图片，可以分别在a标签加入data-at-{width}属性，{width}是图片可显示的最大宽度，baguetteBox.js会在页面初始化（窗口手动改变大小不会再响应）时选择相应的尺寸。

<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>

如果屏幕分辨率是1366x768，baguetteBox.js将会选择"img/medium/2-1.jpg". 如果是1440x900则会选择 "img/big/2-1.jpg".

兼容性

桌面端:

IE 8+ChromeFirefox 3.6+Opera 12+Safari 5+

移动端:

Safari on iOSChrome on Android截图