baguetteBox.js – 纯JS lightbox库

分类：代码日期：2014-08-06

baguetteBox.js - 纯JS lightbox库

简介

baguetteBox.js 是一个简单简单、易用的 JavaScript lightbox库，它具有以下特点：

纯 JavaScript 实现，无需依赖其他库
支持触摸屏设备手势操作
支持显示标题（说明）
支持响应式图像
支持CSS3过渡
使用 SVG 按钮，没有多余的文件下载
启用 gzip 压缩后仅 2KB

兼容

浏览器兼容


IE8+ ✔	Chrome ✔	Firefox ✔	Opera ✔	Safari ✔

使用方法

1、引入文件

<script src="js/jquery.min.js"></script>
<script src="js/baguetteBox.min.js"></script>

2、HTML

<div class="baguetteBox">
    <a href="img/1-1.jpg" data-caption="Golden Gate Bridge"><img src="img/thumbs/1-1.jpg"></a>
    <a href="img/1-2.jpg" title="Midnight City"><img src="img/thumbs/1-2.jpg"></a>
    <a href="img/1-3.jpg"><img src="img/thumbs/1-3.jpg"></a>
    <a href="img/1-4.jpg"><img src="img/thumbs/1-4.jpg"></a>
    <a href="img/1-5.jpg"><img src="img/thumbs/1-5.jpg"></a>
    <a href="img/1-6.jpg"><img src="img/thumbs/1-6.jpg"></a>
    <a href="img/1-7.jpg"><img src="img/thumbs/1-7.jpg"></a>
    <a href="img/1-8.jpg"><img src="img/thumbs/1-8.jpg"></a>
</div>

data-caption 和 titile 属性用于显示标题（或说明）。

如果需要响应式图片，可以分别加入 data-at 属性，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>

3、JavaScript

$(function(){
    baguetteBox.run('.baguetteBox', {
        //options
    });
});

配置

属性/方法	类型	默认值	说明
captions	布尔值	true	显示图片说明
buttons	字符串/布尔值	auto	显示按钮，可选 ‘auto’ / true / false
async	布尔值	false	异步加载文件
preload	整数	2	需要预加载图片的个数
animation	字符串	slideIn	动画方式，可选 slideIn / fadeIn