纯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 相关文章推荐
Javascript &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
Jun 02 Javascript
jQuery.extend 函数详解
Feb 03 Javascript
解析John Resig Simple JavaScript Inheritance代码
Dec 03 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
Nov 18 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
Sep 09 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
Oct 17 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
Nov 30 Javascript
Js 获取当前函数参数对象的实现代码
Jun 20 Javascript
80%应聘者都不及格的JS面试题
Mar 21 Javascript
SpringMVC+bootstrap table实例详解
Jun 02 Javascript
JavaScript中的一些实用小技巧总结
Apr 07 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
May 29 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
PHILIPS D1835/D1875的电路分析与打理
2021/03/02 无线电
随机头像PHP版
2006/10/09 PHP
php Undefined index和Undefined variable的解决方法
2008/03/27 PHP
基于PHP Socket配置以及实例的详细介绍
2013/06/13 PHP
php 获取本地IP代码
2013/06/23 PHP
javascript 一个函数对同一元素的多个事件响应
2009/07/25 Javascript
javascript之AJAX框架使用说明
2010/04/24 Javascript
jquery多选项卡效果实例代码(附效果图)
2013/03/23 Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
2013/05/23 Javascript
js网页实时倒计时精确到秒级
2014/02/10 Javascript
点击标签切换和自动切换DIV选项卡
2014/08/10 Javascript
jquery ajax分页插件的简单实现
2016/01/27 Javascript
基于JavaScript实现 网页切出 网站title变化代码
2016/04/03 Javascript
浅谈js中子页面父页面方法 变量相互调用
2016/08/04 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
2017/04/18 Javascript
jQuery实现的电子时钟效果完整示例
2018/04/28 jQuery
基于vue2.0的活动倒计时组件countdown(附源码下载)
2018/10/09 Javascript
react 应用多入口配置及实践总结
2018/10/17 Javascript
详解50行代码,Node爬虫练手项目
2019/04/22 Javascript
微信小程序后端实现授权登录
2020/02/24 Javascript
JavaScript实现网页跨年倒计时
2020/12/02 Javascript
[47:42]完美世界DOTA2联赛PWL S2 GXR vs Ink 第一场 11.19
2020/11/20 DOTA
python修改操作系统时间的方法
2015/05/18 Python
python实现12306火车票查询器
2017/04/20 Python
详解python websocket获取实时数据的几种常见链接方式
2019/07/01 Python
html5记忆翻牌游戏实现思路及代码
2013/07/25 HTML / CSS
Erwin Müller穆勒家居瑞士官网:您整个家庭的邮购公司
2019/12/28 全球购物
奥地利婴儿用品和玩具购物网站:baby-markt.at
2020/01/26 全球购物
Java的五个基础面试题
2016/02/26 面试题
Python的两道面试题
2013/06/29 面试题
数控专业个人求职信范文
2014/02/05 职场文书
幼儿园秋游感想
2014/03/12 职场文书
如何写早恋检讨书
2014/09/10 职场文书
2014银行领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
幼儿园教师师德承诺书
2015/04/28 职场文书
元素水平垂直居中的方式
2021/03/31 HTML / CSS