baguetteBox.js是一款支持移动设备的响应式lightbox插件
。baguetteBox.js有纯javascript编写,支持响应式图片和CSS3动画过渡效果,支持移动手机,压缩后的版本仅2.7K。baguetteBox.js插件的特点还有:
- 同一个页面支持多个lightbox实例,互不影响。
- 支持移动触摸设备。
- 支持全屏模式。
- 支持显示图片标题。
- 支持响应式图片。
- 支持CSS3过渡动画。
- 按钮使用SVG,不需要额外的图片。
- 压缩后的版本仅2.7K。
安装
可以通过npm、yarn或bower来安装baguetteBox.js插件。
npm install baguettebox.js --save yarn add baguettebox.js bower install baguettebox.js --save
使用方法
在页面中引入baguetteBox.js和baguetteBox.css文件。
<link rel="stylesheet" href="path/to/baguetteBox.css"> <script src="path/to/baguetteBox.js"></script>
HTML结构
baguetteBox.js lightbox图片画廊的基本HTML结构如下:
<div class="gallery"> <a href="img/2-1.jpg" data-caption="Image caption"> <img src="img/thumbs/2-1.jpg" alt="First image"> </a> <a href="img/2-2.jpg"> <img src="img/thumbs/2-2.jpg" alt="Second image"> </a> ... </div>
如果要使用图片标题,可以在a
标签上添加title
或data-caption
属性。
初始化插件
在页面DOM元素加载完毕,可以通过run()
方法来初始化该lightbox插件。其中传入的参数为图片画廊的父容器选择器名称。
baguetteBox.run('.gallery');
配置参数
你可以在初始化时,在第二个参数中以对象的方式传入配置参数:
baguetteBox.run('.gallery', { // 配置参数 });
参数 | 类型 | 默认值 | 描述 |
captions | Boolean | function(element) | true | 是否显示图片标题。如果传入的是一个函数,必须返回一个字符串。 |
buttons | Boolean | 'auto' | 'auto' | 是否显示导航按钮。设置为auto表示在移动设备或仅有一张图片时隐藏导航按钮。 |
fullScreen | Boolean | false | 是否允许全屏模式。 |
noScrollbars | Boolean | false | 是否在画廊显示时隐藏滚动条。 |
titleTag | Boolean | false | 是否使用图片上的title属性作为图片标题。 |
async | Boolean | false | 是否异步加载文件。 |
preload | Number | 2 | 预加载多少个文件。 |
animation | 'slideIn' | 'fadeIn' | false | 'slideIn' | 过渡动画的类型。 |
afterShow | function | null | 显示遮罩层之后的回调函数。 |
afterHide | function | null | 隐藏遮罩层之后的回调函数。 |
onChange | function(currentIndex, imagesCount) | null | 图片改变时的回调函数。 |
overlayBackgroundColor | String | 'rgba(0,0,0,0.8)' | lightbox遮罩层的背景颜色。 |
filter | RegExp | `/.+.(gif | jpe?g |
方法API
baguetteBox.js插件有4个可用的方法:
-
run
:初始化baguetteBox.js插件。 -
showNext
:切换到下一张图片。 -
showPrevious
:切换到前一张图片。 -
destroy
:销毁插件和绑定的事件。
响应式图片
要使用响应式图片特性,只需要在a
标签上设置data-at-{width}
属性。其中{width}
指的是最大屏幕宽度。例如:
<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"
这张图片。href
属性中指定的图片是为了兼容旧的浏览器二设置的一张通用图片。
baguetteBox.js响应式lightbox插件的github地址为:https://github.com/feimosi/baguetteBox.js
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!