基于 jQuery支持移动触摸设备的Lightbox插件
Swipebox是一款支持桌面、移动触摸手机和平板电脑的jquery Lightbox插件。该lightbox插件支持手机的触摸手势,支持桌面电脑的键盘导航,并且支持视频的播放。
在线预览 源码下载
简要教程
Swipebox是一款支持桌面、移动触摸手机和平板电脑的jQuery Lightbox插件。Swipebox的特点有:
- 支持手机的触摸手势
- 支持桌面电脑的键盘导航
- 通过jQuery回调提提供CSS过渡效果
- Retina支持UI图标
- CSS样式容易定制
使用方法
首先在<body>标签之前或
<header>标签中引入jquery和swipebox js文件。
<script src="lib/jquery-2.0.3.js"></script>
<script src="src/js/jquery.swipebox.js"></script>
在<header>
标签中引入swipebox.css文件。
<link rel="stylesheet" href="src/css/swipebox.css">
HTML结构
为超链接标签使用指定的class,使用title
属性来指定图片的标题:
<a href="big/image.jpg" class="swipebox" title="My Caption"><img src="small/image.jpg" alt="image">
</a>
调用插件
通过.swipebox
选择器来绑定该lightbox的swipebox事件:
<script type="text/javascript">;( function( $ ) {$( '.swipebox' ).swipebox();} )( jQuery ); </script>
高级配置
画廊
你可以在超链接标签中添加一个rel
属性来分割画廊图片
<!-- Gallery 1 -->
<a rel="gallery-1" href="big/image1.jpg" class="swipebox"><img src="small/image1.jpg" alt="image">
</a>
<a rel="gallery-1" href="big/image2.jpg" class="swipebox"><img src="small/image2.jpg" alt="image">
</a>
<!-- Gallery 2 -->
<a rel="gallery-2" href="big/image3.jpg" class="swipebox"><img src="small/image3.jpg" alt="image">
</a>
<a rel="gallery-2" href="big/image4.jpg" class="swipebox"><img src="small/image4.jpg" alt="image">
</a>
视频支持
你可以将一个youtube或vimeo的视频URL放到href
属性中,该lightbox插件会自动检测它是否是youtube 或 vimeo的视频,并用swipebox打开它。
<a class="swipebox-video" rel="vimeo" href="http://vimeo.com/29193046">My Videos</a>
动态调用画廊
你可以通过一个数组来动态调用你的画廊:
$( '#gallery' ).click( function( e ) {e.preventDefault();$.swipebox( [{ href:'big/image1.jpg', title:'My Caption' }, { href:'big/image2.jpg', title:'My Second Caption' }] ); } );
检测状态
if ( $.swipebox.isOpen ) {// do stuff }
可用参数
<script type="text/javascript">;( function( $ ) {$( '.swipebox' ).swipebox( {useCSS : true, // false will force the use of jQuery for animationsuseSVG : true, // false to force the use of png for buttonsinitialIndexOnArray : 0, // which image index to init when a array is passedhideCloseButtonOnMobile : false, // true will hide the close button on mobile deviceshideBarsDelay : 3000, // delay before hiding bars on desktopvideoMaxWidth : 1140, // videos max widthbeforeOpen: function() {}, // called before openingafterOpen: null, // called after openingafterClose: function() {} // called after closingloopAtEnd: false // true will return to the first image after the last image is reached} );} )( jQuery ); </script>
- useCSS:设置为false将强制lightbox使用jQuery来动画。
- useSVG:设置为flase将lightbox使用png来制作按钮。
- initialIndexOnArray:当lightbox使用数组时使用该参数来设置下标。
- hideCloseButtonOnMobile:设置为true时lightbox将在移动设备上隐藏关闭按钮。
- hideBarsDelay:lightbox在桌面设备上隐藏信息条的延时时间。
- videoMaxWidth:lightbox视频的最大宽度。
- beforeOpen:lightbox打开前的回调函数。
- afterOpen:lightbox打开后的回调函数。
- afterClose:lightbox关闭后的回调函数。
- loopAtEnd:设置为true时lightbox将在播放到最后一张图片时接着返回第一张图片播放。
浏览器兼容
Chrome, Safari, Firefox, Opera, IE9+, IOS4+, Android, windows phone.
via:http://***/Article/21873
转载于:https://www.cnblogs.com/liaohuolin/p/4287829.html
基于 jQuery支持移动触摸设备的Lightbox插件相关推荐
- 支持移动触摸设备的简洁js幻灯片插件
lory是一款支持移动触摸设备的简洁的js幻灯片插件.该 幻灯片插件可以通过纯js调用,也可以将该幻灯片插件作为 jquery插件来使用.该幻灯片的过渡动画具有硬件加速功能,并且可以定制是否使用eas ...
- YbSoftwareFactory 代码生成插件【九】:基于JQuery、WebApi的ASP.NET MVC插件的代码生成项目主要技术解析...
YbSoftwareFactory目前已可快速生成ASP.NET WebForm.MVC.WinForm和WPF的解决方案源代码,所生成的源代码可直接在VS中打开并运行.终端用户还可自行二次开发自己 ...
- 基于Jquery插件Uploadify实现实时显示进度条上传图片
网址:http://www.jb51.net/article/83811.htm 这篇文章主要介绍了基于Jquery插件Uploadify实现实时显示进度条上传图片的相关资料,感兴趣的小伙伴们可以参考 ...
- 《基于JQuery和CSS的特效整理》系列分享专栏
2019独角兽企业重金招聘Python工程师标准>>> <基于JQuery和CSS的特效整理>已整理成PDF文档,点击可直接下载至本地查阅 https://www.web ...
- 360全景html插件,jquery实现360度全景展示特效插件
jquery.pano.js是一款可以实现360度全景展示特效的jquery插件.该360度全景展示特效支持使用鼠标拖拽移动图片,也可以通过左右导航按钮来移动图片.它兼容ie8浏览器,支持移动触摸设备 ...
- jQuery简易版的Excel表格功能插件
这是一个基于jQuery简易版的Excel表格功能插件.按下鼠标左键不放,可范围选择多个单元格区块,鼠标右键进行操作,可以拖动列宽,行高,对齐方式,合并单元格,上方插入一行,下方插入一行,左边插入一列 ...
- html复选框美化插件,Labelauty – jQuery单选框/复选框美化插件
Labelauty – jQuery单选框/复选框美化插件 分类:代码 日期:2016-08-02 点击(38,744) 下载(0) 来源:未知 收藏 下拉框美化插件经常见到,如之前介绍过的 Drop ...
- 分享一个针对触摸设备优化的图片幻灯jQuery插件 - touchtouch
为什么80%的码农都做不了架构师?>>> 日期:2012-5-6 来源:GBin1.com 在线演示 本地下载 触摸设备越来越流行了,很多互联网用户都使用ipad等平板电脑 ...
- 【分享】纯js的n级联动列表框 —— 基于jQuery,支持下拉列表框和列表框,最重要的是n级,当然还有更重要的...
多个列表框联动,不算是啥大问题,但是却挺麻烦,那么怎么才能够尽量方便一点呢?网上搜了一下,没发现太好用的,于是就自己写了一个.基于jQuery,无限级联动,支持下拉列表框和列表框. 先说一下步骤和使用 ...
最新文章
- 丰农控股 CIO 王轶枭:万亿级农资市场,神策数据助力大丰收筑就数据驱动核心竞争力
- python蓝牙上位机开发_python做上位机 - osc_2frv0wjp的个人空间 - OSCHINA - 中文开源技术交流社区...
- ROS调用ORB-SLAM2
- YII 规则rule 里面 min,max 提示错误信息
- 2010/9/12学习历程
- Django的应用部署
- Java架构-CAS SSO单点登录框架介绍
- cad常青藤插件_CAD作图效率低怎么办?最全辅助插件大合集,绘图效率提升70%,限时分享...
- java中uri与url的区别_URL和URI的区别与总结
- 【源码】基于粒子群算法的MPPT跟踪
- ArcGIS之定义投影
- MetaPAD: 从大量文本语料库中发现元模式
- 经济学人The right call on Huawei (20190427)
- 将.ipynb文件转换为.py文件
- MTK 平台TP调试遇坑
- python写用用户名密码程序_python写用’户登录程序‘的过程
- telnet测试136邮箱imap服务器
- UE4让物体始终朝向摄像机(二)—RInterp To用法
- mysql水平分区方案_SQL Server表分区(水平分区及垂直分区)
- python pymssql连接本地SQL SERVER