纯JS开发baguetteBox.js响应式画廊插件


Posted in Javascript onJune 28, 2020

baguetteBox.js 是一个简单和易于使用的响应式的图像 Lightbox 插件,支持滑动手势在移动设备上使用。纯 JavaScript 实现,不依赖第三方库和插件,赶紧来体验吧。

纯JS开发baguetteBox.js响应式画廊插件

效果演示    下载源码

好了,看下本文重点内容。

baguetteBox.js

baguetteBox.js 是一个简单和易于使用lightbox纯JavaScript脚本,拥有图像放大缩小并带有相应的CSS3过度,并能在触摸屏等设备上完美展示。

Demo页面

github
中文使用

特点

  • 纯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" rel="external nofollow" >
<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" rel="external nofollow" rel="external nofollow" data-caption="Image caption"><img src="img/thumbs/2-1.jpg"></a>
	<a href="img/2-2.jpg" rel="external nofollow" ><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" rel="external nofollow" >
	<script src="js/baguetteBox.js"></script>
</head>

<body>
 <div class="gallery">
 <a href="img/image-1.jpg" rel="external nofollow" rel="external nofollow" data-caption="图片描述"><img src="img/thumb-1.jpg"></a>
 <a href="img/image-1.jpg" rel="external nofollow" rel="external nofollow" 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" rel="external nofollow" rel="external nofollow" 
 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.

到此这篇关于纯JS开发baguetteBox.js响应式画廊插件的文章就介绍到这了,更多相关baguetteBox.js响应式插件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
用jscript实现新建和保存一个word文档
Jun 15 Javascript
jQuery学习笔记之jQuery选择器的使用
Dec 22 Javascript
jquery offset函数应用实例
Nov 14 Javascript
script的async属性以非阻塞的模式加载脚本
Jan 15 Javascript
点击标签切换和自动切换DIV选项卡
Aug 10 Javascript
js实现拖拽效果
Feb 12 Javascript
基于jQuery实现收缩展开功能
Mar 18 Javascript
浅谈JQ中mouseover和mouseenter的区别
Sep 13 Javascript
jQuery ajax实现省市县三级联动
Mar 07 Javascript
JavaScript实现分页效果
Mar 28 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
Sep 18 Javascript
小程序实现长按保存图片的方法
Dec 31 Javascript
JavaScript图片旋转效果实现方法详解
Jun 28 #Javascript
javascript+css实现俄罗斯方块小游戏
Jun 28 #Javascript
详解小程序横屏方案对比
Jun 28 #Javascript
微信小程序实现上传多张图片、删除图片
Jul 29 #Javascript
js模拟实现百度搜索
Jun 28 #Javascript
微信小程序地图实现展示线路
Jul 29 #Javascript
vuex实现购物车的增加减少移除
Jun 28 #Javascript
You might like
php实现将任意进制数转换成10进制的方法
2015/04/17 PHP
php实现微信扫码自动登陆与注册功能
2016/09/22 PHP
thinkphp实现分页显示功能
2016/12/03 PHP
php异步:在php中使用fsockopen curl实现类似异步处理的功能方法
2016/12/10 PHP
表格 隔行换色升级版
2009/11/07 Javascript
JavaScript 判断日期格式是否正确的实现代码
2011/07/04 Javascript
JS原型对象通俗&quot;唱法&quot;
2012/12/27 Javascript
js取整数、取余数的方法
2014/05/11 Javascript
使用javascript实现简单的选项卡切换
2015/01/09 Javascript
基于JavaScript实现div层跟随滚动条滑动
2016/01/12 Javascript
js基于cookie记录来宾姓名的方法
2016/07/19 Javascript
JavaScript 用fetch 实现异步下载文件功能
2017/07/21 Javascript
微信小程序getPhoneNumber获取用户手机号
2017/09/29 Javascript
关于Webpack dev server热加载失败的解决方法
2018/02/22 Javascript
解决vue的变量在settimeout内部效果失效的问题
2018/08/30 Javascript
微信小程序日历效果
2018/12/29 Javascript
axios实现简单文件上传功能
2019/09/25 Javascript
详解Nuxt内导航栏的两种实现方式
2020/04/16 Javascript
webpack+vue.js构建前端工程化的详细教程
2020/05/10 Javascript
python实现挑选出来100以内的质数
2015/03/24 Python
获取python的list中含有重复值的index方法
2018/06/27 Python
python样条插值的实现代码
2018/12/17 Python
python re模块常见用法例举
2021/03/01 Python
HTML5跳转小程序wx-open-launch-weapp的示例代码
2020/07/16 HTML / CSS
办公室文秘自我评价
2013/09/21 职场文书
社区端午节活动方案
2014/01/28 职场文书
大学生家政服务项目创业计划书
2014/01/30 职场文书
七夕相亲活动策划方案
2014/08/31 职场文书
南京市纪委监察局整改方案
2014/09/16 职场文书
80后婚前协议书范本
2014/10/24 职场文书
2014年副班长工作总结
2014/12/10 职场文书
费城故事观后感
2015/06/10 职场文书
欠条格式范本
2015/07/03 职场文书
《狮子和鹿》教学反思
2016/02/16 职场文书
MySQL 分页查询的优化技巧
2021/05/12 MySQL
php实现自动生成验证码的实例讲解
2021/11/17 PHP