现在位置首页 / 前端开发 /正文

基于 jQuery支持移动触摸设备的Lightbox插件:Swipebox使用说明

作者: IT小兵 | 2015年3月19日| 热度:℃ | 评论: |参与:

Swipebox是一款支持桌面、移动触摸手机和平板电脑的jquery Lightbox插件。该lightbox插件支持手机的触摸手势,支持桌面电脑的键盘导航,并且支持视频的播放。

在以前文章中,有介绍其他的Lightbox插件,比如:

[Lightbox改造——支持滚轮缩放<转> ]

[Jquery滑动块插件slideControl.js使用说明]

今天介绍一下Swipebox的使用步骤。

先看效果图:


 在线预览   源码下载

浏览器兼容

Chrome, Safari, Firefox, Opera, IE9+, IOS4+, Android, windows phone.

via:http://www.w2bc.com/Article/21873

简要教程

Swipebox是一款支持桌面、移动触摸手机和平板电脑的jQuery Lightbox插件。Swipebox的特点有:

  • 支持手机的触摸手势
  • 支持桌面电脑的键盘导航
  • 通过jQuery回调提提供CSS过渡效果
  • Retina支持UI图标
  • CSS样式容易定制

使用方法

首先在<body>标签之前或<header>标签中引入jquery和swipebox js文件。

1
2
<script src="lib/jquery-2.0.3.js"></script>
<script src="src/js/jquery.swipebox.js"></script>

<header>标签中引入swipebox.css文件。

1
<link rel="stylesheet" href="src/css/swipebox.css">
HTML结构

为超链接标签使用指定的class,使用title属性来指定图片的标题:

1
2
3
<a href="big/image.jpg" class="swipebox" title="My Caption">
    <img src="small/image.jpg" alt="image">
</a>
调用插件

通过.swipebox选择器来绑定该lightbox的swipebox事件:

1
2
3
4
5
6
7
<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打开它。

 
1
<a class="swipebox-video" rel="vimeo" href="http://vimeo.com/29193046">My Videos</a>
动态调用画廊

你可以通过一个数组来动态调用你的画廊:

1
2
3
4
5
6
7
$( '#gallery' ).click( function( e ) {
    e.preventDefault();
    $.swipebox( [
        { href:'big/image1.jpg', title:'My Caption' },
        { href:'big/image2.jpg', title:'My Second Caption' }
    ] );
} );
检测状态
1
2
3
if ( $.swipebox.isOpen ) {
    // do stuff
}
可用参数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script type="text/javascript">
    ;( function( $ ) {
 
        $( '.swipebox' ).swipebox( {
            useCSS : true, // false will force the use of jQuery for animations
            useSVG : true, // false to force the use of png for buttons
            initialIndexOnArray : 0, // which image index to init when a array is passed
            hideCloseButtonOnMobile : false, // true will hide the close button on mobile devices
            hideBarsDelay : 3000, // delay before hiding bars on desktop
            videoMaxWidth : 1140, // videos max width
            beforeOpen: function() {}, // called before opening
            afterOpen: null, // called after opening
            afterClose: function() {} // called after closing
            loopAtEnd: 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将在播放到最后一张图片时接着返回第一张图片播放。


点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询