基于 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 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将在播放到最后一张图片时接着返回第一张图片播放。

浏览器兼容

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

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

时间: 2024-10-09 07:12:13

基于 jQuery支持移动触摸设备的Lightbox插件的相关文章

支持移动触摸设备的纯js元素拖放插件

Dragula是一款支持移动触摸屏设备的元素拖放纯js插件.这个元素拖放插件使用简单,浏览器兼容性好,能够实现通过鼠标或在移动设备中通过手指来拖动DOM元素的位置.它的特点有: 设置非常简单 没有外部依赖 可以自动对数据进行排序 被移动项带有半透明的视觉效果 支持移动触摸设备 兼容性好,支持IE7+的所有现代浏览器 效果演示:http://www.htmleaf.com/Demo/201504171695.html 下载地址:http://www.htmleaf.com/jQuery/Layou

支持移动触摸设备的简洁js幻灯片插件

lory是一款支持移动触摸设备的简洁的js幻灯片插件.该幻灯片插件可以通过纯js调用,也可以将该幻灯片插件作为jquery插件来使用.该幻灯片的过渡动画具有硬件加速功能,并且可以定制是否使用easing效果. 以下列出该幻灯片的一些特点: 支持移动触摸设备. 简单,界面整洁,纯js调用. 可以作为jQuery插件来使用. 过渡效果支持硬件加速. 可定制easing效果. 可无限循环,制作为旋转木马. 丰富的回调函数. 效果演示:http://www.htmleaf.com/Demo/201504

基于jQuery功能非常强大的图片裁剪插件

今天我们要来介绍一款基于jQuery功能非常强大的图片裁剪插件,这款jQuery图片裁剪插件可以选择裁剪框的尺寸比例,可以设置高宽尺寸,同时可以设置图片翻转角度,当然也支持图片的缩放,裁剪框也可以用鼠标拖动.效果图如下: 在线预览   源码下载 来看看实现的代码,这里我们主要来看JavaScript代码 获取图片的Canvas画布: function getSourceCanvas(image, data) { var canvas = $('<canvas>')[0], context =

jQuery超酷轻量级响应式lightbox插件

Smoothbox是一款非常实用的超酷jQuery轻量级响应式lightbox插件.该lightbox插件在图片转换时带有平滑的CSS3过渡效果.如果不使用CSS3过渡效果,该插件可以支持到IE8浏览器.它的特点有: 轻量级[1.7Kb] 预加载图片 可以在多个项之间建立画廊 实用CSS3 transitions制作平滑过渡效果 响应式图片设置 效果演示:http://www.htmleaf.com/Demo/201504171697.html 下载地址:http://www.htmleaf.c

基于Jquery的音乐播放器进度条插件

自己基于豆瓣FM的ui仿写qq音乐时,基于Jquery手写的进度条插件,效果图如下: 主要特色: ① 可自适应挂载元素的宽度,也可以自己设置进度条宽度: ② 支持部分默认参数修改(具体见使用说明): ③ 允许最大时间为23:59:59,高于此值将默认修改为此值: ④ 可以自己控制进度条动画的开关及重置: ⑤ 可以获取进度条当前时间和宽度,与H5的audio标签协调使用. 使用说明: /* * 功能描述:播放器进度条 * 参数: * option:挂载父元素 * inTime:进度条时间长度 *

一款基于jQuery的图片下滑切换焦点图插件

之前为大家分享了好多款jquery插件,今天我们要分享的一款jQuery插件也比较实用,是一款jQuery焦点图插件.焦点图相当普通,一共可以循环播放4张图片,并且每一张图片在切换的时候都是向下滑动的切换效果,并且在向下切换时产生弹性的动画特效,另外,插件是基于jQuery的,各种浏览器的兼容性应该还不错. 在线预览   源码下载 下面是实现这款jQuery焦点图的过程和代码. HTML代码: <div class="slider-wrap col-width"> <

一款基于jQuery的图片分组切换焦点图插件

这是一款基于jQuery的图片切换焦点图插件,这款jQuery焦点图插件的特点是图片可以分组切换,也就是说一次可以切换多张图片,相比其他焦点图插件,它能节省更多的空间,可以向用户展示更多的图片,非常实用. 在线预览   源码下载 实现的代码. html代码: <div class="device"> <h2> <a href="javascript:;" class="pre">上一组</a><

基于jquery的可触摸滑屏的Web端系统

在移动设备越来越普及的今天,如何使用一套技术体系开发PC与移动平台都可使用的软件是值得探索的. 这个系统就是对这方面做了一下尝试, PC和平板均有比较好的体验. 平板中的截图如下: 主界面: 可更换背景: 点击图标后以新tab的方式打开页面,标签在底部方便触摸 网页中嵌入图表 此外还有不少额外功能,如 类似win8的所有应用列表: 应用商店功能: 访问地址:点击这里 主页:点击这里 兼容除IE6以外所有浏览器,建议使用高版本浏览器访问,会获得更好的体验.

基于jQuery功能强大的图片查看器插件

viewer是一款功能强大的图片查看器jQuery插件.它可以实现ACDsee等看图软件的部分功能.它可以对图片进行移动,缩放,旋转,翻转,可以前后浏览一组图片.该图片查看器还支持移动设备,支持键盘控制,功能十分强大. 在线预览   源码下载 安装 可以通过nmp或bower来安装该图片查看器插件. npm install imageviewer bower install imageviewer 使用方法 使用该幻灯片插件需要引入jQuery,viewer.css和viewer.js文件. <