可触摸jQuery灯箱插件 – swipebox

Swipebox是一个可触摸jQuery“灯箱”插件。它使用与桌面,移动和平板设备。

功能特征:

  • 移动触摸手势
  • 桌面键盘导航
  • jQuery回降CSS转化
  • 支持视网膜级的UI icon
  • 轻松实现CSS自定义

兼容性

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

使用方法

JavaScript

在你的head标签或者body标签结束前导入jquery和swipebox脚本。

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

CSS

在你的head标签内导入swipebox CSS样式。

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

HTML

为你的链接使用一个特别的类,并且使用title属性作为标题。

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

停止插件

通过使用“swipebox”类来结束结束每一个链接的swipebox事件。

$( '.swipebox' ).swipebox();

选项

useCSS : true, // false will force the use of jQuery for animations
initialIndexOnArray: 0, // which image index to init when a array is passed
removeBarsOnMobile : true, // false will show top navigation bar on mobile devices
hideCloseButtonOnMobile : false, // true will hide the close button on mobile devices
removeBarsOnMobile : true, // false will show bottom bar on mobile devices
hideBarsDelay : 3000, // delay before hiding bars on desktop
videoMaxWidth : 1140, // videos max width
beforeOpen: function(){} , // called before opening
afterOpen: null, // called after opening
afterClose: function(){}, // called after closing
afterMedia: function(){}, // called after media is loaded
loopAtEnd: false, // true will return to the first image after the last image is reached
autoplayVideos: false // true will autoplay Youtube and Vimeo videos
queryStringData: {} // plain object with custom query string arguments to pass/override for video URLs,
toggleClassOnLoad: '' // CSS class that can be toggled when the slide will be loaded (like 'hidden' of Bootstrap)
useSVG: true

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:可触摸jQuery灯箱插件 – swipebox