点击相册图片全屏预览 幻灯片切换 支持触屏 图片插件baguettebox.js

 Array   高蒙   阅读(1349)   评论(0)   2016-12-13 15:39:18    幻灯片 触屏 图片插件 baguettebox.js jQuery插件 


简介

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

  • 纯 JavaScript 实现,无需依赖其他库

  • 支持触摸屏设备手势操作

  • 支持显示标题(说明)

  • 支持响应式图像

  • 支持CSS3过渡

  • 使用 SVG 按钮,没有多余的文件下载

  • 启用 gzip 压缩后仅 2KB

兼容

浏览器兼容

IEChromeFirefoxOperaSafari
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



相关文章



我要评论


站长昵称:(*)

输入内容:


评论列表


高蒙

男,程序猿一枚

 

人生要是没有理想, 那跟一条咸鱼有什么分别。


关于我

  http://www.shuchengxian.com

高蒙个人博客是以PHP技术为主的程序员个人博客。博客主要发布php开发中遇到的问题以及解决办法,同时个人博客也分享网站模板素材,jquery插件等方面素材。


站点声明:相关侵权、举报、投诉及建议等,请发E-mail:936594075#qq.com(#替换成@)。

Copyright © 2018, www.shuchengxian.com, All rights reserved. 个人博客皖公网安备 34152302000022号 皖ICP备15015490号

关键词:个人博客,PHP博客,PHP博客程序,高蒙博客,高蒙个人博客,php程序员博客,程序员个人博客