jQuery灯箱效果插件-Swipebox

image.png

插件描述：Swipebox 是一款可触摸的 jQuery 灯箱效果插件，可用于桌面，移动和平板电脑。 支持移动设备滑动手势导航，桌面电脑上可以用键盘导航，不支持 CSS3 过渡特性的浏览器使用 jQuery 降级处理，支持视网膜显示，能够通过 CSS 轻松定制。
主要特点
滑动手势移动
键盘导航的桌面
CSS过渡使用jQuery后备
针对UI图标支持视网膜
简单的CSS定制
基本用法
使用Javascript
在您的页面中添加jQuery和swipebox脚本


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

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



绑定了“swipebox”类。

使用“rel”属性
你可以添加一个REL属性，你的链接到单独的画廊。

视频支持

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

动态加载的幻灯片

你可以通过一个数组对象传递给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
}

选项