您的位置：首页 > 编程技术 > js  >  纯JS开发baguetteBox.js响应式画廊插件

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

 更新时间：2020年6月29日 08:24  点击：2216

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

效果演示    下载源码

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

[!--infotagslink--]

相关文章

  • jQuery Mobile开发中日期插件Mobiscroll使用说明

    这篇文章主要介绍了jQuery Mobile开发中日期插件Mobiscroll使用说明,需要的朋友可以参考下...2016-03-03

  • Jquery日历插件制作简单日历

    在页面开发中，经常遇到需要用户输入日期的操作。通常的做法是，提供一个文本框（text）,让用户输入，然后，编写代码验证输入的数据，检测其是否是日期类型。这样比较麻烦，同时，用户输入日期的操作也不是很方便，影响用户体验。如果使...2015-10-30

  • vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件

    这篇文章主要介绍了vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下...2021-02-20

  • 使用JQuery实现的分页插件分享

    一个简单的jQuery分页插件，兼容AMD规范和requireJS./** * jQuery分页插件 * */;(function (factory) { if (typeof define === "function" && define.amd) { // AMD模式 define([ "jquery" ], factory); } els...2015-11-08

  • Bootstrap教程JS插件滚动监听学习笔记分享

    这篇文章主要为大家分享了Bootstrap教程JS插件滚动监听学习笔记，内容很详细，感兴趣的小伙伴们可以参考一下...2016-05-20

  • Jquery插件实现点击获取验证码后60秒内禁止重新获取

    通过jquery.cookie.js插件可以快速实现“点击获取验证码后60秒内禁止重新获取（防刷新）”的功能效果图：先到官网（http://plugins.jquery.com/cookie/）下载cookie插件，放到相应文件夹，代码如下：复制代码 代码如下: <!DOCTYPE ht...2015-03-15

  • jquery自定义插件开发之window的实现过程

    这篇文章主要介绍了jquery自定义插件开发之window的实现过程的相关资料,需要的朋友可以参考下...2016-05-09

  • 解决vue中使用swiper 插件出错的问题

    这篇文章主要介绍了vue中使用swiper 插件出错问题及解决办法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-08-22

  • 50 个 jQuery 插件可将你的网站带到另外一个高度

    Query架构的开发人员能够创建一个插件代码来扩展其功能，从而能够产生一些最好的插件，让你的网站或任何给定的项目达到一个全新的水平。 ...2016-04-27

  • jquery表单插件form使用方法详解

    这篇文章主要为大家详细介绍了jquery插表单件form使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-01-23

  • 解决jquery插件：TypeError:$.browser is undefined报错的方法

    首先先说一说$.browser browser就是用来获取浏览器基本信息的。 jQuery 从 1.9 版开始，移除了 $.browser 和 $.browser.version ， 取而代之的是 $.support 。 在更新的 2.0 版本中，将不再支持 IE 6/7/8。 以后，如果用户需...2015-11-24

  • 浏览器复制插件zeroclipboard使用指南

    ZeroClipboard 是国外大神开发的一个用于剪贴板复制的 JS 插件，它是基于 Flash 来实现跨浏览器的复制功能的。当我们使用 ZeroClipboard 的时候，它会悄悄隐藏一个小小的 Flash 影片(swf)，不会对我们的用户界面造成影响。我们只需要借助它实现复制功能就行了。...2016-03-30

  • IntelliJ IDEA 刷题利器 LeetCode 插件详解

    这篇文章主要介绍了IntelliJ IDEA 刷题利器 LeetCode 插件,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-08-21

  • 原生JS封装Ajax插件(同域、jsonp跨域)

    这篇文章主要为大家详细介绍了原生JS封装Ajax插件，为大家介绍不同域之间互相请求资源的跨域...2016-05-05

  • JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)

    这篇文章主要介绍了JS基于ocanvas插件实现的简单画板效果,结合实例形式分析了ocanvas插件实现画板的相关技巧,并附代码demo源码供读者下载参考,需要的朋友可以参考下...2016-04-06

  • vue中jsonp插件的使用方法示例

    这篇文章主要给大家介绍了关于vue中jsonp插件的使用方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-09-10

  • jquery插件autocomplete用法示例

    这篇文章主要介绍了jquery插件autocomplete用法,结合实例形式分析了jQuery插件autocomplete与后台交互实现搜索的自动完成功能实现技巧,需要的朋友可以参考下...2016-07-06

  • WordPress设置插件的加载顺序的例子

    WordPress插件的加载顺序其实对于很多朋友来讲都没有必要如何来操作了，但有时安装插件太多了我们需要设置一顺序了那么要如何来安装呢，下面来看看． 默认的情况下，Word...2016-11-25

  • jQuery DateTimePicker 日期和时间插件示例

    jQuery UI很强大，其中的日期选择插件Datepicker是一个配置灵活的插件，这篇文章主要介绍了jQuery DateTimePicker 日期和时间插件示例，有兴趣的可以了解一下。...2017-01-26

  • 基于zepto的移动端轻量级日期插件--date_picker

    这篇文章主要介绍了基于zepto的移动端轻量级日期插件--date_picker,需要的朋友可以参考下...2016-03-07