Swipebox_可触摸的 jQuery 灯箱效果插件

Web前端开发网

fly63.com

首页资源工具文章教程栏目

Swipebox

网站地址:http://brutaldesign.github.io/swipebox/

GitHub:https://github.com/brutaldesign/swipebox

描述信息:可触摸的 jQuery 灯箱效果插件

访问官网

GitHub

Swipebox 是一款可触摸的 jQuery 灯箱效果插件，可用于桌面，移动和平板电脑。支持移动设备滑动手势导航，桌面电脑上可以用键盘导航，不支持 CSS3 过渡特性的浏览器使用 jQuery 降级处理，支持视网膜显示，能够通过 CSS 轻松定制。

主要特点

在移动端支持滑动手势
桌面端支持键盘操作
CSS transitions with jQuery fallback
支持视网膜级别的UI图标
简单的CSS定制

兼容浏览器

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

使用Javascript

在您的页面中添加jQuery和swipebox脚本

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

CSS

在您的页面中添加swipebox CSS样式标签。

<link rel="stylesheet" href="source/swipebox.css">

HTML

使用特定的类为你的链接和使用title属性为标题。

<a href="big/image.jpg" class="swipebox" title="My Caption">
    <img src="small/image.jpg" alt="image">
</a>

绑定了“swipebox”类。

<script type="text/javascript">
    jQuery(function($) {
        $(".swipebox").swipebox();
    });
</script>

使用“rel”属性

你可以添加一个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>

视频支持

只需在您的href属性粘贴视频网址。该脚本会自动检查它是否是一个视频网址，并在打开的swipebox视频。

<a class="swipebox-video" rel="视频" href="#">My Videos</a>

动态加载的幻灯片

你可以通过一个数组对象传递给swipebox动态设置您的画廊。

$("#gallery").click(function(e){
    e.preventDefault();
    $.swipebox([
        {href:'big/image1.jpg', title:'My Caption'}, 
        {href:'big/image2.jpg', title:'My Second Caption'}
    ]);
});

刷新方法

刷新方法可以让你重新加载幻灯片，如果在DOM发生了变化。

var swipeboxInstance = $(".a:visible").swipebox();
// Use the refresh method after your event is completed
swipeboxInstance.refresh();

检查打开状态

if ($.swipebox.isOpen){
    // do stuff
}

选项

<script type="text/javascript">
    jQuery(function($) {
        $(".swipebox").swipebox({
            useCSS : true, // false将强制使用的jQuery的动画 
            hideBarsDelay : 3000, // 0始终显示标题和动作条 
            videoMaxWidth : 1140, // 视频最大宽度 
            beforeOpen: function(){}, // 被叫开幕前 
            afterClose: function(){} // 被叫结束后 
        });
    });
</script>

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://fly63.com/nav/1428