当前位置:主页 > 网页特效 > 图片代码 >

jQuery支持移动触摸设备的Lightbox插件

发布时间:2019/05/11?来源:未知?浏览:?关键词:jquery?Lightbox?
jQuery支持移动触摸设备的Lightbox插件 jQuery支持移动触摸设备的Lightbox插件
阿里云
简要教程

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

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

?使用方法

首先在标签之前或

标签中引入jquery和swipebox js文件。


标签中引入swipebox.css文件。

?HTML结构

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


    

?调用插件

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


?高级配置

?画廊

你可以在超链接标签中添加一个rel属性来分割画廊图片


    


    



    


    
?视频支持

你可以将一个youtube或vimeo的视频URL放到href属性中,该lightbox插件会自动检测它是否是youtube 或 vimeo的视频,并用swipebox打开它。

My Videos

?动态调用画廊

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

$('#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
}

?可用参数


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

共有人阅读,期待你的评论!评论
说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!
Top