Swipebox灯箱插件：支持移动端图片切换

╰半夏微凉° 2022-04-12 09:57 231阅读 0赞

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

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

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

git：[https://github.com/brutaldesign/swipebox][https_github.com_brutaldesign_swipebox]

### 使用方法 ###

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

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

**HTML结构**

为超链接标签使用指定的class，使用`title`属性来指定图片的标题：

**调用插件**

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

### 高级配置 ###

画廊：[http://www.yimeiping.com/][http_www.yimeiping.com]

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

<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>
    
    <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
    }

**可用参数**

*  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将在播放到最后一张图片时接着返回第一张图片播放。
 *  参考：[www.vkbang.com][]

[https_github.com_brutaldesign_swipebox]: https://github.com/brutaldesign/swipebox
[http_www.yimeiping.com]: http://www.yimeiping.com/
[www.vkbang.com]: http://www.vkbang.com