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

2024-09-28 19:25:12

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

效果演示下载源码

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

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.

许可

This content is released under the MIT License.

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

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

baguetteBox.js 是一个简单和易于使用的响应式的图像 Lightbox 插件,支持滑动手势在移动设备上使用.纯 JavaScript 实现,不依赖第三方库和插件,赶紧来体验吧. 效果演示下载源码好了,看下本文重点内容. baguetteBox.js baguetteBox.js 是一个简单和易于使用lightbox纯JavaScript脚本,拥有图像放大缩小并带有相应的CSS3过度,并能在触摸屏等设备上完美展示. Demo页面 github 中文使用特点纯JS编写,无任
使用Vue.js和MJML创建响应式电子邮件

MJML是一种现代的电子邮件工具,使开发人员可以在所有设备和邮件客户端上创建美观.响应迅速的出色电子邮件.这种标记语言是为了减少编写响应式电子邮件的痛苦而设计的. 它的语义语法使其易于使用.它还具有功能丰富的标准组件,可缩短开发时间.在本教程中,我们将使用MJML构建漂亮的响应式邮件,并在多个邮件客户端上进行测试. 开始MJML 你可以使用npm安装MJML,以将其与Node.js或CLI结合使用: $ npm install -g mjml 构建我们的电子邮件首先,请创建一个名为 email
JS实现列表的响应式排版(推荐)

先给大家展示下效果图,如果感觉还不错,请参考实现代码. 一.每行固定个数:保证排版的美观 .list li{ width:20%;display:inline-block; *display:inline;*zoom:1;overflow:hidden; } 二.随页面宽度调整个数和大小:保证图文的可读性 .list li{ width:20%;display:inline-block; *display:inline;*zoom:1;overflow:hidden; } 1.媒体查询控制宽度
Bootstrap开发实战之响应式轮播图

本文主要内容是在导航条的下方做一张轮播图,自动播放最新的重要动态,供大家参考,具体内容如下一.响应式轮播图 //响应式轮播图 <div id="myCarousel" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0"
超棒的响应式布局jQuery插件Freetile.js

在线演示我们曾经介绍过俩款知名的响应式布局插:isotope和masonary,今天我们这里再介绍一款相当不错的响应式布局插件 –Freetile.js,使用它同样可以生成超酷的动态布局效果.相信大家一定会喜欢! 主要特性 Freetie来自于Assemblage和Assemblage Plus的内建布局引擎,设计灵感来自于Masonry,VGrid和Wookmark,但是和他们相比较,拥有以下独特的地方: 允许包含任何尺寸的元素,并且不要求一个固定的列宽度,因此你不需要指定列宽度来迎合你的元
一文详解Vue3响应式原理

目录回顾 vue2.x 的响应式 vue3的响应式 Reflect 回顾 vue2.x 的响应式实现原理: 对象类型:通过object.defineProperty()对属性的读取.修改进行拦截(数据劫持) 数组类型:通过重写更新数组的一系列方法来实现拦截(对数组的变更方法进行了包裹) Object.defineProperty(data,'count ",{ get(){}, set(){} }) 存在问题: 新增属性.删除属性,界面不会更新直接通过下标修改数组,界面不会自动更新但是
详解vue3 响应式的实现原理

目录核心设计思想 Vue.js 2.x 响应式 Vue.js 3.x 响应式依赖收集:get 函数派发通知:set 函数总结源码参考核心设计思想除了组件化,Vue.js 另一个核心设计思想就是响应式.它的本质是当数据变化后会自动执行某个函数,映射到组件的实现就是,当数据变化后,会自动触发组件的重新渲染.响应式是 Vue.js 组件化更新渲染的一个核心机制. Vue.js 2.x 响应式我们先来回顾一下 Vue.js 2.x 响应式实现的部分: 它在内部通过 Object.defi
flutter中的布局和响应式app方法示例

目录 flutter中的布局 (使用)放置一个组件 app 本身就是个组件 Material apps 和 Non-Material apps 自适应和响应式 flutter实现响应式的方法小结 flutter中的布局 flutter布局机制的核心是组件.在flutter中,几乎所有的东西都是组件,布局模型也不例外.图片,Icon, 文本等等,我们在flutter客户端中看到的所有内容都是组件.我们看不到的东西,比如:rows,columns,等等等等也都是组件. 我们将简单的组件组合在一起,
使用Chart.js图表库制作漂亮的响应式表单

入门基础 Chart.js是一个基于HTML5的开源图表库,可以方便简洁的绘制美观的图表. 主要特性包括: 1.支持6种不同的表格类型:曲线图.柱状图.饼状图.雷达图.极坐标区域图.环图. 2.基于HTML5开发,支持所有浏览器(包括IE7/8). 3.不依赖于其他任何库,仅有4.5k大小,并且可以进行定制. Chart.js 是一个基于 HTML5 canvas 的响应式.灵活的.轻量化的图表库.库中提供了六种不同的图表类型,每种类型都带有一系列的自定义选项.如果这些还不够,你还可以创造自己的
强大的JavaScript响应式图表Chartist.js的使用

Chartist.js是一个非常简单而且实用的JavaScript前端图表生成器,它支持SVG格式,图表数据转换十分灵活,同时也支持多种图表展现形式,不失为一款前端开发者的开发利器. Chartist.js的特点配置十分简单,可以很方便地转换各种图表数据格式. CSS和JavaScript分离,因此代码比较简洁,使用就相对方便. 使用SVG格式,因此Chartist.js可以很灵活的在Web页面上应用. 响应式图表,支持不同的浏览器尺寸和分辨率. 支持自定义 SASS 架构. Chartist

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

相关推荐

随机推荐