[代码样式]baguetteBox.js – 纯JS lightbox库

简介

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

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

兼容

浏览器兼容

IE8+ ✔	Chrome ✔	Firefox ✔	Opera ✔	Safari ✔

使用方法

1、引入文件

<script src="https://www.dowebok.com/js/jquery.min.js"></script>
<script src="https://www.dowebok.com/js/baguetteBox.min.js"></script>

2、HTML

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

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

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

<a href="https://www.dowebok.com/img/2-1.jpg" rel="external nofollow" 
    data-at-450="https://www.dowebok.com/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="https://www.dowebok.com/img/thumbs/2-1.jpg">
</a>

3、JavaScript

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

配置

Github 地址：https://github.com/feimosi/baguetteBox.js

百度网盘" name="baguetteBox.js – 纯JS lightbox库" pass="" code=""]