jquery灯箱插件Rebox js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery灯箱插件Rebox js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
	<head>
		<meta charset="gb2312" />
		<title>jquery������Rebox</title>
		<style type="text/css"> 
			body,img,p,h1,h2,h3,h4,h5,h6,form,table,td,ul,ol,li,dl,dt,dd,pre,blockquote,fieldset,label{
				margin:0;
				padding:0;
				border:0;
			}
			body{ background-color: #f8f7ec; border-top: solid 10px #777; font: 90% Helvetica, sans-serif; padding: 20px; }
			h1,h2,h3,h4{ margin: 10px 0; font-family: Plantin, "Plantin std", "Plantin", "Baskerville", Georgia, "Times New Roman", serif; font-weight: normal; }
			h1{font-size: 2.2em;margin: 0 0 20px 0; }
			h2{ background-color: #D95656; line-height: 18px; font-size: 18px; letter-spacing: 1px; padding: 5px 10px; margin: 10px 0 10px -60px; color: #fff; display: inline-block; border-radius: 4px; -moz-border-radius: 4px;-webkit-border-radius: 4px; }
			h3{ color: #D95656; font-size: 18px; letter-spacing: 1px;  margin: 15px 0 15px -20px; }
			h4{ color: #777; font-size: 18px; letter-spacing: 1px; }
			p{ margin: 10px 0; line-height: 150%; }
			a{ color: #7b94b2; }
			ul,ol{ margin: 10px 0 10px 40px; }
			li{ margin: 4px 0; }
			dl{ margin: 10px 0; }
			dl dt{ font-weight: bold; line-height: 20px; margin: 10px 0 0 0; }
			dl dd{ margin: -20px 0 10px 120px; padding-bottom: 10px; border-bottom: solid 1px #eee;}
			pre{ font-size: 12px; line-height: 16px; padding: 5px 5px 5px 10px; margin: 10px 0; border-left: solid 5px #9EC45F; overflow: auto; }

			.wrapper{ background-color: #ffffff; width: 600px; border: solid 1px #eeeeee; padding: 20px 20px 20px 40px; margin: 0 auto; border-radius: 6px; -moz-border-radius: 6px;-webkit-border-radius: 6px; }
			.header{ text-align: center;position: relative; margin: 0 -20px 0 -40px; }
			.header ul{ margin: 10px 0; display: block; }
			.header ul li{ display: inline-block; list-style: none; margin: 10px 0; width: 100px; }
			.header ul li a{ text-transform: uppercase; color: #777; text-decoration: none; font-size: 12px; }
			.header ul li a:hover{ color: #555; }
			.header .tour{ color: #fff; background-color: #9ec45f; padding: 4px 10px; margin: 10px 0; font-size: 18px; line-height: 18px; text-decoration: none;border-radius: 4px; -moz-border-radius: 4px;-webkit-border-radius: 4px;}
			.header .tour:hover{ background-color: #8eb44f; }
			.header ul.scrollnav{ position: fixed; top: 0px; left: 50%; background-color: #777; display: none; margin: 0 0 0 -185px; border-radius: 0 0 0 6px; -moz-border-radius: 0 0 0 6px;-webkit-border-radius: 0 0 0 6px;}
			.header ul.scrollnav li a{ color: #fff; }
			.header ul.scrollnav.scrolled{ display: inline; }
			.clear{ clear: both; }

			.gallery{}
			.gallery img{ width: 24%; }
		</style>
		
		<link rel="stylesheet" media="all" type="text/css" href="css/jquery-rebox.css" />		

	</head>

	<body>
		<div class="wrapper">
			<div class="header">
				<h1>Rebox - jQuery or Zepto tiny small simple responsive lightbox</h1>

				<ul class="nav">
					<li><a href="#Get_Started" title="Get Started">Get Started</a></li>
					<li><a href="#Examples" title="Examples">Examples</a></li>
					<li><a href="#Options" title="Options">Options</a></li>
					<li><a href="#Methods" title="Methods">Methods</a></li>
					<li><a href="#Events" title="Events">Events</a></li>
				</ul>
		
			</div>

			<div class="content">

				<p>Ever need a lean, simple, quick lightbox for images that is responsive, delegates, pretty, no required images, includes 
					captions? That is exactly what Rebox does.  Instead of using a rediculous amount of javascript to restrict image sizes 
					within the window, Rebox uses css max-width.  The design requires no images, although if you want to reskin it you can.  
					This keeps the library clean, and simple.</p>

				<p>The final thing you should know.. Rebox comes from REsponsive lightBOX.</p>
				
				

				<h2 id="Examples">Examples</h2>

				
						<!-- ============= example -->
						<div class="example-container">
							<h3>Single Initialization</h3>
							<p>Create a single lightbox, individually on each image:</p>
							<div>
						 		<div id="gallery1" class="gallery">
						 			<a href="media/sample_a.jpg" title="Caption for image A"><img src="media/sample_a_thumb.jpg" /></a>
						 			<a href="media/sample_b.jpg" title="Caption for image B"><img src="media/sample_b_thumb.jpg" /></a>
						 			<a href="media/sample_c.jpg" title="Caption for image C"><img src="media/sample_c_thumb.jpg" /></a>
						 			<a href="media/sample_d.jpg" title="Caption for image D"><img src="media/sample_d_thumb.jpg" /></a>
						 		</div>
							</div>
<pre class="ex code" data-lllanguage="js">
$('#gallery1 a').rebox();
</pre>
						</div>

						<!-- ============= example -->
						<div class="example-container">
							<h3>Gallery Initialization</h3>
							<p>Create a gallery style lightbox:</p>
							<div>
						 		<div id="gallery2" class="gallery">
						 			<a href="media/sample_a.jpg" title="Caption for image A"><img src="media/sample_a_thumb.jpg" /></a>
						 			<a href="media/sample_b.jpg" title="Caption for image B"><img src="media/sample_b_thumb.jpg" /></a>
						 			<a href="media/sample_c.jpg" title="Caption for image C"><img src="media/sample_c_thumb.jpg" /></a>
						 			<a href="media/sample_d.jpg" title="Caption for image D"><img src="media/sample_d_thumb.jpg" /></a>
						 		</div>
							</div>
<pre class="ex code" data-lllanguage="js">
$('#gallery2').rebox({ selector: 'a' });
</pre >
						</div>

						<!-- ============= example -->
						<div class="example-container">
							<h3>Dynamically add images after the fact</h3>
							<p>During page interactions you can add to your container element and new images will be pickedup (But not during an open modal):</p>
							<div>
						 		<div id="gallery3" class="gallery">
						 		</div>
						 		<a href="#" id="gallery3Add">Add an image</a>
							</div>
<pre class="ex code" data-lllanguage="js">
$('#gallery3').rebox({ selector: 'a' });

// don't worry about the following, it just injects a new img..
var counter = 0;
$('#gallery3Add').on('click', function(e){
	e.preventDefault();
	var images = ['a','b','c','d'],
		letter = images[counter++ % images.length];
	$('#gallery3').append(
		'&lt;a href="media/sample_'+ letter +'.jpg" title="Image '+ letter +'"&gt;'+
			'&lt;img src="media/sample_'+ letter +'_thumb.jpg" /&gt;'+
		'&lt;/a&gt; '
		);
});
</pre >
						</div>

						<!-- ============= example -->
						<div class="example-container">
							<h3>Custom Content</h3>
							<p>Using templates you can show images, videos, or anything.  By default only the "image" template is implemented.</p>
							<p>First you need to add a template type.  Each type is a function that is passed the current item that needs to be shown (the thumb image), current Rebox settings, and a callback you must call when your new jquery object is created.  The scope of the callback must be this new element.  If you want the callback to execute immediately just use jquery's .each().</p>
							<p>Next on your gallery links you need to set the template to use with the data attribute: data-rebox-template="video" By default all .</p>
							<p>Using this function approach to templates you're able to do your post creation work to the new content when needed.</p>
							<div>
						 		<div id="gallery4" class="gallery">
						 			<a href="http://jq22.qiniudn.com/jq22com.webm" title="A racing video" data-rebox-template="video"><img src="media/video_racing_thumb.jpg" /></a>
						 		</div>
							</div>
<pre class="ex code" data-lllanguage="js">
/*
&lt;div id="gallery4" class="gallery"&gt;
	&lt;a href="media/sample_a.jpg" data-rebox-template="video" title="Caption for image A"&gt;
		&lt;img src="media/sample_a_thumb.jpg" /&gt;
	&lt;/a&gt;
&lt;/div&gt;
*/
$('#gallery4 a').rebox({
	templates:{
		video: function($item, settings, callback){
			var url = $item.attr('href').replace(/\.\w+$/,'');
			return $('&lt;video class="'+ settings.theme +'-content" controls preload="metadata" '+
  							'poster="'+url+'.jpg"&gt;'+
						'&lt;source src="'+url+'.webm" type="video/webm" /&gt;'+
						'&lt;source src="'+url+'.mp4" type="video/mp4" /&gt;'+
						'Your browser does not support the HTML5 video tag'+
					'&lt;/video&gt;').on('loadeddata', callback);
		}
	}
});
</pre>
						</div>

						<!-- ============= example -->
						<div class="example-container">
							<h3>Events Example</h3>
							<p>Click through the gallery with your console open to view the events:</p>
							<div>
						 		<div id="gallery5" class="gallery">
						 			<a href="media/sample_a.jpg" title="Caption for image A"><img src="media/sample_a_thumb.jpg" /></a>
						 			<a href="media/sample_b.jpg" title="Caption for image B"><img src="media/sample_b_thumb.jpg" /></a>
						 			<a href="media/sample_c.jpg" title="Caption for image C"><img src="media/sample_c_thumb.jpg" /></a>
						 			<a href="media/sample_d.jpg" title="Caption for image D"><img src="media/sample_d_thumb.jpg" /></a>
						 		</div>
							</div>
<pre class="ex code" data-lllanguage="js">
$('#gallery5').rebox({ selector: 'a' })
	.on('rebox:open', function(e, rx){ console.log(e.type, rx); })
	.on('rebox:close', function(e, rx){ console.log(e.type, rx); })
	.on('rebox:goto', function(e, rx, i, $item, $img){ console.log(e.type, rx, i, $item, $img); });
</pre >
						</div>




				<h2 id="Options">The Options</h2>

<pre class="code" data-lllanguage="js">
{
	theme: 'rebox',        // class name parent gets (for your css)
	selector: null,        // the selector to delegate to, should be to the &lt;a&gt; which contains an &lt;img&gt;
	prev: '&amp;larr;',        // use an image, text, whatever for the previous button
	next: '&amp;rarr;',        // use an image, text, whatever for the next button
	loading: '%',          // use an image, text, whatever for the loading notification
	close: '&amp;times;',      // use an image, text, whatever for the close button
	speed: 600,            // speed to fade in or out
	zIndex: 1000,          // zIndex to apply to the outer container
	cycle: true,           // whether to cycle through galleries or stop at ends
	captionAttr: 'title'   // name of the attribute to grab the caption from
	template: 'image',     // the default template to be used (see templates below)
	templates: {           // define templates to create the elements you need function($item, settings)
		image: function($item, settings, callback){ 
			return $('&lt;img src="'+ $item.attr('href') +'" class="'+ s.theme +'-content" /&gt;').load(callback);
		}
	}
}
</pre>

				<h2 id="Methods">The Methods</h2>

<pre class="code" data-lllanguage="js">
// Initialize a rebox instance
$el.rebox({});

// Enable a rebox, generally you don't have to call this
// but if you want to enable and disable this could be useful
$el.rebox('enable');

// Disable a rebox. Again you generally don't need this
// but if you want to enable and disable this could be useful
$el.rebox('disable');

// Go to the next image in the queue
$el.rebox('next');

// Go to the prev image in the queue
$el.rebox('prev');

// Go to a specific index in the queue
$el.rebox('goto', 4);

// Destroy a rebox
$el.rebox('destroy');

// Get or set an option. When value is provided a Set takes place
// If only the key is provided the value will be retrieved
$el.rebox('option', key, value);

// if an object is passed each setting will be applied
$el.rebox('option', { speed: 500 });

// set global defaults
$.rebox.setDefaults({ theme: 'mytheme' });
</pre>
				
				<h2 id="Events">The Events</h2>
<pre class="code" data-lllanguage="js">
// when the control is opened
$el.bind('rebox:open', function(e){});

// when the control is closed
$el.bind('rebox:close', function(e){});

// when the control changes image, passes the index as second parameter
$el.bind('rebox:goto', function(e, i){});

// when the control is disabled
$el.bind('rebox:disable', function(e){});

// when the control is destroyed
$el.bind('rebox:destroy', function(e){});
</pre>

			</div>
		</div>

		<script src="js/jquery.min.js"></script>
		<!-- <script type="text/javascript" src="lib/zepto.min.js"></script> -->
		<script type="text/javascript" src="js/jquery-litelighter.js"></script>
		<script type="text/javascript" src="js/jquery-rebox.js"></script>

		<script type="text/javascript">

			$(document).ready(function(){
				// quick routine for scrolling nav
				var $nav = $('.header ul'),
					navoffset = $nav.offset(),
					$navclone = $nav.clone().addClass('scrollnav').appendTo('.header'),
					$window = $(window);
				$window.scroll(function(e){
					if((navoffset.top+50) < $window.scrollTop()){
						if(!$navclone.hasClass('scrolled'))
							$navclone.addClass('scrolled');
					}
					else $navclone.removeClass('scrolled');
				}).scroll();

				// highlight the code
				$('pre.code').litelighter();

				// run the examples
				$('.example-container > pre.ex').each(function(i){
					eval($(this).data('llcode'));
				});
			});
		</script>
</body>
</html>

JS代码(zepto.min.js):

// Zepto 1.1.3 (generated with Zepto Builder) - zepto event ajax form ie touch - zeptojs.com/licensevar Zepto=function(){
	function t(t){
	return null==t?t+"":V[Y.call(t)]||"object"}
function e(e){
	return"function"==t(e)}
function n(t){
	return null!=t&&t==t.window}
function i(t){
	return null!=t&&t.nodeType==t.DOCUMENT_NODE}
function r(e){
	return"object"==t(e)}
function o(t){
	return r(t)&&!n(t)&&Object.getPrototypeOf(t)==Object.prototype}
function a(t){
	return"number"==typeof t.length}
function s(t){
	return O.call(t,function(t){
	return null!=t}
)}
function u(t){
	return t.length>0?E.fn.concat.apply([],t):t}
function c(t){
	return t.replace(/::/g,"/").replace(/([A-Z]+)([A-Z][a-z])/g,"$1_$2").replace(/([a-z\d])([A-Z])/g,"$1_$2").replace(/_/g,"-").toLowerCase()}
function l(t){
	return t in D?D[t]:D[t]=RegExp("(^|\\s)"+t+"(\\s|$)")}
function f(t,e){
	return"number"!=typeof e||A[c(t)]?e:e+"px"}
function h(t){
	var e,n;
	return L[t]||(e=M.createElement(t),M.body.appendChild(e),n=getComputedStyle(e,"").getPropertyValue("display"),e.parentNode.removeChild(e),"none"==n&&(n="block"),L[t]=n),L[t]}
function p(t){
	return"children"in t?P.call(t.children):E.map(t.childNodes,function(t){
	return 1==t.nodeType?t:b}
)}
function d(t,e,n){
	for(T in e)n&&(o(e[T])||G(e[T]))?(o(e[T])&&!o(t[T])&&(t[T]={
}
),G(e[T])&&!G(t[T])&&(t[T]=[]),d(t[T],e[T],n)):e[T]!==b&&(t[T]=e[T])}
function m(t,e){
	return null==e?E(t):E(t).filter(e)}
function g(t,n,i,r){
	return e(n)?n.call(t,i,r):n}
function v(t,e,n){
	null==n?t.removeAttribute(e):t.setAttribute(e,n)}
function y(t,e){
	var n=t.className,i=n&&n.baseVal!==b;
	return e===b?i?n.baseVal:n:(i?n.baseVal=e:t.className=e,b)}
function x(t){
	var e;
	try{
	return t?"true"==t||("false"==t?!1:"null"==t?null:/^0/.test(t)||isNaN(e=Number(t))?/^[\[\{
	]/.test(t)?E.parseJSON(t):t:e):t}
catch(n){
	return t}
}
function w(t,e){
	e(t);
	for(var n in t.childNodes)w(t.childNodes[n],e)}
var b,T,E,j,S,C,N=[],P=N.slice,O=N.filter,M=window.document,L={
}
,D={
}
,A={
	"column-count":1,columns:1,"font-weight":1,"line-height":1,opacity:1,"z-index":1,zoom:1}
,Z=/^\s*<(\w+|!)[^>]*>/,_=/^<(\w+)\s*\/?>(?:<\/\1>|)$/,$=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/gi,R=/^(?:body|html)$/i,k=/([A-Z])/g,z=["val","css","html","text","data","width","height","offset"],F=["after","prepend","before","append"],I=M.createElement("table"),q=M.createElement("tr"),U={
	tr:M.createElement("tbody"),tbody:I,thead:I,tfoot:I,td:q,th:q,"*":M.createElement("div")}
,H=/complete|loaded|interactive/,X=/^[\w-]*$/,V={
}
,Y=V.toString,B={
}
,J=M.createElement("div"),W={
	tabindex:"tabIndex",readonly:"readOnly","for":"htmlFor","class":"className",maxlength:"maxLength",cellspacing:"cellSpacing",cellpadding:"cellPadding",rowspan:"rowSpan",colspan:"colSpan",usemap:"useMap",frameborder:"frameBorder",contenteditable:"contentEditable"}
,G=Array.isArray||function(t){
	return t instanceof Array}
;
	return B.matches=function(t,e){
	if(!e||!t||1!==t.nodeType)return!1;
	var n=t.webkitMatchesSelector||t.mozMatchesSelector||t.oMatchesSelector||t.matchesSelector;
	if(n)return n.call(t,e);
	var i,r=t.parentNode,o=!r;
	return o&&(r=J).appendChild(t),i=~B.qsa(r,e).indexOf(t),o&&J.removeChild(t),i}
,S=function(t){
	return t.replace(/-+(.)?/g,function(t,e){
	return e?e.toUpperCase():""}
)}
,C=function(t){
	return O.call(t,function(e,n){
	return t.indexOf(e)==n}
)}
,B.fragment=function(t,e,n){
	var i,r,a;
	return _.test(t)&&(i=E(M.createElement(RegExp.$1))),i||(t.replace&&(t=t.replace($,"<$1></$2>")),e===b&&(e=Z.test(t)&&RegExp.$1),e in U||(e="*"),a=U[e],a.innerHTML=""+t,i=E.each(P.call(a.childNodes),function(){
	a.removeChild(this)}
)),o(n)&&(r=E(i),E.each(n,function(t,e){
	z.indexOf(t)>-1?r[t](e):r.attr(t,e)}
)),i}
,B.Z=function(t,e){
	return t=t||[],t.__proto__=E.fn,t.selector=e||"",t}
,B.isZ=function(t){
	return t instanceof B.Z}
,B.init=function(t,n){
	var i;
	if(!t)return B.Z();
	if("string"==typeof t)if(t=t.trim(),"<"==t[0]&&Z.test(t))i=B.fragment(t,RegExp.$1,n),t=null;
	else{
	if(n!==b)return E(n).find(t);
	i=B.qsa(M,t)}
else{
	if(e(t))return E(M).ready(t);
	if(B.isZ(t))return t;
	if(G(t))i=s(t);
	else if(r(t))i=[t],t=null;
	else if(Z.test(t))i=B.fragment(t.trim(),RegExp.$1,n),t=null;
	else{
	if(n!==b)return E(n).find(t);
	i=B.qsa(M,t)}
}
return B.Z(i,t)}
,E=function(t,e){
	return B.init(t,e)}
,E.extend=function(t){
	var e,n=P.call(arguments,1);
	return"boolean"==typeof t&&(e=t,t=n.shift()),n.forEach(function(n){
	d(t,n,e)}
),t}
,B.qsa=function(t,e){
	var n,r="#"==e[0],o=!r&&"."==e[0],a=r||o?e.slice(1):e,s=X.test(a);
	return i(t)&&s&&r?(n=t.getElementById(a))?[n]:[]:1!==t.nodeType&&9!==t.nodeType?[]:P.call(s&&!r?o?t.getElementsByClassName(a):t.getElementsByTagName(e):t.querySelectorAll(e))}
,E.contains=function(t,e){
	return t!==e&&t.contains(e)}
,E.type=t,E.isFunction=e,E.isWindow=n,E.isArray=G,E.isPlainObject=o,E.isEmptyObject=function(t){
	var e;
	for(e in t)return!1;
	return!0}
,E.inArray=function(t,e,n){
	return N.indexOf.call(e,t,n)}
,E.camelCase=S,E.trim=function(t){
	return null==t?"":String.prototype.trim.call(t)}
,E.uuid=0,E.support={
}
,E.expr={
}
,E.map=function(t,e){
	var n,i,r,o=[];
	if(a(t))for(i=0;
	t.length>i;
	i++)n=e(t[i],i),null!=n&&o.push(n);
	else for(r in t)n=e(t[r],r),null!=n&&o.push(n);
	return u(o)}
,E.each=function(t,e){
	var n,i;
	if(a(t)){
	for(n=0;
	t.length>n;
	n++)if(e.call(t[n],n,t[n])===!1)return t}
else for(i in t)if(e.call(t[i],i,t[i])===!1)return t;
	return t}
,E.grep=function(t,e){
	return O.call(t,e)}
,window.JSON&&(E.parseJSON=JSON.parse),E.each("Boolean Number String Function Array Date RegExp Object Error".split(" "),function(t,e){
	V["[object "+e+"]"]=e.toLowerCase()}
),E.fn={
	forEach:N.forEach,reduce:N.reduce,push:N.push,sort:N.sort,indexOf:N.indexOf,concat:N.concat,map:function(t){
	return E(E.map(this,function(e,n){
	return t.call(e,n,e)}
))}
,slice:function(){
	return E(P.apply(this,arguments))}
,ready:function(t){
	return H.test(M.readyState)&&M.body?t(E):M.addEventListener("DOMContentLoaded",function(){
	t(E)}
,!1),this}
,get:function(t){
	return t===b?P.call(this):this[t>=0?t:t+this.length]}
,toArray:function(){
	return this.get()}
,size:function(){
	return this.length}
,remove:function(){
	return this.each(function(){
	null!=this.parentNode&&this.parentNode.removeChild(this)}
)}
,each:function(t){
	return N.every.call(this,function(e,n){
	return t.call(e,n,e)!==!1}
),this}
,filter:function(t){
	return e(t)?this.not(this.not(t)):E(O.call(this,function(e){
	return B.matches(e,t)}
))}
,add:function(t,e){
	return E(C(this.concat(E(t,e))))}
,is:function(t){
	return this.length>0&&B.matches(this[0],t)}
,not:function(t){
	var n=[];
	if(e(t)&&t.call!==b)this.each(function(e){
	t.call(this,e)||n.push(this)}
);
	else{
	var i="string"==typeof t?this.filter(t):a(t)&&e(t.item)?P.call(t):E(t);
	this.forEach(function(t){
	0>i.indexOf(t)&&n.push(t)}
)}
return E(n)}
,has:function(t){
	return this.filter(function(){
	return r(t)?E.contains(this,t):E(this).find(t).size()}
)}
,eq:function(t){
	return-1===t?this.slice(t):this.slice(t,+t+1)}
,first:function(){
	var t=this[0];
	return t&&!r(t)?t:E(t)}
,last:function(){
	var t=this[this.length-1];
	return t&&!r(t)?t:E(t)}
,find:function(t){
	var e,n=this;
	return e="object"==typeof t?E(t).filter(function(){
	var t=this;
	return N.some.call(n,function(e){
	return E.contains(e,t)}
)}
):1==this.length?E(B.qsa(this[0],t)):this.map(function(){
	return B.qsa(this,t)}
)}
,closest:function(t,e){
	var n=this[0],r=!1;
	for("object"==typeof t&&(r=E(t));
	n&&!(r?r.indexOf(n)>=0:B.matches(n,t));
	)n=n!==e&&!i(n)&&n.parentNode;
	return E(n)}
,parents:function(t){
	for(var e=[],n=this;
	n.length>0;
	)n=E.map(n,function(t){
	return(t=t.parentNode)&&!i(t)&&0>e.indexOf(t)?(e.push(t),t):b}
);
	return m(e,t)}
,parent:function(t){
	return m(C(this.pluck("parentNode")),t)}
,children:function(t){
	return m(this.map(function(){
	return p(this)}
),t)}
,contents:function(){
	return this.map(function(){
	return P.call(this.childNodes)}
)}
,siblings:function(t){
	return m(this.map(function(t,e){
	return O.call(p(e.parentNode),function(t){
	return t!==e}
)}
),t)}
,empty:function(){
	return this.each(function(){
	this.innerHTML=""}
)}
,pluck:function(t){
	return E.map(this,function(e){
	return e[t]}
)}
,show:function(){
	return this.each(function(){
	"none"==this.style.display&&(this.style.display=""),"none"==getComputedStyle(this,"").getPropertyValue("display")&&(this.style.display=h(this.nodeName))}
)}
,replaceWith:function(t){
	return this.before(t).remove()}
,wrap:function(t){
	var n=e(t);
	if(this[0]&&!n)var i=E(t).get(0),r=i.parentNode||this.length>1;
	return this.each(function(e){
	E(this).wrapAll(n?t.call(this,e):r?i.cloneNode(!0):i)}
)}
,wrapAll:function(t){
	if(this[0]){
	E(this[0]).before(t=E(t));
	for(var e;
	(e=t.children()).length;
	)t=e.first();
	E(t).append(this)}
return this}
,wrapInner:function(t){
	var n=e(t);
	return this.each(function(e){
	var i=E(this),r=i.contents(),o=n?t.call(this,e):t;
	r.length?r.wrapAll(o):i.append(o)}
)}
,unwrap:function(){
	return this.parent().each(function(){
	E(this).replaceWith(E(this).children())}
),this}
,clone:function(){
	return this.map(function(){
	return this.cloneNode(!0)}
)}
,hide:function(){
	return this.css("display","none")}
,toggle:function(t){
	return this.each(function(){
	var e=E(this);
	(t===b?"none"==e.css("display"):t)?e.show():e.hide()}
)}
,prev:function(t){
	return E(this.pluck("previousElementSibling")).filter(t||"*")}
,next:function(t){
	return E(this.pluck("nextElementSibling")).filter(t||"*")}
,html:function(t){
	return 0===arguments.length?this.length>0?this[0].innerHTML:null:this.each(function(e){
	var n=this.innerHTML;
	E(this).empty().append(g(this,t,e,n))}
)}
,text:function(t){
	return 0===arguments.length?this.length>0?this[0].textContent:null:this.each(function(){
	this.textContent=t===b?"":""+t}
)}
,attr:function(t,e){
	var n;
	return"string"==typeof t&&e===b?0==this.length||1!==this[0].nodeType?b:"value"==t&&"INPUT"==this[0].nodeName?this.val():!(n=this[0].getAttribute(t))&&t in this[0]?this[0][t]:n:this.each(function(n){
	if(1===this.nodeType)if(r(t))for(T in t)v(this,T,t[T]);
	else v(this,t,g(this,e,n,this.getAttribute(t)))}
)}
,removeAttr:function(t){
	return this.each(function(){
	1===this.nodeType&&v(this,t)}
)}
,prop:function(t,e){
	return t=W[t]||t,e===b?this[0]&&this[0][t]:this.each(function(n){
	this[t]=g(this,e,n,this[t])}
)}
,data:function(t,e){
	var n=this.attr("data-"+t.replace(k,"-$1").toLowerCase(),e);
	return null!==n?x(n):b}
,val:function(t){
	return 0===arguments.length?this[0]&&(this[0].multiple?E(this[0]).find("option").filter(function(){
	return this.selected}
).pluck("value"):this[0].value):this.each(function(e){
	this.value=g(this,t,e,this.value)}
)}
,offset:function(t){
	if(t)return this.each(function(e){
	var n=E(this),i=g(this,t,e,n.offset()),r=n.offsetParent().offset(),o={
	top:i.top-r.top,left:i.left-r.left}
;
	"static"==n.css("position")&&(o.position="relative"),n.css(o)}
);
	if(0==this.length)return null;
	var e=this[0].getBoundingClientRect();
	return{
	left:e.left+window.pageXOffset,top:e.top+window.pageYOffset,width:Math.round(e.width),height:Math.round(e.height)}
}
,css:function(e,n){
	if(2>arguments.length){
	var i=this[0],r=getComputedStyle(i,"");
	if(!i)return;
	if("string"==typeof e)return i.style[S(e)]||r.getPropertyValue(e);
	if(G(e)){
	var o={
}
;
	return E.each(G(e)?e:[e],function(t,e){
	o[e]=i.style[S(e)]||r.getPropertyValue(e)}
),o}
}
var a="";
	if("string"==t(e))n||0===n?a=c(e)+":"+f(e,n):this.each(function(){
	this.style.removeProperty(c(e))}
);
	else for(T in e)e[T]||0===e[T]?a+=c(T)+":"+f(T,e[T])+";
	":this.each(function(){
	this.style.removeProperty(c(T))}
);
	return this.each(function(){
	this.style.cssText+=";
	"+a}
)}
,index:function(t){
	return t?this.indexOf(E(t)[0]):this.parent().children().indexOf(this[0])}
,hasClass:function(t){
	return t?N.some.call(this,function(t){
	return this.test(y(t))}
,l(t)):!1}
,addClass:function(t){
	return t?this.each(function(e){
	j=[];
	var n=y(this),i=g(this,t,e,n);
	i.split(/\s+/g).forEach(function(t){
	E(this).hasClass(t)||j.push(t)}
,this),j.length&&y(this,n+(n?" ":"")+j.join(" "))}
):this}
,removeClass:function(t){
	return this.each(function(e){
	return t===b?y(this,""):(j=y(this),g(this,t,e,j).split(/\s+/g).forEach(function(t){
	j=j.replace(l(t)," ")}
),y(this,j.trim()),b)}
)}
,toggleClass:function(t,e){
	return t?this.each(function(n){
	var i=E(this),r=g(this,t,n,y(this));
	r.split(/\s+/g).forEach(function(t){
	(e===b?!i.hasClass(t):e)?i.addClass(t):i.removeClass(t)}
)}
):this}
,scrollTop:function(t){
	if(this.length){
	var e="scrollTop"in this[0];
	return t===b?e?this[0].scrollTop:this[0].pageYOffset:this.each(e?function(){
	this.scrollTop=t}
:function(){
	this.scrollTo(this.scrollX,t)}
)}
}
,scrollLeft:function(t){
	if(this.length){
	var e="scrollLeft"in this[0];
	return t===b?e?this[0].scrollLeft:this[0].pageXOffset:this.each(e?function(){
	this.scrollLeft=t}
:function(){
	this.scrollTo(t,this.scrollY)}
)}
}
,position:function(){
	if(this.length){
	var t=this[0],e=this.offsetParent(),n=this.offset(),i=R.test(e[0].nodeName)?{
	top:0,left:0}
:e.offset();
	return n.top-=parseFloat(E(t).css("margin-top"))||0,n.left-=parseFloat(E(t).css("margin-left"))||0,i.top+=parseFloat(E(e[0]).css("border-top-width"))||0,i.left+=parseFloat(E(e[0]).css("border-left-width"))||0,{
	top:n.top-i.top,left:n.left-i.left}
}
}
,offsetParent:function(){
	return this.map(function(){
	for(var t=this.offsetParent||M.body;
	t&&!R.test(t.nodeName)&&"static"==E(t).css("position");
	)t=t.offsetParent;
	return t}
)}
}
,E.fn.detach=E.fn.remove,["width","height"].forEach(function(t){
	var e=t.replace(/./,function(t){
	return t[0].toUpperCase()}
);
	E.fn[t]=function(r){
	var o,a=this[0];
	return r===b?n(a)?a["inner"+e]:i(a)?a.documentElement["scroll"+e]:(o=this.offset())&&o[t]:this.each(function(e){
	a=E(this),a.css(t,g(this,r,e,a[t]()))}
)}
}
),F.forEach(function(e,n){
	var i=n%2;
	E.fn[e]=function(){
	var e,r,o=E.map(arguments,function(n){
	return e=t(n),"object"==e||"array"==e||null==n?n:B.fragment(n)}
),a=this.length>1;
	return 1>o.length?this:this.each(function(t,e){
	r=i?e:e.parentNode,e=0==n?e.nextSibling:1==n?e.firstChild:2==n?e:null,o.forEach(function(t){
	if(a)t=t.cloneNode(!0);
	else if(!r)return E(t).remove();
	w(r.insertBefore(t,e),function(t){
	null==t.nodeName||"SCRIPT"!==t.nodeName.toUpperCase()||t.type&&"text/javascript"!==t.type||t.src||window.eval.call(window,t.innerHTML)}
)}
)}
)}
,E.fn[i?e+"To":"insert"+(n?"Before":"After")]=function(t){
	return E(t)[e](this),this}
}
),B.Z.prototype=E.fn,B.uniq=C,B.deserializeValue=x,E.zepto=B,E}
();
	window.Zepto=Zepto,void 0===window.$&&(window.$=Zepto),function(t){
	function e(e,n,i){
	var r=t.Event(n);
	return t(e).trigger(r,i),!r.isDefaultPrevented()}
function n(t,n,i,r){
	return t.global?e(n||y,i,r):void 0}
function i(e){
	e.global&&0===t.active++&&n(e,null,"ajaxStart")}
function r(e){
	e.global&&!--t.active&&n(e,null,"ajaxStop")}
function o(t,e){
	var i=e.context;
	return e.beforeSend.call(i,t,e)===!1||n(e,i,"ajaxBeforeSend",[t,e])===!1?!1:(n(e,i,"ajaxSend",[t,e]),void 0)}
function a(t,e,i,r){
	var o=i.context,a="success";
	i.success.call(o,t,a,e),r&&r.resolveWith(o,[t,a,e]),n(i,o,"ajaxSuccess",[e,i,t]),u(a,e,i)}
function s(t,e,i,r,o){
	var a=r.context;
	r.error.call(a,i,e,t),o&&o.rejectWith(a,[i,e,t]),n(r,a,"ajaxError",[i,r,t||e]),u(e,i,r)}
function u(t,e,i){
	var o=i.context;
	i.complete.call(o,e,t),n(i,o,"ajaxComplete",[e,i]),r(i)}
function c(){
}
function l(t){
	return t&&(t=t.split(";
	",2)[0]),t&&(t==E?"html":t==T?"json":w.test(t)?"script":b.test(t)&&"xml")||"text"}
function f(t,e){
	return""==e?t:(t+"&"+e).replace(/[&?]{
	1,2}
/,"?")}
function h(e){
	e.processData&&e.data&&"string"!=t.type(e.data)&&(e.data=t.param(e.data,e.traditional)),!e.data||e.type&&"GET"!=e.type.toUpperCase()||(e.url=f(e.url,e.data),e.data=void 0)}
function p(e,n,i,r){
	return t.isFunction(n)&&(r=i,i=n,n=void 0),t.isFunction(i)||(r=i,i=void 0),{
	url:e,data:n,success:i,dataType:r}
}
function d(e,n,i,r){
	var o,a=t.isArray(n),s=t.isPlainObject(n);
	t.each(n,function(n,u){
	o=t.type(u),r&&(n=i?r:r+"["+(s||"object"==o||"array"==o?n:"")+"]"),!r&&a?e.add(u.name,u.value):"array"==o||!i&&"object"==o?d(e,u,i,n):e.add(n,u)}
)}
var m,g,v=0,y=window.document,x=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,w=/^(?:text|application)\/javascript/i,b=/^(?:text|application)\/xml/i,T="application/json",E="text/html",j=/^\s*$/;
	t.active=0,t.ajaxJSONP=function(e,n){
	if(!("type"in e))return t.ajax(e);
	var i,r,u=e.jsonpCallback,c=(t.isFunction(u)?u():u)||"jsonp"+ ++v,l=y.createElement("script"),f=window[c],h=function(e){
	t(l).triggerHandler("error",e||"abort")}
,p={
	abort:h}
;
	return n&&n.promise(p),t(l).on("load error",function(o,u){
	clearTimeout(r),t(l).off().remove(),"error"!=o.type&&i?a(i[0],p,e,n):s(null,u||"error",p,e,n),window[c]=f,i&&t.isFunction(f)&&f(i[0]),f=i=void 0}
),o(p,e)===!1?(h("abort"),p):(window[c]=function(){
	i=arguments}
,l.src=e.url.replace(/\?(.+)=\?/,"?$1="+c),y.head.appendChild(l),e.timeout>0&&(r=setTimeout(function(){
	h("timeout")}
,e.timeout)),p)}
,t.ajaxSettings={
	type:"GET",beforeSend:c,success:c,error:c,complete:c,context:null,global:!0,xhr:function(){
	return new window.XMLHttpRequest}
,accepts:{
	script:"text/javascript,application/javascript,application/x-javascript",json:T,xml:"application/xml,text/xml",html:E,text:"text/plain"}
,crossDomain:!1,timeout:0,processData:!0,cache:!0}
,t.ajax=function(e){
	var n=t.extend({
}
,e||{
}
),r=t.Deferred&&t.Deferred();
	for(m in t.ajaxSettings)void 0===n[m]&&(n[m]=t.ajaxSettings[m]);
	i(n),n.crossDomain||(n.crossDomain=/^([\w-]+:)?\/\/([^\/]+)/.test(n.url)&&RegExp.$2!=window.location.host),n.url||(n.url=""+window.location),h(n),n.cache===!1&&(n.url=f(n.url,"_="+Date.now()));
	var u=n.dataType,p=/\?.+=\?/.test(n.url);
	if("jsonp"==u||p)return p||(n.url=f(n.url,n.jsonp?n.jsonp+"=?":n.jsonp===!1?"":"callback=?")),t.ajaxJSONP(n,r);
	var d,v=n.accepts[u],y={
}
,x=function(t,e){
	y[t.toLowerCase()]=[t,e]}
,w=/^([\w-]+:)\/\//.test(n.url)?RegExp.$1:window.location.protocol,b=n.xhr(),T=b.setRequestHeader;
	if(r&&r.promise(b),n.crossDomain||x("X-Requested-With","XMLHttpRequest"),x("Accept",v||"*/
*"),(v=n.mimeType||v)&&(v.indexOf(",")>-1&&(v=v.split(",",2)[0]),b.overrideMimeType&&b.overrideMimeType(v)),(n.contentType||n.contentType!==!1&&n.data&&"GET"!=n.type.toUpperCase())&&x("Content-Type",n.contentType||"application/x-www-form-urlencoded"),n.headers)for(g in n.headers)x(g,n.headers[g]);
	if(b.setRequestHeader=x,b.onreadystatechange=function(){
	if(4==b.readyState){
	b.onreadystatechange=c,clearTimeout(d);
	var e,i=!1;
	if(b.status>=200&&300>b.status||304==b.status||0==b.status&&"file:"==w){
	u=u||l(n.mimeType||b.getResponseHeader("content-type")),e=b.responseText;
	try{
	"script"==u?(1,eval)(e):"xml"==u?e=b.responseXML:"json"==u&&(e=j.test(e)?null:t.parseJSON(e))}
catch(o){
	i=o}
i?s(i,"parsererror",b,n,r):a(e,b,n,r)}
else s(b.statusText||null,b.status?"error":"abort",b,n,r)}
}
,o(b,n)===!1)return b.abort(),s(null,"abort",b,n,r),b;
	if(n.xhrFields)for(g in n.xhrFields)b[g]=n.xhrFields[g];
	var E="async"in n?n.async:!0;
	b.open(n.type,n.url,E,n.username,n.password);
	for(g in y)T.apply(b,y[g]);
	return n.timeout>0&&(d=setTimeout(function(){
	b.onreadystatechange=c,b.abort(),s(null,"timeout",b,n,r)}
,n.timeout)),b.send(n.data?n.data:null),b}
,t.get=function(){
	return t.ajax(p.apply(null,arguments))}
,t.post=function(){
	var e=p.apply(null,arguments);
	return e.type="POST",t.ajax(e)}
,t.getJSON=function(){
	var e=p.apply(null,arguments);
	return e.dataType="json",t.ajax(e)}
,t.fn.load=function(e,n,i){
	if(!this.length)return this;
	var r,o=this,a=e.split(/\s/),s=p(e,n,i),u=s.success;
	return a.length>1&&(s.url=a[0],r=a[1]),s.success=function(e){
	o.html(r?t("<div>").html(e.replace(x,"")).find(r):e),u&&u.apply(o,arguments)}
,t.ajax(s),this}
;
	var S=encodeURIComponent;
	t.param=function(t,e){
	var n=[];
	return n.add=function(t,e){
	this.push(S(t)+"="+S(e))}
,d(n,t,e),n.join("&").replace(/%20/g,"+")}
}
(Zepto),function(t){
	function e(t){
	return t._zid||(t._zid=h++)}
function n(t,n,o,a){
	if(n=i(n),n.ns)var s=r(n.ns);
	return(g[e(t)]||[]).filter(function(t){
	return!(!t||n.e&&t.e!=n.e||n.ns&&!s.test(t.ns)||o&&e(t.fn)!==e(o)||a&&t.sel!=a)}
)}
function i(t){
	var e=(""+t).split(".");
	return{
	e:e[0],ns:e.slice(1).sort().join(" ")}
}
function r(t){
	return RegExp("(?:^| )"+t.replace(" "," .* ?")+"(?:|$)")}
function o(t,e){
	return t.del&&!y&&t.e in x||!!e}
function a(t){
	return w[t]||y&&x[t]||t}
function s(n,r,s,u,l,h,p){
	var d=e(n),m=g[d]||(g[d]=[]);
	r.split(/\s/).forEach(function(e){
	if("ready"==e)return t(document).ready(s);
	var r=i(e);
	r.fn=s,r.sel=l,r.e in w&&(s=function(e){
	var n=e.relatedTarget;
	return!n||n!==this&&!t.contains(this,n)?r.fn.apply(this,arguments):f}
),r.del=h;
	var d=h||s;
	r.proxy=function(t){
	if(t=c(t),!t.isImmediatePropagationStopped()){
	t.data=u;
	var e=d.apply(n,t._args==f?[t]:[t].concat(t._args));
	return e===!1&&(t.preventDefault(),t.stopPropagation()),e}
}
,r.i=m.length,m.push(r),"addEventListener"in n&&n.addEventListener(a(r.e),r.proxy,o(r,p))}
)}
function u(t,i,r,s,u){
	var c=e(t);
	(i||"").split(/\s/).forEach(function(e){
	n(t,e,r,s).forEach(function(e){
	delete g[c][e.i],"removeEventListener"in t&&t.removeEventListener(a(e.e),e.proxy,o(e,u))}
)}
)}
function c(e,n){
	return(n||!e.isDefaultPrevented)&&(n||(n=e),t.each(j,function(t,i){
	var r=n[t];
	e[t]=function(){
	return this[i]=b,r&&r.apply(n,arguments)}
,e[i]=T}
),(n.defaultPrevented!==f?n.defaultPrevented:"returnValue"in n?n.returnValue===!1:n.getPreventDefault&&n.getPreventDefault())&&(e.isDefaultPrevented=b)),e}
function l(t){
	var e,n={
	originalEvent:t}
;
	for(e in t)E.test(e)||t[e]===f||(n[e]=t[e]);
	return c(n,t)}
var f,h=1,p=Array.prototype.slice,d=t.isFunction,m=function(t){
	return"string"==typeof t}
,g={
}
,v={
}
,y="onfocusin"in window,x={
	focus:"focusin",blur:"focusout"}
,w={
	mouseenter:"mouseover",mouseleave:"mouseout"}
;
	v.click=v.mousedown=v.mouseup=v.mousemove="MouseEvents",t.event={
	add:s,remove:u}
,t.proxy=function(n,i){
	if(d(n)){
	var r=function(){
	return n.apply(i,arguments)}
;
	return r._zid=e(n),r}
if(m(i))return t.proxy(n[i],n);
	throw new TypeError("expected function")}
,t.fn.bind=function(t,e,n){
	return this.on(t,e,n)}
,t.fn.unbind=function(t,e){
	return this.off(t,e)}
,t.fn.one=function(t,e,n,i){
	return this.on(t,e,n,i,1)}
;
	var b=function(){
	return!0}
,T=function(){
	return!1}
,E=/^([A-Z]|returnValue$|layer[XY]$)/,j={
	preventDefault:"isDefaultPrevented",stopImmediatePropagation:"isImmediatePropagationStopped",stopPropagation:"isPropagationStopped"}
;
	t.fn.delegate=function(t,e,n){
	return this.on(e,t,n)}
,t.fn.undelegate=function(t,e,n){
	return this.off(e,t,n)}
,t.fn.live=function(e,n){
	return t(document.body).delegate(this.selector,e,n),this}
,t.fn.die=function(e,n){
	return t(document.body).undelegate(this.selector,e,n),this}
,t.fn.on=function(e,n,i,r,o){
	var a,c,h=this;
	return e&&!m(e)?(t.each(e,function(t,e){
	h.on(t,n,i,e,o)}
),h):(m(n)||d(r)||r===!1||(r=i,i=n,n=f),(d(i)||i===!1)&&(r=i,i=f),r===!1&&(r=T),h.each(function(h,d){
	o&&(a=function(t){
	return u(d,t.type,r),r.apply(this,arguments)}
),n&&(c=function(e){
	var i,o=t(e.target).closest(n,d).get(0);
	return o&&o!==d?(i=t.extend(l(e),{
	currentTarget:o,liveFired:d}
),(a||r).apply(o,[i].concat(p.call(arguments,1)))):f}
),s(d,e,r,i,n,c||a)}
))}
,t.fn.off=function(e,n,i){
	var r=this;
	return e&&!m(e)?(t.each(e,function(t,e){
	r.off(t,n,e)}
),r):(m(n)||d(i)||i===!1||(i=n,n=f),i===!1&&(i=T),r.each(function(){
	u(this,e,i,n)}
))}
,t.fn.trigger=function(e,n){
	return e=m(e)||t.isPlainObject(e)?t.Event(e):c(e),e._args=n,this.each(function(){
	"dispatchEvent"in this?this.dispatchEvent(e):t(this).triggerHandler(e,n)}
)}
,t.fn.triggerHandler=function(e,i){
	var r,o;
	return this.each(function(a,s){
	r=l(m(e)?t.Event(e):e),r._args=i,r.target=s,t.each(n(s,e.type||e),function(t,e){
	return o=e.proxy(r),r.isImmediatePropagationStopped()?!1:f}
)}
),o}
,"focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select keydown keypress keyup error".split(" ").forEach(function(e){
	t.fn[e]=function(t){
	return t?this.bind(e,t):this.trigger(e)}
}
),["focus","blur"].forEach(function(e){
	t.fn[e]=function(t){
	return t?this.bind(e,t):this.each(function(){
	try{
	this[e]()}
catch(t){
}
}
),this}
}
),t.Event=function(t,e){
	m(t)||(e=t,t=e.type);
	var n=document.createEvent(v[t]||"Events"),i=!0;
	if(e)for(var r in e)"bubbles"==r?i=!!e[r]:n[r]=e[r];
	return n.initEvent(t,i,!0),c(n)}
}
(Zepto),function(t){
	t.fn.serializeArray=function(){
	var e,n=[];
	return t([].slice.call(this.get(0).elements)).each(function(){
	e=t(this);
	var i=e.attr("type");
	"fieldset"!=this.nodeName.toLowerCase()&&!this.disabled&&"submit"!=i&&"reset"!=i&&"button"!=i&&("radio"!=i&&"checkbox"!=i||this.checked)&&n.push({
	name:e.attr("name"),value:e.val()}
)}
),n}
,t.fn.serialize=function(){
	var t=[];
	return this.serializeArray().forEach(function(e){
	t.push(encodeURIComponent(e.name)+"="+encodeURIComponent(e.value))}
),t.join("&")}
,t.fn.submit=function(e){
	if(e)this.bind("submit",e);
	else if(this.length){
	var n=t.Event("submit");
	this.eq(0).trigger(n),n.isDefaultPrevented()||this.get(0).submit()}
return this}
}
(Zepto),function(t,e){
	function n(t){
	return t.replace(/([a-z])([A-Z])/,"$1-$2").toLowerCase()}
function i(t){
	return r?r+t:t.toLowerCase()}
var r,o,a,s,u,c,l,f,h,p,d="",m={
	Webkit:"webkit",Moz:"",O:"o"}
,g=window.document,v=g.createElement("div"),y=/^((translate|rotate|scale)(X|Y|Z|3d)?|matrix(3d)?|perspective|skew(X|Y)?)$/i,x={
}
;
	t.each(m,function(t,n){
	return v.style[t+"TransitionProperty"]!==e?(d="-"+t.toLowerCase()+"-",r=n,!1):e}
),o=d+"transform",x[a=d+"transition-property"]=x[s=d+"transition-duration"]=x[c=d+"transition-delay"]=x[u=d+"transition-timing-function"]=x[l=d+"animation-name"]=x[f=d+"animation-duration"]=x[p=d+"animation-delay"]=x[h=d+"animation-timing-function"]="",t.fx={
	off:r===e&&v.style.transitionProperty===e,speeds:{
	_default:400,fast:200,slow:600}
,cssPrefix:d,transitionEnd:i("TransitionEnd"),animationEnd:i("AnimationEnd")}
,t.fn.animate=function(n,i,r,o,a){
	return t.isFunction(i)&&(o=i,r=e,i=e),t.isFunction(r)&&(o=r,r=e),t.isPlainObject(i)&&(r=i.easing,o=i.complete,a=i.delay,i=i.duration),i&&(i=("number"==typeof i?i:t.fx.speeds[i]||t.fx.speeds._default)/1e3),a&&(a=parseFloat(a)/1e3),this.anim(n,i,r,o,a)}
,t.fn.anim=function(i,r,d,m,g){
	var v,w,b,T={
}
,E="",j=this,S=t.fx.transitionEnd,C=!1;
	if(r===e&&(r=t.fx.speeds._default/1e3),g===e&&(g=0),t.fx.off&&(r=0),"string"==typeof i)T[l]=i,T[f]=r+"s",T[p]=g+"s",T[h]=d||"linear",S=t.fx.animationEnd;
	else{
	w=[];
	for(v in i)y.test(v)?E+=v+"("+i[v]+") ":(T[v]=i[v],w.push(n(v)));
	E&&(T[o]=E,w.push(o)),r>0&&"object"==typeof i&&(T[a]=w.join(","),T[s]=r+"s",T[c]=g+"s",T[u]=d||"linear")}
return b=function(n){
	if(n!==e){
	if(n.target!==n.currentTarget)return;
	t(n.target).unbind(S,b)}
else t(this).unbind(S,b);
	C=!0,t(this).css(x),m&&m.call(this)}
,r>0&&(this.bind(S,b),setTimeout(function(){
	C||b.call(j)}
,1e3*r+25)),this.size()&&this.get(0).clientLeft,this.css(T),0>=r&&setTimeout(function(){
	j.each(function(){
	b.call(this)}
)}
,0),this}
,v=null}
(Zepto),function(t,e){
	function n(n,i,r,o,a){
	"function"!=typeof i||a||(a=i,i=e);
	var s={
	opacity:r}
;
	return o&&(s.scale=o,n.css(t.fx.cssPrefix+"transform-origin","0 0")),n.animate(s,i,null,a)}
function i(e,i,r,o){
	return n(e,i,0,r,function(){
	a.call(t(this)),o&&o.call(this)}
)}
var r=window.document,o=(r.documentElement,t.fn.show),a=t.fn.hide,s=t.fn.toggle;
	t.fn.show=function(t,i){
	return o.call(this),t===e?t=0:this.css("opacity",0),n(this,t,1,"1,1",i)}
,t.fn.hide=function(t,n){
	return t===e?a.call(this):i(this,t,"0,0",n)}
,t.fn.toggle=function(n,i){
	return n===e||"boolean"==typeof n?s.call(this,n):this.each(function(){
	var e=t(this);
	e["none"==e.css("display")?"show":"hide"](n,i)}
)}
,t.fn.fadeTo=function(t,e,i){
	return n(this,t,e,null,i)}
,t.fn.fadeIn=function(t,e){
	var n=this.css("opacity");
	return n>0?this.css("opacity",0):n=1,o.call(this).fadeTo(t,n,e)}
,t.fn.fadeOut=function(t,e){
	return i(this,t,null,e)}
,t.fn.fadeToggle=function(e,n){
	return this.each(function(){
	var i=t(this);
	i[0==i.css("opacity")||"none"==i.css("display")?"fadeIn":"fadeOut"](e,n)}
)}
}
(Zepto),function(t){
	"__proto__"in{
}
||t.extend(t.zepto,{
	Z:function(e,n){
	return e=e||[],t.extend(e,t.fn),e.selector=n||"",e.__Z=!0,e}
,isZ:function(e){
	return"array"===t.type(e)&&"__Z"in e}
}
);
	try{
	getComputedStyle(void 0)}
catch(e){
	var n=getComputedStyle;
	window.getComputedStyle=function(t){
	try{
	return n(t)}
catch(e){
	return null}
}
}
}
(Zepto),function(t){
	function e(t,e,n,i){
	return Math.abs(t-e)>=Math.abs(n-i)?t-e>0?"Left":"Right":n-i>0?"Up":"Down"}
function n(){
	l=null,h.last&&(h.el.trigger("longTap"),h={
}
)}
function i(){
	l&&clearTimeout(l),l=null}
function r(){
	s&&clearTimeout(s),u&&clearTimeout(u),c&&clearTimeout(c),l&&clearTimeout(l),s=u=c=l=null,h={
}
}
function o(t){
	return("touch"==t.pointerType||t.pointerType==t.MSPOINTER_TYPE_TOUCH)&&t.isPrimary}
function a(t,e){
	return t.type=="pointer"+e||t.type.toLowerCase()=="mspointer"+e}
var s,u,c,l,f,h={
}
,p=750;
	t(document).ready(function(){
	var d,m,g,v,y=0,x=0;
	"MSGesture"in window&&(f=new MSGesture,f.target=document.body),t(document).bind("MSGestureEnd",function(t){
	var e=t.velocityX>1?"Right":-1>t.velocityX?"Left":t.velocityY>1?"Down":-1>t.velocityY?"Up":null;
	e&&(h.el.trigger("swipe"),h.el.trigger("swipe"+e))}
).on("touchstart MSPointerDown pointerdown",function(e){
	(!(v=a(e,"down"))||o(e))&&(g=v?e:e.touches[0],e.touches&&1===e.touches.length&&h.x2&&(h.x2=void 0,h.y2=void 0),d=Date.now(),m=d-(h.last||d),h.el=t("tagName"in g.target?g.target:g.target.parentNode),s&&clearTimeout(s),h.x1=g.pageX,h.y1=g.pageY,m>0&&250>=m&&(h.isDoubleTap=!0),h.last=d,l=setTimeout(n,p),f&&v&&f.addPointer(e.pointerId))}
).on("touchmove MSPointerMove pointermove",function(t){
	(!(v=a(t,"move"))||o(t))&&(g=v?t:t.touches[0],i(),h.x2=g.pageX,h.y2=g.pageY,y+=Math.abs(h.x1-h.x2),x+=Math.abs(h.y1-h.y2))}
).on("touchend MSPointerUp pointerup",function(n){
	(!(v=a(n,"up"))||o(n))&&(i(),h.x2&&Math.abs(h.x1-h.x2)>30||h.y2&&Math.abs(h.y1-h.y2)>30?c=setTimeout(function(){
	h.el.trigger("swipe"),h.el.trigger("swipe"+e(h.x1,h.x2,h.y1,h.y2)),h={
}
}
,0):"last"in h&&(30>y&&30>x?u=setTimeout(function(){
	var e=t.Event("tap");
	e.cancelTouch=r,h.el.trigger(e),h.isDoubleTap?(h.el&&h.el.trigger("doubleTap"),h={
}
):s=setTimeout(function(){
	s=null,h.el&&h.el.trigger("singleTap"),h={
}
}
,250)}
,0):h={
}
),y=x=0)}
).on("touchcancel MSPointerCancel pointercancel",r),t(window).on("scroll",r)}
),["swipe","swipeLeft","swipeRight","swipeUp","swipeDown","doubleTap","tap","singleTap","longTap"].forEach(function(e){
	t.fn[e]=function(t){
	return this.on(e,t)}
}
)}
(Zepto);

CSS代码(jquery-rebox.css):

.rebox{cursor:pointer;position:fixed;width:100%;height:100%;top:0;left:0;z-index:1000;-webkit-filter:none !important;background:rgb(0,0,0);/* IE Fallback (Solid Colour) */
 background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAIElEQVQ4T2NkYGDYDMRkA8ZRAxhGw4BhNAyA+WAYpAMAIFgLQfO9BoEAAAAASUVORK5CYII=);background:rgba(0,0,0,0.7);}
.rebox *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;padding:0;margin:0;}
.rebox-contents{position:absolute;top:5%;left:5%;text-align:center;width:90%;height:90%;}
.rebox-contents .rebox-content{border:5px solid #fff;box-shadow:0 0 20px #000;border-radius:1px;max-width:100%;max-height:100%;}
.rebox-loading{width:31px;height:31px;margin:-16px 0 0 -16px;position:absolute;top:48%;left:50%;}
.rebox-caption{display:none;position:absolute;left:0;bottom:0;width:100%;text-align:center;z-index:1000;background:#000;background:rgba(0,0,0,0.7);}
.rebox-caption p{margin:0 auto;max-width:70%;display:inline-block;*display:inline;*zoom:1;padding:10px;color:#fff;font-size:12px;line-height:18px;}
.rebox-button{position:absolute;z-index:9999;min-width:40px;height:40px;line-height:40px;background:rgb(0,0,0);opacity:0.4;text-decoration:none;font-size:24px;color:#fff;text-align:center;vertical-align:middle;-webkit-border-radius:32px;-moz-border-radius:32px;-ms-border-radius:32px;border-radius:32px;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s;}
.rebox-button:hover,.rebox-button:focus{opacity:1;-webkit-transform:scale(1.4);-moz-transform:scale(1.4);-ms-transform:scale(1.4);transform:scale(1.4);}
.rebox-close{right:10px;top:10px;}
.rebox-next{right:10px;top:48%;}
.rebox-prev{left:10px;top:48%;}
.rebox-loading{left:50%;top:48%;-webkit-animation-name:spin;-webkit-animation-duration:2000ms;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-moz-animation-name:spin;-moz-animation-duration:2000ms;-moz-animation-iteration-count:infinite;-moz-animation-timing-function:linear;-ms-animation-name:spin;-ms-animation-duration:2000ms;-ms-animation-iteration-count:infinite;-ms-animation-timing-function:linear;animation-name:spin;animation-duration:2000ms;animation-iteration-count:infinite;animation-timing-function:linear;}
@-ms-keyframes spin{from{-ms-transform:rotate(0deg);}
to{-ms-transform:rotate(360deg);}
}
@-moz-keyframes spin{from{-moz-transform:rotate(0deg);}
to{-moz-transform:rotate(360deg);}
}
@-webkit-keyframes spin{from{-webkit-transform:rotate(0deg);}
to{-webkit-transform:rotate(360deg);}
}
@keyframes spin{from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}

附件:下载该文件资源,减少时间成本(增值服务)