杰晶网络

纯JS开发baguetteBox.js响应式画廊插件
网络编程 2024/11/26 佚名
3 2

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="/UploadFiles/2021-04-02/baguetteBox.min.js">


注意：如果使用了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="/UploadFiles/2021-04-02/2-1.jpg">


用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="/UploadFiles/2021-04-02/baguetteBox.js">


附加方法


    
  
  • 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="/UploadFiles/2021-04-02/2-1.jpg">


如果屏幕分辨率是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"color: #ff0000">兼容性


    
  
  • 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.


                                

                                

                                     

                                

                                    标签：
                                        
baguetteBox.js响应式插件,baguetteBox.js式插件

                                     

                            

                        

                        

                            

                                免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
                                如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
                            

                        

                        

                            
                            
                        

                        
                        

                            

                                
                                
                                    评论“纯JS开发baguetteBox.js响应式画廊插件”
                                
                            

                            

                                

                                    
                                    

                                    

                                        
暂无“纯JS开发baguetteBox.js响应式画廊插件”评论...
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源
一句话新闻
一口气升级7个大模型SaaS应用，百度智能云：突出一个“开箱即用” - 2024/11/26

这一波大模型产业落地浪潮里，不少企业其实处在 “干瞪眼“的状态。

一种情况是，很多大模型产品看得见却摸不着，在台上一个个遥遥领先——今天Sora技精四座，明天英伟达的机器人又赢得满堂彩，可是到了台下一问：啥时候能用上啊？答曰：遥遥无期。

另一种情况是，企业想用上大模型，却又难免瞻前顾后——既要考虑场景融合，又得兼顾安全性，还要考虑打通现有系统，再加上各种部署成本和繁琐的采购流程……最后只能拂袖：罢了，再等等吧。

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网