纯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 相关文章推荐
js 页面传参数时 参数值含特殊字符的问题
Dec 13 Javascript
jquery 弹出登录窗口实现代码
Dec 24 Javascript
js escape,unescape解决中文乱码问题的方法
May 26 Javascript
Jquery实现的角色左右选择特效
May 21 Javascript
Node.js中使用mongoskin操作mongoDB实例
Sep 28 Javascript
JQuery入门基础小实例(1)
Sep 17 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
Jan 26 Javascript
微信小程序“摇一摇”的实例代码
Jul 20 Javascript
vue在使用ECharts时的异步更新和数据加载详解
Nov 22 Javascript
JavaScript实现微信号随机切换代码
Mar 09 Javascript
微信小程序实现Swiper轮播图效果
Nov 22 Javascript
JS浏览器BOM常见操作实例详解
Apr 27 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+Memcache实现wordpress访问总数统计(非插件)
2014/07/04 PHP
showModelessDialog()使用详解
2006/09/21 Javascript
JavaScript高级程序设计 读书笔记之八 Function类及闭包
2012/02/27 Javascript
js 控制下拉菜单刷新的方法
2013/03/03 Javascript
js捕获鼠标滚轮事件代码
2013/12/16 Javascript
网站接入QQ登录的两种方法
2014/07/22 Javascript
js返回前一页刷新本页重载页面
2014/07/29 Javascript
jQuery中ajax的get()方法用法实例
2014/12/26 Javascript
jQuery UI插件自定义confirm确认框的方法
2015/03/20 Javascript
EasyUI学习之Combobox级联下拉列表(2)
2016/12/29 Javascript
利用Js+Css实现折纸动态导航效果实例源码
2017/01/25 Javascript
AngularJS前端页面操作之用户修改密码功能示例
2017/03/27 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
2018/02/01 Javascript
React中使用外部样式的3种方式(小结)
2019/05/28 Javascript
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
2019/07/20 Javascript
Vue实现手机扫描二维码预览页面效果
2020/05/28 Javascript
[49:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 KG VS TNC
2018/03/31 DOTA
pandas 使用均值填充缺失值列的小技巧分享
2019/07/04 Python
python 根据字典的键值进行排序的方法
2019/07/24 Python
python filecmp.dircmp实现递归比对两个目录的方法
2020/05/22 Python
Python+PyQt5实现灭霸响指功能
2020/05/25 Python
python rsa-oaep加密的示例代码
2020/09/23 Python
python工具——Mimesis的简单使用教程
2021/01/16 Python
Hotels.com印度:酒店预订
2019/05/11 全球购物
法国体育用品商店:GO Sport
2019/10/23 全球购物
Java TransactionAPI (JTA) 主要包含几部分
2012/12/07 面试题
开放系统互连参考模型
2016/06/29 面试题
团工委书记自荐书范文
2013/12/17 职场文书
大学生工作自荐书
2014/06/16 职场文书
创先争优活动承诺书
2014/08/30 职场文书
思想作风纪律整顿心得体会
2014/09/04 职场文书
政风行风评议工作总结
2014/10/21 职场文书
民用住房租房协议书
2014/10/29 职场文书
党员反邪教心得体会
2016/01/15 职场文书
农村房屋租赁合同(范本)
2019/07/23 职场文书
七年级作文之秋游
2019/10/21 职场文书