dowebok

baguetteBox.js – 纯JS lightbox库

分类:代码 日期: 点击(20,169) 下载(0)

baguetteBox.js - 纯JS lightbox库

演 示 下 载

简介

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

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

兼容

浏览器兼容

IE Chrome Firefox Opera Safari
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

演 示 下 载

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

演 示 下 载

标签:

相关文章

下载:baguetteBox.js – 纯JS lightbox库
城通网盘 百度网盘 直连下载

百度网盘密码: