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/

小编说

以上是编程之家为你收集整理的Swipebox全部内容。

如果觉得编程之家网站内容还不错，欢迎将编程之家推荐给好友。