纯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 相关文章推荐
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
Nov 30 Javascript
js 无提示关闭浏览器页面的代码
Mar 09 Javascript
js中cookie的添加、取值、删除示例代码
Oct 21 Javascript
seaJs的模块定义和模块加载浅析
Jun 06 Javascript
一个简单的动态加载js和css的jquery代码
Sep 01 Javascript
简单对比分析JavaScript中的apply,call与this的使用
Dec 04 Javascript
js实现图片左右滚动效果
Feb 27 Javascript
Kotlin学习第一步 kotlin语法特性
May 25 Javascript
Angular 4依赖注入学习教程之ValueProvider的使用(七)
Jun 04 Javascript
微信小程序 sha1 实现密码加密实例详解
Jul 06 Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
Jul 24 Javascript
express异步函数异常捕获示例详解
Nov 30 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 array_multisort() 函数的深入解析
2013/06/20 PHP
php防止sql注入示例分析和几种常见攻击正则表达式
2014/01/12 PHP
php传值方式和ajax的验证功能
2017/03/27 PHP
PHP实现防止表单重复提交功能【基于token验证】
2018/05/24 PHP
String.prototype实现的一些javascript函数介绍
2013/11/22 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
2014/06/30 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
2015/03/16 Javascript
javascript实现的图片切割多块效果实例
2015/05/07 Javascript
老生常谈JavaScript中的this关键字
2016/10/01 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
2017/03/21 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
2017/08/28 jQuery
JS声明对象时属性名加引号与不加引号的问题及解决方法
2018/02/16 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
2018/05/18 Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
2018/05/22 Javascript
vue使用vuex实现首页导航切换不同路由的方法
2019/05/08 Javascript
vuejs移动端实现div拖拽移动
2019/07/25 Javascript
微信小程序全局变量的设置、使用、修改过程解析
2019/09/24 Javascript
JavaScript实现多层颜色选项卡嵌套
2020/09/21 Javascript
Python实现Windows上气泡提醒效果的方法
2015/06/03 Python
深入理解python多进程编程
2016/06/12 Python
python实现八大排序算法(1)
2017/09/14 Python
Python 3实战爬虫之爬取京东图书的图片详解
2017/10/09 Python
用Python实现最速下降法求极值的方法
2019/07/10 Python
使用virtualenv创建Python环境及PyQT5环境配置的方法
2019/09/10 Python
Python类反射机制使用实例解析
2019/12/30 Python
python爬虫爬取淘宝商品比价(附淘宝反爬虫机制解决小办法)
2020/12/03 Python
HTML5 progress和meter控件_动力节点Java学院整理
2017/07/06 HTML / CSS
欧克利英国官网:Oakley英国
2019/08/24 全球购物
数控专业个人求职信范文
2014/02/05 职场文书
物理力学求职信
2014/02/18 职场文书
鸿星尔克广告词
2014/03/21 职场文书
创先争优演讲稿
2014/09/15 职场文书
公务员检讨书
2014/11/01 职场文书
2015学生会文艺部工作总结
2015/04/03 职场文书
全国劳模先进事迹材料(2016精选版)
2016/02/25 职场文书
MySQL 重写查询语句的三种策略
2021/05/10 MySQL