Swipebox

SwipeBox 介绍

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 completedswipeBoxInstance.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>链接: http://www.fly63.com/nav/1428

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

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

网站描述:可触摸的 jQuery 灯箱效果插件

Swipebox

官方网站：http://brutaldesign.github.io/swipebox/