fly63前端网

www.fly63.com

首页文章资源工具教程 栏目
  • 关于我们
  • 网站投稿
  • 赞助一下
搜索

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具,网友无需注册和下载安装即可使用

点击查看

关闭

提交网站

Swipebox
分享
复制链接
新浪微博
QQ 好友

扫一扫分享

网站地址:http://brutaldesign.github.io/swipebox/
GitHub:https://github.com/brutaldesign/swipebox
网站描述:可触摸的 jQuery 灯箱效果插件

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

主要特点

  1. 在移动端支持滑动手势
  2. 桌面端支持键盘操作
  3. CSS transitions with jQuery fallback
  4. 支持视网膜级别的UI图标
  5. 简单的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

more>>
相关栏目
jQuery之家
致力于搜集和整理各种jQuery插件,jQuery特效...
官网
fullPage.js
jQuery全屏滚动插件
官网GitHub
Waterfall.js
瀑布流无限加载插件
官网GitHub
Raty
一个非常棒的jQuery 评分插件
官网GitHub
Bootstrap-waterfall
一款基于Bootstrap仿Pinterest网站的网格瀑布流插件
官网GitHub
Jcrop
一个功能强大的 jQuery 图像裁剪插件
官网GitHub
jcarousel
jQuery轮播图插件
官网GitHub
Parallax.js
一款jQuery滚动视觉差插件
官网GitHub
vegas
一个jQuery / Zepto幻灯片插件
官网GitHub
paroller.js
一款轻量级的页面滚动视觉差特效jquery插件
官网GitHub
lazyload.js
jquery图片懒加载插件
官网GitHub
alertify.js
jQuery酷炫的各种消息提示插件
官网GitHub
pickadate.js
一个轻量级的 jQuery 日期选择插件
官网GitHub
chosen.js
基于jquery的下拉选择框美化插件
官网GitHub
threesixty.js
360度产品图片预览jQuery插件
官网GitHub
textillate.js
实现动感的 CSS3 文本动画的简单插件
官网GitHub

手机预览