baguetteBox.js响应式画廊插件(纯JS)
baguetteBox.js
baguetteBox.js 是一个简单和易于使用lightbox纯JavaScript脚本，拥有图像放大缩小并带有相应的CSS3过度，并能在触摸屏等设备上完美展示。
特点
- 纯JS编写，无任何依赖
- 支持多重画廊(Multiple-gallery)效果, 且允许自定义参数
- 支持手势滑动(仅在支持多点触控设备上)
- 现代简约风格
- 图像字幕支持
- 响应式的图像
- CSS3转换
- SVG按钮,没有额外的文件下载
- 压缩后大约2.3KB
安装方法
使用npm安装
npm install baguettebox.js
使用Bower
bower install baguettebox.js
通用安装方法安装
下载baguetteBox.min.css和baguetteBox.min.js文件并添加到你的页面:
<link rel="stylesheet" href="css/baguetteBox.min.css">
<script src="js/baguetteBox.min.js" async></script>
注意：如果使用了async属性，将只能运行在服务器环境，而不是当做网页直接打开，类似file:///D:/demo/demo.html.
用法
初始化脚本运行:
baguetteBox.run('.gallery', {
// Custom options
});
其中第一个参数是一个选择器包含一个标签。HTML代码可能看起来像这样：
<div class="gallery">
<a href="img/2-1.jpg" data-caption="Image caption"><img src="img/thumbs/2-1.jpg"></a>
<a href="img/2-2.jpg"><img src="img/thumbs/2-2.jpg"></a>
...
</div>
用title 或者 data-caption 标签来描述图片。
当一个div标签里有多组a链接组成的图片时，单击其中一张图片会发现自动有左右翻页效果。
demo
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>demo</title>
<link rel="stylesheet" href="css/baguetteBox.css">
<script src="js/baguetteBox.js"></script>
</head>
<body>
<div class="gallery">
<a href="img/image-1.jpg" data-caption="图片描述"><img src="img/thumb-1.jpg"></a>
<a href="img/image-1.jpg" data-caption="图片描述"><img src="img/thumb-1.jpg"></a>
</div>
</body>
<script>
baguetteBox.run('.gallery', {
// Custom options
});
</script>
附加方法
showNext- 切换到下一张图片showPrevious- 切换到上一张图片destroy- remove the plugin with any event bindings
The first two methods return true on success or false if there's no more images to be loaded.
响应式图片
如果需要响应式图片，可以分别在a标签加入data-at-{width}属性，{width}是图片可显示的最大宽度，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>
如果屏幕分辨率是1366x768，baguetteBox.js将会选择"img/medium/2-1.jpg". 如果是1440x900则会选择 "img/big/2-1.jpg". Keep href attribute as a fallback (link to a bigger image e.g. of HD size) for older browsers.
自定义配置
你可以在第二个参数位置传入一个对象来进行一些自定义设置. 下面是可用的缺省设置:
baguetteBox.run('.gallery', {
captions: true, // true|false|callback(element) - 显示图片说明
buttons: 'auto', // 'auto'|true|false - 显示翻页按钮
async: false, // true|false - 异步加载
preload: 2, // [number] - 需要预加载图片的个数
animation: 'slideIn', // 'slideIn'|'fadeIn'|false - 动画
afterShow: null, // callback - To be run after showing the overlay
afterHide: null, // callback - To be run after hiding the overlay
onChange: null, // callback(currentIndex, imagesElements.length) - When image changes
filter: /.+\.(gif|jpe?g|png|webp)/i // RegExp object - 正则去匹配文件
});
captions: 'callback'applies a caption returned by the callback. Invoked in the context of an array of gallery images.buttons: 'auto'在触摸设备或者只有一个图片时buttons会自动隐藏，即false.
兼容性
- IE 8+
- Chrome
- Firefox 3.6+
- Opera 12+
- Safari 5+
- Sleipnir
申明
baguetteBox.js的灵感来自一个jQuery插件:touchTouch.
许可
Copyright (c) 2015 feimosi
This content is released under the MIT License.
baguetteBox.js响应式画廊插件(纯JS)的更多相关文章
- Chocolat.js – 响应式的 jQuery Lightbox 插件
Chocolat.js 使您能够显示一个或多个图像在同一页面上.给用户展示一组图片缩略图,可以显示全页或块.Chocolat.js 可以很好地处理所有主要的浏览器.它在下面这些浏览器测试通过:IE7+ ...
- ImageLightbox.js – 响应式的图片 Lightbox 插件
ImageLightbox.js 是一款很简洁的用于显示图片灯箱效果(Lightbox)的插件,没有字幕,导航按钮或默认背景.如果默认功能不够用的话,你可以很容易地自定义 JavaScript 函数扩 ...
- jQuery响应式幻灯片插件jquery.glide.js（支持触摸&轻量级）
找到一款好的幻灯片插件不容易,找到一款功能全并且使用很简单的幻灯片更不容易,今天为大家分享一款全能的幻灯片插件glide.js,也是我现在在使用的一款插件. jquery.glide.js是响应和触摸 ...
- Dense.js - 响应式的视网膜（Rtina）图像支持
Dense 是一款 jQuery 插件,它提供一个简单的方法为设备提供精密像素比的图像,为你的网站带来视网膜支持,清除模糊,图像更清晰.通过简单地包括 jQuery 插件的页面上,就能实现响应式的视网 ...
- vue.js响应式原理解析与实现
vue.js响应式原理解析与实现 从很久之前就已经接触过了angularjs了,当时就已经了解到,angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很 ...
- dataTables.js 响应式/package-lock.json 作用/eclipse 目录和工作区建立连接/navcat 导出数据库/vscode 快速进入方法
下班时间到啦! --下班都是他们的,而我,什么都没有. 什么周五放松日,什么五四青年节,什么都么有.继续总结一下今天遇到的问题. dataTables.js 响应式 使用dataTables.js创建 ...
- 深入解析vue.js响应式原理与实现
vue.js响应式原理解析与实现.angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很好奇vue.js是如何监测数据更新并且重新渲染页面.vue.js ...
- Owl Carousel – 支持触摸的 jQuery 响应式传送带插件
Owl Carousel 是一个 jQuery 插件,使我们能够迅速地创建响应式传送带滑块.这个插件是触摸友好的,能与几乎任何的 HTML 内容兼容使用.另外,强大的选项设置支持分页/滑动速度,启用/ ...
- 理解rem实现响应式布局原理及js动态计算rem
前言 移动端布局中,童鞋们会使用到rem作为css单位进行不同手机屏幕大小上的适配.那么来讲讲rem在其中起的作用和如何动态设置rem的值. 1.什么是rem rem是相对于根元素(html标签)的字 ...
随机推荐
- console.log的应用
这两天在学javascript,但是有个问题老是觉得很疑惑,那就是这两个表达式到底有啥区别,虽然结果输出都差不多,但是我想这个两个表达式被开发出来,肯定是有意义的吧!哪位高手解答下吧!Thanks i ...
- Ubuntu12.04-x64编译Hadoop2.2.0和安装Hadoop2.2.0集群
本文Blog地址:http://www.cnblogs.com/fesh/p/3766656.html 本文对Hadoop-2.2.0源码进行重新编译(64位操作系统下不重新编译会有版本问题) ...
- Spring----->projects----->概述
概述: Spring旗下有若干子项目,整个spring工程中其实包含了若干个子项目,这些子项目种类丰富,分别适用于不同的应用领域.开发者可以根据自己的project的功能特色选取spring中某些特定 ...
- 在ASP.NET中上传附件
前台页面使用ASP控件:<asp:FileUpload ID="FileUpload" runat="server" Style="margin ...
- oracle 创建数据表空间和用户
--创建临时表空间(不必须)create temporary tablespace zwtest tempfile 'D:\Java\oracle\oradata\zwtest.dbf' size 5 ...
- UILabel的常用属性
UILabel常用属性1——实例化和设置文字 // 实例化UILabel并指定其边框 UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake ...
- 持续获取可访问谷歌的hosts（已证实可用）
@echo off REM 欢迎圈我,在顶栏的"查找人员"处输入Felix Hsu即可 REM Patched by logicmd REM 准备工作,先清一下DNS缓存,再备份h ...
- hdu 5818 (优先队列) Joint Stacks
题目:这里 题意: 两个类似于栈的列表,栈a和栈b,n个操作,push a x表示把数x放进a栈的栈底,pop b 表示将栈b的栈顶元素取出输出,并释放这个栈顶元素,merge a b表示把后面的那个 ...
- 【html/css】html/css命名规范
无论做什么,规则总是最重要的.无规矩不成方圆,有了规矩,我们才能有规可循,有则可依,人与人之间才能正常的交流交往. 人人都有自己的命名习惯,不过,代码是需要交流的,当有些命名习惯仅只自己能看懂,甚至自 ...
- FreeBSD_11-系统管理——{Part_2-核心}
一.Managing Services in FreeBSD Service restart will only work if it is set to YES in /etc/rc.conf. T ...