").html(a.replace(rscript,"")).find(f):a),h&&h.apply(d,arguments)},$.ajax(g),this};var escape=encodeURIComponent;$.param=function(a,b){var c=[];return c.add=function(a,b){this.push(escape(a)+"="+escape(b))},serialize(c,a,b),c.join("&").replace(/%20/g,"+")}}(Zepto),function(a){a.fn.serializeArray=function(){var b=[],c;return a(Array.prototype.slice.call(this.get(0).elements)).each(function(){c=a(this);var d=c.attr("type");this.nodeName.toLowerCase()!="fieldset"&&!this.disabled&&d!="submit"&&d!="reset"&&d!="button"&&(d!="radio"&&d!="checkbox"||this.checked)&&b.push({name:c.attr("name"),value:c.val()})}),b},a.fn.serialize=function(){var a=[];return this.serializeArray().forEach(function(b){a.push(encodeURIComponent(b.name)+"="+encodeURIComponent(b.value))}),a.join("&")},a.fn.submit=function(b){if(b)this.bind("submit",b);else if(this.length){var c=a.Event("submit");this.eq(0).trigger(c),c.defaultPrevented||this.get(0).submit()}return this}}(Zepto),function(a,b){function s(a){return t(a.replace(/([a-z])([A-Z])/,"$1-$2"))}function t(a){return a.toLowerCase()}function u(a){return d?d+a:t(a)}var c="",d,e,f,g={Webkit:"webkit",Moz:"",O:"o",ms:"MS"},h=window.document,i=h.createElement("div"),j=/^((translate|rotate|scale)(X|Y|Z|3d)?|matrix(3d)?|perspective|skew(X|Y)?)$/i,k,l,m,n,o,p,q,r={};a.each(g,function(a,e){if(i.style[a+"TransitionProperty"]!==b)return c="-"+t(a)+"-",d=e,!1}),k=c+"transform",r[l=c+"transition-property"]=r[m=c+"transition-duration"]=r[n=c+"transition-timing-function"]=r[o=c+"animation-name"]=r[p=c+"animation-duration"]=r[q=c+"animation-timing-function"]="",a.fx={off:d===b&&i.style.transitionProperty===b,speeds:{_default:400,fast:200,slow:600},cssPrefix:c,transitionEnd:u("TransitionEnd"),animationEnd:u("AnimationEnd")},a.fn.animate=function(b,c,d,e){return a.isPlainObject(c)&&(d=c.easing,e=c.complete,c=c.duration),c&&(c=(typeof c=="number"?c:a.fx.speeds[c]||a.fx.speeds._default)/1e3),this.anim(b,c,d,e)},a.fn.anim=function(c,d,e,f){var g,h={},i,t="",u=this,v,w=a.fx.transitionEnd;d===b&&(d=.4),a.fx.off&&(d=0);if(typeof c=="string")h[o]=c,h[p]=d+"s",h[q]=e||"linear",w=a.fx.animationEnd;else{i=[];for(g in c)j.test(g)?t+=g+"("+c[g]+") ":(h[g]=c[g],i.push(s(g)));t&&(h[k]=t,i.push(k)),d>0&&typeof c=="object"&&(h[l]=i.join(", "),h[m]=d+"s",h[n]=e||"linear")}return v=function(b){if(typeof b!="undefined"){if(b.target!==b.currentTarget)return;a(b.target).unbind(w,v)}a(this).css(r),f&&f.call(this)},d>0&&this.bind(w,v),this.size()&&this.get(0).clientLeft,this.css(h),d<=0&&setTimeout(function(){u.each(function(){v.call(this)})},0),this},i=null}(Zepto) 3 | 4 | // Zepto.js 5 | // (c) 2010-2012 Thomas Fuchs 6 | // Zepto.js may be freely distributed under the MIT license. 7 | 8 | // The following code is heavily inspired by jQuery's $.fn.data() 9 | 10 | ;(function($) { 11 | var data = {}, dataAttr = $.fn.data, camelize = $.camelCase, 12 | exp = $.expando = 'Zepto' + (+new Date()) 13 | 14 | // Get value from node: 15 | // 1. first try key as given, 16 | // 2. then try camelized key, 17 | // 3. fall back to reading "data-*" attribute. 18 | function getData(node, name) { 19 | var id = node[exp], store = id && data[id] 20 | if (name === undefined) return store || setData(node) 21 | else { 22 | if (store) { 23 | if (name in store) return store[name] 24 | var camelName = camelize(name) 25 | if (camelName in store) return store[camelName] 26 | } 27 | return dataAttr.call($(node), name) 28 | } 29 | } 30 | 31 | // Store value under camelized key on node 32 | function setData(node, name, value) { 33 | var id = node[exp] || (node[exp] = ++$.uuid), 34 | store = data[id] || (data[id] = attributeData(node)) 35 | if (name !== undefined) store[camelize(name)] = value 36 | return store 37 | } 38 | 39 | // Read all "data-*" attributes from a node 40 | function attributeData(node) { 41 | var store = {} 42 | $.each(node.attributes, function(i, attr){ 43 | if (attr.name.indexOf('data-') == 0) 44 | store[camelize(attr.name.replace('data-', ''))] = 45 | $.zepto.deserializeValue(attr.value) 46 | }) 47 | return store 48 | } 49 | 50 | $.fn.data = function(name, value) { 51 | return value === undefined ? 52 | // set multiple values via object 53 | $.isPlainObject(name) ? 54 | this.each(function(i, node){ 55 | $.each(name, function(key, value){ setData(node, key, value) }) 56 | }) : 57 | // get value from first element 58 | this.length == 0 ? undefined : getData(this[0], name) : 59 | // set value on all elements 60 | this.each(function(){ setData(this, name, value) }) 61 | } 62 | 63 | $.fn.removeData = function(names) { 64 | if (typeof names == 'string') names = names.split(/\s+/) 65 | return this.each(function(){ 66 | var id = this[exp], store = id && data[id] 67 | if (store) $.each(names, function(){ delete store[camelize(this)] }) 68 | }) 69 | } 70 | })(Zepto) -------------------------------------------------------------------------------- /demo/lib/zepto.min.js: -------------------------------------------------------------------------------- 1 | /* Zepto v1.0rc1 - polyfill zepto event detect fx ajax form touch - zeptojs.com/license */ 2 | (function(a){String.prototype.trim===a&&(String.prototype.trim=function(){return this.replace(/^\s+/,"").replace(/\s+$/,"")}),Array.prototype.reduce===a&&(Array.prototype.reduce=function(b){if(this===void 0||this===null)throw new TypeError;var c=Object(this),d=c.length>>>0,e=0,f;if(typeof b!="function")throw new TypeError;if(d==0&&arguments.length==1)throw new TypeError;if(arguments.length>=2)f=arguments[1];else do{if(e in c){f=c[e++];break}if(++e>=d)throw new TypeError}while(!0);while(e0?[].concat.apply([],a):a}function H(a){return a.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 I(a){return a in i?i[a]:i[a]=new RegExp("(^|\\s)"+a+"(\\s|$)")}function J(a,b){return typeof b=="number"&&!k[H(a)]?b+"px":b}function K(a){var b,c;return h[a]||(b=g.createElement(a),g.body.appendChild(b),c=j(b,"").getPropertyValue("display"),b.parentNode.removeChild(b),c=="none"&&(c="block"),h[a]=c),h[a]}function L(b,d){return d===a?c(b):c(b).filter(d)}function M(a,b,c,d){return A(b)?b.call(a,c,d):b}function N(a,b,d){var e=a%2?b:b.parentNode;e?e.insertBefore(d,a?a==1?e.firstChild:a==2?b:null:b.nextSibling):c(d).remove()}function O(a,b){b(a);for(var c in a.childNodes)O(a.childNodes[c],b)}var a,b,c,d,e=[],f=e.slice,g=window.document,h={},i={},j=g.defaultView.getComputedStyle,k={"column-count":1,columns:1,"font-weight":1,"line-height":1,opacity:1,"z-index":1,zoom:1},l=/^\s*<(\w+|!)[^>]*>/,m=[1,3,8,9,11],n=["after","prepend","before","append"],o=g.createElement("table"),p=g.createElement("tr"),q={tr:g.createElement("tbody"),tbody:o,thead:o,tfoot:o,td:p,th:p,"*":g.createElement("div")},r=/complete|loaded|interactive/,s=/^\.([\w-]+)$/,t=/^#([\w-]+)$/,u=/^[\w-]+$/,v={}.toString,w={},x,y,z=g.createElement("div");return w.matches=function(a,b){if(!a||a.nodeType!==1)return!1;var c=a.webkitMatchesSelector||a.mozMatchesSelector||a.oMatchesSelector||a.matchesSelector;if(c)return c.call(a,b);var d,e=a.parentNode,f=!e;return f&&(e=z).appendChild(a),d=~w.qsa(e,b).indexOf(a),f&&z.removeChild(a),d},x=function(a){return a.replace(/-+(.)?/g,function(a,b){return b?b.toUpperCase():""})},y=function(a){return a.filter(function(b,c){return a.indexOf(b)==c})},w.fragment=function(b,d){d===a&&(d=l.test(b)&&RegExp.$1),d in q||(d="*");var e=q[d];return e.innerHTML=""+b,c.each(f.call(e.childNodes),function(){e.removeChild(this)})},w.Z=function(a,b){return a=a||[],a.__proto__=arguments.callee.prototype,a.selector=b||"",a},w.isZ=function(a){return a instanceof w.Z},w.init=function(b,d){if(!b)return w.Z();if(A(b))return c(g).ready(b);if(w.isZ(b))return b;var e;if(D(b))e=F(b);else if(C(b))e=[c.extend({},b)],b=null;else if(m.indexOf(b.nodeType)>=0||b===window)e=[b],b=null;else if(l.test(b))e=w.fragment(b.trim(),RegExp.$1),b=null;else{if(d!==a)return c(d).find(b);e=w.qsa(g,b)}return w.Z(e,b)},c=function(a,b){return w.init(a,b)},c.extend=function(c){return f.call(arguments,1).forEach(function(d){for(b in d)d[b]!==a&&(c[b]=d[b])}),c},w.qsa=function(a,b){var c;return a===g&&t.test(b)?(c=a.getElementById(RegExp.$1))?[c]:e:a.nodeType!==1&&a.nodeType!==9?e:f.call(s.test(b)?a.getElementsByClassName(RegExp.$1):u.test(b)?a.getElementsByTagName(b):a.querySelectorAll(b))},c.isFunction=A,c.isObject=B,c.isArray=D,c.isPlainObject=C,c.inArray=function(a,b,c){return e.indexOf.call(b,a,c)},c.trim=function(a){return a.trim()},c.uuid=0,c.map=function(a,b){var c,d=[],e,f;if(E(a))for(e=0;e0&&w.matches(this[0],a)},not:function(b){var d=[];if(A(b)&&b.call!==a)this.each(function(a){b.call(this,a)||d.push(this)});else{var e=typeof b=="string"?this.filter(b):E(b)&&A(b.item)?f.call(b):c(b);this.forEach(function(a){e.indexOf(a)<0&&d.push(a)})}return c(d)},eq:function(a){return a===-1?this.slice(a):this.slice(a,+a+1)},first:function(){var a=this[0];return a&&!B(a)?a:c(a)},last:function(){var a=this[this.length-1];return a&&!B(a)?a:c(a)},find:function(a){var b;return this.length==1?b=w.qsa(this[0],a):b=this.map(function(){return w.qsa(this,a)}),c(b)},closest:function(a,b){var d=this[0];while(d&&!w.matches(d,a))d=d!==b&&d!==g&&d.parentNode;return c(d)},parents:function(a){var b=[],d=this;while(d.length>0)d=c.map(d,function(a){if((a=a.parentNode)&&a!==g&&b.indexOf(a)<0)return b.push(a),a});return L(b,a)},parent:function(a){return L(y(this.pluck("parentNode")),a)},children:function(a){return L(this.map(function(){return f.call(this.children)}),a)},siblings:function(a){return L(this.map(function(a,b){return f.call(b.parentNode.children).filter(function(a){return a!==b})}),a)},empty:function(){return this.each(function(){this.innerHTML=""})},pluck:function(a){return this.map(function(){return this[a]})},show:function(){return this.each(function(){this.style.display=="none"&&(this.style.display=null),j(this,"").getPropertyValue("display")=="none"&&(this.style.display=K(this.nodeName))})},replaceWith:function(a){return this.before(a).remove()},wrap:function(a){return this.each(function(){c(this).wrapAll(c(a)[0].cloneNode(!1))})},wrapAll:function(a){return this[0]&&(c(this[0]).before(a=c(a)),a.append(this)),this},unwrap:function(){return this.parent().each(function(){c(this).replaceWith(c(this).children())}),this},clone:function(){return c(this.map(function(){return this.cloneNode(!0)}))},hide:function(){return this.css("display","none")},toggle:function(b){return(b===a?this.css("display")=="none":b)?this.show():this.hide()},prev:function(){return c(this.pluck("previousElementSibling"))},next:function(){return c(this.pluck("nextElementSibling"))},html:function(b){return b===a?this.length>0?this[0].innerHTML:null:this.each(function(a){var d=this.innerHTML;c(this).empty().append(M(this,b,a,d))})},text:function(b){return b===a?this.length>0?this[0].textContent:null:this.each(function(){this.textContent=b})},attr:function(c,d){var e;return typeof c=="string"&&d===a?this.length==0||this[0].nodeType!==1?a:c=="value"&&this[0].nodeName=="INPUT"?this.val():!(e=this[0].getAttribute(c))&&c in this[0]?this[0][c]:e:this.each(function(a){if(this.nodeType!==1)return;if(B(c))for(b in c)this.setAttribute(b,c[b]);else this.setAttribute(c,M(this,d,a,this.getAttribute(c)))})},removeAttr:function(a){return this.each(function(){this.nodeType===1&&this.removeAttribute(a)})},prop:function(b,c){return c===a?this[0]?this[0][b]:a:this.each(function(a){this[b]=M(this,c,a,this[b])})},data:function(b,c){var d=this.attr("data-"+H(b),c);return d!==null?d:a},val:function(b){return b===a?this.length>0?this[0].value:a:this.each(function(a){this.value=M(this,b,a,this.value)})},offset:function(){if(this.length==0)return null;var a=this[0].getBoundingClientRect();return{left:a.left+window.pageXOffset,top:a.top+window.pageYOffset,width:a.width,height:a.height}},css:function(c,d){if(d===a&&typeof c=="string")return this.length==0?a:this[0].style[x(c)]||j(this[0],"").getPropertyValue(c);var e="";for(b in c)typeof c[b]=="string"&&c[b]==""?this.each(function(){this.style.removeProperty(H(b))}):e+=H(b)+":"+J(b,c[b])+";";return typeof c=="string"&&(d==""?this.each(function(){this.style.removeProperty(H(c))}):e=H(c)+":"+J(c,d)),this.each(function(){this.style.cssText+=";"+e})},index:function(a){return a?this.indexOf(c(a)[0]):this.parent().children().indexOf(this[0])},hasClass:function(a){return this.length<1?!1:I(a).test(this[0].className)},addClass:function(a){return this.each(function(b){d=[];var e=this.className,f=M(this,a,b,e);f.split(/\s+/g).forEach(function(a){c(this).hasClass(a)||d.push(a)},this),d.length&&(this.className+=(e?" ":"")+d.join(" "))})},removeClass:function(b){return this.each(function(c){if(b===a)return this.className="";d=this.className,M(this,b,c,d).split(/\s+/g).forEach(function(a){d=d.replace(I(a)," ")}),this.className=d.trim()})},toggleClass:function(b,d){return this.each(function(e){var f=M(this,b,e,this.className);(d===a?!c(this).hasClass(f):d)?c(this).addClass(f):c(this).removeClass(f)})}},["width","height"].forEach(function(b){c.fn[b]=function(d){var e,f=b.replace(/./,function(a){return a[0].toUpperCase()});return d===a?this[0]==window?window["inner"+f]:this[0]==g?g.documentElement["offset"+f]:(e=this.offset())&&e[b]:this.each(function(a){var e=c(this);e.css(b,M(this,d,a,e[b]()))})}}),n.forEach(function(a,b){c.fn[a]=function(){var a=c.map(arguments,function(a){return B(a)?a:w.fragment(a)});if(a.length<1)return this;var d=this.length,e=d>1,f=b<2;return this.each(function(c,g){for(var h=0;h0&&this.bind(o,n),setTimeout(function(){m.css(i),e<=0&&setTimeout(function(){m.each(function(){n.call(this)})},0)},0),this},i=null}(Zepto),function($){function triggerAndReturn(a,b,c){var d=$.Event(b);return $(a).trigger(d,c),!d.defaultPrevented}function triggerGlobal(a,b,c,d){if(a.global)return triggerAndReturn(b||document,c,d)}function ajaxStart(a){a.global&&$.active++===0&&triggerGlobal(a,null,"ajaxStart")}function ajaxStop(a){a.global&&!--$.active&&triggerGlobal(a,null,"ajaxStop")}function ajaxBeforeSend(a,b){var c=b.context;if(b.beforeSend.call(c,a,b)===!1||triggerGlobal(b,c,"ajaxBeforeSend",[a,b])===!1)return!1;triggerGlobal(b,c,"ajaxSend",[a,b])}function ajaxSuccess(a,b,c){var d=c.context,e="success";c.success.call(d,a,e,b),triggerGlobal(c,d,"ajaxSuccess",[b,c,a]),ajaxComplete(e,b,c)}function ajaxError(a,b,c,d){var e=d.context;d.error.call(e,c,b,a),triggerGlobal(d,e,"ajaxError",[c,d,a]),ajaxComplete(b,c,d)}function ajaxComplete(a,b,c){var d=c.context;c.complete.call(d,b,a),triggerGlobal(c,d,"ajaxComplete",[b,c]),ajaxStop(c)}function empty(){}function mimeToDataType(a){return a&&(a==htmlType?"html":a==jsonType?"json":scriptTypeRE.test(a)?"script":xmlTypeRE.test(a)&&"xml")||"text"}function appendQuery(a,b){return(a+"&"+b).replace(/[&?]{1,2}/,"?")}function serializeData(a){isObject(a.data)&&(a.data=$.param(a.data)),a.data&&(!a.type||a.type.toUpperCase()=="GET")&&(a.url=appendQuery(a.url,a.data))}function serialize(a,b,c,d){var e=$.isArray(b);$.each(b,function(b,f){d&&(b=c?d:d+"["+(e?"":b)+"]"),!d&&e?a.add(f.name,f.value):(c?$.isArray(f):isObject(f))?serialize(a,f,c,b):a.add(b,f)})}var jsonpID=0,isObject=$.isObject,document=window.document,key,name,rscript=/)<[^<]*)*<\/script>/gi,scriptTypeRE=/^(?:text|application)\/javascript/i,xmlTypeRE=/^(?:text|application)\/xml/i,jsonType="application/json",htmlType="text/html",blankRE=/^\s*$/;$.active=0,$.ajaxJSONP=function(a){var b="jsonp"+ ++jsonpID,c=document.createElement("script"),d=function(){$(c).remove(),b in window&&(window[b]=empty),ajaxComplete("abort",e,a)},e={abort:d},f;return a.error&&(c.onerror=function(){e.abort(),a.error()}),window[b]=function(d){clearTimeout(f),$(c).remove(),delete window[b],ajaxSuccess(d,e,a)},serializeData(a),c.src=a.url.replace(/=\?/,"="+b),$("head").append(c),a.timeout>0&&(f=setTimeout(function(){e.abort(),ajaxComplete("timeout",e,a)},a.timeout)),e},$.ajaxSettings={type:"GET",beforeSend:empty,success:empty,error:empty,complete:empty,context:null,global:!0,xhr:function(){return new window.XMLHttpRequest},accepts:{script:"text/javascript, application/javascript",json:jsonType,xml:"application/xml, text/xml",html:htmlType,text:"text/plain"},crossDomain:!1,timeout:0},$.ajax=function(options){var settings=$.extend({},options||{});for(key in $.ajaxSettings)settings[key]===undefined&&(settings[key]=$.ajaxSettings[key]);ajaxStart(settings),settings.crossDomain||(settings.crossDomain=/^([\w-]+:)?\/\/([^\/]+)/.test(settings.url)&&RegExp.$2!=window.location.host);var dataType=settings.dataType,hasPlaceholder=/=\?/.test(settings.url);if(dataType=="jsonp"||hasPlaceholder)return hasPlaceholder||(settings.url=appendQuery(settings.url,"callback=?")),$.ajaxJSONP(settings);settings.url||(settings.url=window.location.toString()),serializeData(settings);var mime=settings.accepts[dataType],baseHeaders={},protocol=/^([\w-]+:)\/\//.test(settings.url)?RegExp.$1:window.location.protocol,xhr=$.ajaxSettings.xhr(),abortTimeout;settings.crossDomain||(baseHeaders["X-Requested-With"]="XMLHttpRequest"),mime&&(baseHeaders.Accept=mime,mime.indexOf(",")>-1&&(mime=mime.split(",",2)[0]),xhr.overrideMimeType&&xhr.overrideMimeType(mime));if(settings.contentType||settings.data&&settings.type.toUpperCase()!="GET")baseHeaders["Content-Type"]=settings.contentType||"application/x-www-form-urlencoded";settings.headers=$.extend(baseHeaders,settings.headers||{}),xhr.onreadystatechange=function(){if(xhr.readyState==4){clearTimeout(abortTimeout);var result,error=!1;if(xhr.status>=200&&xhr.status<300||xhr.status==304||xhr.status==0&&protocol=="file:"){dataType=dataType||mimeToDataType(xhr.getResponseHeader("content-type")),result=xhr.responseText;try{dataType=="script"?(1,eval)(result):dataType=="xml"?result=xhr.responseXML:dataType=="json"&&(result=blankRE.test(result)?null:JSON.parse(result))}catch(e){error=e}error?ajaxError(error,"parsererror",xhr,settings):ajaxSuccess(result,xhr,settings)}else ajaxError(null,"error",xhr,settings)}};var async="async"in settings?settings.async:!0;xhr.open(settings.type,settings.url,async);for(name in settings.headers)xhr.setRequestHeader(name,settings.headers[name]);return ajaxBeforeSend(xhr,settings)===!1?(xhr.abort(),!1):(settings.timeout>0&&(abortTimeout=setTimeout(function(){xhr.onreadystatechange=empty,xhr.abort(),ajaxError(null,"timeout",xhr,settings)},settings.timeout)),xhr.send(settings.data?settings.data:null),xhr)},$.get=function(a,b){return $.ajax({url:a,success:b})},$.post=function(a,b,c,d){return $.isFunction(b)&&(d=d||c,c=b,b=null),$.ajax({type:"POST",url:a,data:b,success:c,dataType:d})},$.getJSON=function(a,b){return $.ajax({url:a,success:b,dataType:"json"})},$.fn.load=function(a,b){if(!this.length)return this;var c=this,d=a.split(/\s/),e;return d.length>1&&(a=d[0],e=d[1]),$.get(a,function(a){c.html(e?$(document.createElement("div")).html(a.replace(rscript,"")).find(e).html():a),b&&b.call(c)}),this};var escape=encodeURIComponent;$.param=function(a,b){var c=[];return c.add=function(a,b){this.push(escape(a)+"="+escape(b))},serialize(c,a,b),c.join("&").replace("%20","+")}}(Zepto),function(a){a.fn.serializeArray=function(){var b=[],c;return a(Array.prototype.slice.call(this.get(0).elements)).each(function(){c=a(this);var d=c.attr("type");this.nodeName.toLowerCase()!="fieldset"&&!this.disabled&&d!="submit"&&d!="reset"&&d!="button"&&(d!="radio"&&d!="checkbox"||this.checked)&&b.push({name:c.attr("name"),value:c.val()})}),b},a.fn.serialize=function(){var a=[];return this.serializeArray().forEach(function(b){a.push(encodeURIComponent(b.name)+"="+encodeURIComponent(b.value))}),a.join("&")},a.fn.submit=function(b){if(b)this.bind("submit",b);else if(this.length){var c=a.Event("submit");this.eq(0).trigger(c),c.defaultPrevented||this.get(0).submit()}return this}}(Zepto),function(a){function d(a){return"tagName"in a?a:a.parentNode}function e(a,b,c,d){var e=Math.abs(a-b),f=Math.abs(c-d);return e>=f?a-b>0?"Left":"Right":c-d>0?"Up":"Down"}function h(){g=null,b.last&&(b.el.trigger("longTap"),b={})}function i(){g&&clearTimeout(g),g=null}var b={},c,f=750,g;a(document).ready(function(){var j,k;a(document.body).bind("touchstart",function(e){j=Date.now(),k=j-(b.last||j),b.el=a(d(e.touches[0].target)),c&&clearTimeout(c),b.x1=e.touches[0].pageX,b.y1=e.touches[0].pageY,k>0&&k<=250&&(b.isDoubleTap=!0),b.last=j,g=setTimeout(h,f)}).bind("touchmove",function(a){i(),b.x2=a.touches[0].pageX,b.y2=a.touches[0].pageY}).bind("touchend",function(a){i(),b.isDoubleTap?(b.el.trigger("doubleTap"),b={}):b.x2&&Math.abs(b.x1-b.x2)>30||b.y2&&Math.abs(b.y1-b.y2)>30?(b.el.trigger("swipe")&&b.el.trigger("swipe"+e(b.x1,b.x2,b.y1,b.y2)),b={}):"last"in b&&(b.el.trigger("tap"),c=setTimeout(function(){c=null,b.el.trigger("singleTap"),b={}},250))}).bind("touchcancel",function(){c&&clearTimeout(c),g&&clearTimeout(g),g=c=null,b={}})}),["swipe","swipeLeft","swipeRight","swipeUp","swipeDown","doubleTap","tap","singleTap","longTap"].forEach(function(b){a.fn[b]=function(a){return this.bind(b,a)}})}(Zepto); -------------------------------------------------------------------------------- /demo/media/IMG_0730.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/max-power/swipeslide/31a28c953373ba222167e78fdc41341a85adfe98/demo/media/IMG_0730.JPG -------------------------------------------------------------------------------- /demo/media/IMG_0743.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/max-power/swipeslide/31a28c953373ba222167e78fdc41341a85adfe98/demo/media/IMG_0743.JPG -------------------------------------------------------------------------------- /demo/media/IMG_0829.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/max-power/swipeslide/31a28c953373ba222167e78fdc41341a85adfe98/demo/media/IMG_0829.JPG -------------------------------------------------------------------------------- /demo/media/IMG_0860.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/max-power/swipeslide/31a28c953373ba222167e78fdc41341a85adfe98/demo/media/IMG_0860.JPG -------------------------------------------------------------------------------- /demo/media/amsterdam.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/max-power/swipeslide/31a28c953373ba222167e78fdc41341a85adfe98/demo/media/amsterdam.jpg -------------------------------------------------------------------------------- /demo/media/barpark.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/max-power/swipeslide/31a28c953373ba222167e78fdc41341a85adfe98/demo/media/barpark.jpg -------------------------------------------------------------------------------- /demo/media/clody.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/max-power/swipeslide/31a28c953373ba222167e78fdc41341a85adfe98/demo/media/clody.jpg -------------------------------------------------------------------------------- /demo/media/gate.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/max-power/swipeslide/31a28c953373ba222167e78fdc41341a85adfe98/demo/media/gate.jpg -------------------------------------------------------------------------------- /demo/media/japan_clock.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/max-power/swipeslide/31a28c953373ba222167e78fdc41341a85adfe98/demo/media/japan_clock.jpg -------------------------------------------------------------------------------- /demo/media/multi/IMG_0730.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/max-power/swipeslide/31a28c953373ba222167e78fdc41341a85adfe98/demo/media/multi/IMG_0730.JPG -------------------------------------------------------------------------------- /demo/media/multi/IMG_0743.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/max-power/swipeslide/31a28c953373ba222167e78fdc41341a85adfe98/demo/media/multi/IMG_0743.JPG -------------------------------------------------------------------------------- /demo/media/multi/IMG_0829.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/max-power/swipeslide/31a28c953373ba222167e78fdc41341a85adfe98/demo/media/multi/IMG_0829.JPG -------------------------------------------------------------------------------- /demo/media/multi/IMG_0860.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/max-power/swipeslide/31a28c953373ba222167e78fdc41341a85adfe98/demo/media/multi/IMG_0860.JPG -------------------------------------------------------------------------------- /demo/media/multi/amsterdam.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/max-power/swipeslide/31a28c953373ba222167e78fdc41341a85adfe98/demo/media/multi/amsterdam.jpg -------------------------------------------------------------------------------- /demo/media/multi/barpark.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/max-power/swipeslide/31a28c953373ba222167e78fdc41341a85adfe98/demo/media/multi/barpark.jpg -------------------------------------------------------------------------------- /demo/media/multi/clody.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/max-power/swipeslide/31a28c953373ba222167e78fdc41341a85adfe98/demo/media/multi/clody.jpg -------------------------------------------------------------------------------- /demo/media/multi/gate.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/max-power/swipeslide/31a28c953373ba222167e78fdc41341a85adfe98/demo/media/multi/gate.jpg -------------------------------------------------------------------------------- /demo/media/multi/japan_clock.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/max-power/swipeslide/31a28c953373ba222167e78fdc41341a85adfe98/demo/media/multi/japan_clock.jpg -------------------------------------------------------------------------------- /demo/media/multi/ny.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/max-power/swipeslide/31a28c953373ba222167e78fdc41341a85adfe98/demo/media/multi/ny.jpg -------------------------------------------------------------------------------- /demo/media/multi/panorama.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/max-power/swipeslide/31a28c953373ba222167e78fdc41341a85adfe98/demo/media/multi/panorama.jpg -------------------------------------------------------------------------------- /demo/media/multi/pool.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/max-power/swipeslide/31a28c953373ba222167e78fdc41341a85adfe98/demo/media/multi/pool.jpg -------------------------------------------------------------------------------- /demo/media/multi/port.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/max-power/swipeslide/31a28c953373ba222167e78fdc41341a85adfe98/demo/media/multi/port.jpg -------------------------------------------------------------------------------- /demo/media/multi/praga.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/max-power/swipeslide/31a28c953373ba222167e78fdc41341a85adfe98/demo/media/multi/praga.jpg -------------------------------------------------------------------------------- /demo/media/multi/provence.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/max-power/swipeslide/31a28c953373ba222167e78fdc41341a85adfe98/demo/media/multi/provence.jpg -------------------------------------------------------------------------------- /demo/media/multi/river.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/max-power/swipeslide/31a28c953373ba222167e78fdc41341a85adfe98/demo/media/multi/river.jpg -------------------------------------------------------------------------------- /demo/media/multi/saarschleife.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/max-power/swipeslide/31a28c953373ba222167e78fdc41341a85adfe98/demo/media/multi/saarschleife.jpg -------------------------------------------------------------------------------- /demo/media/multi/santa-marta-pano-large.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/max-power/swipeslide/31a28c953373ba222167e78fdc41341a85adfe98/demo/media/multi/santa-marta-pano-large.jpg -------------------------------------------------------------------------------- /demo/media/multi/seul.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/max-power/swipeslide/31a28c953373ba222167e78fdc41341a85adfe98/demo/media/multi/seul.jpg -------------------------------------------------------------------------------- /demo/media/multi/sur.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/max-power/swipeslide/31a28c953373ba222167e78fdc41341a85adfe98/demo/media/multi/sur.jpg -------------------------------------------------------------------------------- /demo/media/multi/taxi_istanbul.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/max-power/swipeslide/31a28c953373ba222167e78fdc41341a85adfe98/demo/media/multi/taxi_istanbul.jpg -------------------------------------------------------------------------------- /demo/media/multi/taxi_london.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/max-power/swipeslide/31a28c953373ba222167e78fdc41341a85adfe98/demo/media/multi/taxi_london.jpg -------------------------------------------------------------------------------- /demo/media/multi/taxi_mexicocity.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/max-power/swipeslide/31a28c953373ba222167e78fdc41341a85adfe98/demo/media/multi/taxi_mexicocity.jpg -------------------------------------------------------------------------------- /demo/media/multi/taxi_newyork.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/max-power/swipeslide/31a28c953373ba222167e78fdc41341a85adfe98/demo/media/multi/taxi_newyork.jpg -------------------------------------------------------------------------------- /demo/media/ny.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/max-power/swipeslide/31a28c953373ba222167e78fdc41341a85adfe98/demo/media/ny.jpg -------------------------------------------------------------------------------- /demo/media/panorama.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/max-power/swipeslide/31a28c953373ba222167e78fdc41341a85adfe98/demo/media/panorama.jpg -------------------------------------------------------------------------------- /demo/media/pool.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/max-power/swipeslide/31a28c953373ba222167e78fdc41341a85adfe98/demo/media/pool.jpg -------------------------------------------------------------------------------- /demo/media/port.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/max-power/swipeslide/31a28c953373ba222167e78fdc41341a85adfe98/demo/media/port.jpg -------------------------------------------------------------------------------- /demo/media/praga.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/max-power/swipeslide/31a28c953373ba222167e78fdc41341a85adfe98/demo/media/praga.jpg -------------------------------------------------------------------------------- /demo/media/provence.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/max-power/swipeslide/31a28c953373ba222167e78fdc41341a85adfe98/demo/media/provence.jpg -------------------------------------------------------------------------------- /demo/media/river.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/max-power/swipeslide/31a28c953373ba222167e78fdc41341a85adfe98/demo/media/river.jpg -------------------------------------------------------------------------------- /demo/media/saarschleife.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/max-power/swipeslide/31a28c953373ba222167e78fdc41341a85adfe98/demo/media/saarschleife.jpg -------------------------------------------------------------------------------- /demo/media/santa-marta-pano-large.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/max-power/swipeslide/31a28c953373ba222167e78fdc41341a85adfe98/demo/media/santa-marta-pano-large.jpg -------------------------------------------------------------------------------- /demo/media/seul.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/max-power/swipeslide/31a28c953373ba222167e78fdc41341a85adfe98/demo/media/seul.jpg -------------------------------------------------------------------------------- /demo/media/sur.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/max-power/swipeslide/31a28c953373ba222167e78fdc41341a85adfe98/demo/media/sur.jpg -------------------------------------------------------------------------------- /demo/media/taxi_istanbul.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/max-power/swipeslide/31a28c953373ba222167e78fdc41341a85adfe98/demo/media/taxi_istanbul.jpg -------------------------------------------------------------------------------- /demo/media/taxi_london.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/max-power/swipeslide/31a28c953373ba222167e78fdc41341a85adfe98/demo/media/taxi_london.jpg -------------------------------------------------------------------------------- /demo/media/taxi_mexicocity.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/max-power/swipeslide/31a28c953373ba222167e78fdc41341a85adfe98/demo/media/taxi_mexicocity.jpg -------------------------------------------------------------------------------- /demo/media/taxi_newyork.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/max-power/swipeslide/31a28c953373ba222167e78fdc41341a85adfe98/demo/media/taxi_newyork.jpg -------------------------------------------------------------------------------- /demo/multi.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Swipe Gallery 7 | 8 | 9 | 10 | 32 | 45 | 46 | 47 |

48 |

Testing multislides

49 |

The purpose is to test SwipeSlide against multiple content in each slide.

50 |

51 | 52 |

53 |

54 |

58 |

62 |

66 |

70 |

74 |

78 |

82 |

83 |

84 | 85 |

86 |

87 |

91 |

95 |

99 |

103 |

107 |

111 |

115 |

116 |

117 | 118 |

119 |

120 |

124 |

128 |

132 |

136 |

140 |

144 |

148 |

149 |

150 | 151 | 152 | -------------------------------------------------------------------------------- /demo/new.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Demo: SwipeSlide.js 7 | 8 | 9 | 10 | 11 | 62 | 73 | 74 | 75 | 76 |

77 |

SwipeSlide

78 |

79 | 80 |

81 |

89 |

90 | 91 |

92 |

100 |

101 | 102 | 103 |

104 |

121 |

122 | First | 123 | Prev | 124 | Next | 125 | Last 126 |

127 |

new SwipeSlide($('#dashboard-widgets'), {visibleSlides: 6})

128 |

129 | 130 | 131 | 132 | -------------------------------------------------------------------------------- /demo/taxi.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Taxi! 5 | 6 | 7 | 8 | 31 | 36 | 37 | 38 |

39 |

45 |

46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /swipeslide.css: -------------------------------------------------------------------------------- 1 | /* do not edit those lines */ 2 | .ui-swipeslide, 3 | .ui-swipeslide-reel, 4 | .ui-swipeslide-slide, 5 | .ui-swipeslide-slide img { 6 | width: 100%; 7 | display: block; 8 | } 9 | .ui-swipeslide { 10 | position: relative; 11 | overflow: hidden; 12 | -webkit-tap-highlight-color: transparent; 13 | -webkit-user-select: none; 14 | } 15 | .ui-swipeslide-reel { 16 | -webkit-transform: translate3d(0,0,0); 17 | overflow: hidden; 18 | display: -webkit-box; 19 | display: -moz-box; 20 | display: box; 21 | -webkit-box-orient: horizontal; 22 | -moz-box-orient: horizontal; 23 | box-orient: horizontal; 24 | } 25 | .ui-swipeslide-vertical .ui-swipeslide-reel { 26 | -webkit-box-orient: vertical; 27 | -moz-box-orient: vertical; 28 | box-orient: vertical; 29 | } 30 | .ui-swipeslide-slide { 31 | -webkit-box-sizing: border-box; 32 | -moz-box-sizing: border-box; 33 | box-sizing: border-box; 34 | } 35 | 36 | /* 3d */ 37 | .ui-swipeslide-3d { 38 | -webkit-perspective: 1000; 39 | position: relative; 40 | overflow:visible; 41 | } 42 | .ui-swipeslide-3d .ui-swipeslide-reel { 43 | -webkit-transform-style: preserve-3d; 44 | position: relatve; 45 | display: block; 46 | width: 100%; 47 | height: 100%; 48 | overflow: visible; 49 | } 50 | .ui-swipeslide-3d .ui-swipeslide-slide { 51 | position: absolute; 52 | } 53 | /* end not editable styles */ 54 | 55 | 56 | 57 | 58 | /* bullets */ 59 | .ui-swipeslide-bullets { 60 | text-align:center; 61 | margin-top: 10px; 62 | } 63 | .ui-swipeslide-bullets li { 64 | display: inline-block; 65 | width: 10px; 66 | height: 10px; 67 | border-radius: 5px; 68 | margin: 5px; 69 | background-color: #999; 70 | text-indent: -1000px; 71 | overflow: hidden; 72 | cursor: pointer; 73 | } 74 | .ui-swipeslide-bullets li.active { 75 | background:transparent; 76 | border: 3px solid #999; 77 | border-radius: 8px; 78 | margin: 2px; 79 | } 80 | 81 | /* directional navigation */ 82 | .ui-swipeslide-nav, 83 | .ui-swipeslide-nav li { 84 | list-style:none; margin: 0; padding: 0; 85 | } 86 | .ui-swipeslide-nav li { 87 | position: absolute; top: 0; height: 100%; width: 15%; 88 | z-index: 20; 89 | background: rgba(0,0,0,0.2) center center no-repeat; 90 | cursor: pointer; 91 | text-indent: -9999px; 92 | overflow: hidden; 93 | } 94 | .ui-swipeslide-nav li:hover { 95 | background-color:rgba(0,0,0,0.5); 96 | } 97 | .ui-swipeslide-nav li.prev { 98 | left: 0; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAeCAYAAADOziUSAAAAvElEQVR42q3WIQ7CYBCEUVQNwdSAQSG4So+A5Sok2BqC5QJcgwRVUUOo4AgkeEiWGbECmoruzibfqD9PNp2YmSxOpBKdUIP2qIhiS3S339tFMEIP69/VsSzEOzqWhVo0cywD3dDc38ogJoOYDGIyiMkgJoOYDHKsQN0A9EKLsV+NDfoMgIcxmAzkyECODOTIQI4M5MhAjgzkZMG6hyXBrWMK8OJYBHz/Yecoxir0RLwOrTIYm6K1/xo4JusLObFSWPLLngMAAAAASUVORK5CYII=); 99 | } 100 | .ui-swipeslide-nav li.next { 101 | right: 0; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAeCAYAAADOziUSAAAAu0lEQVR42q3WMQrCUBCE4RRpRNLYWNgKOVCu4BFsBat4CkuvIOQENpLCCwhiYesFXGcgRWBJkd158A+85mvfK8xMFoeV6IDu6ILWGWyPxueJtlGsM3/eBCPYCVkM9NgC3bLg+LJCfQbkyECODOTIQI4M5MhAjgzkaMABmwN+JsAXWs7B2gnoh3aokEFMBjEZxGQQk0FMBjER5LFjDPJYE4c8do1DHjvHIY9t0GOAvqjJvOisRDWqMn8NWX8f3VJqdiTqcAAAAABJRU5ErkJggg==); 102 | } 103 | .ui-swipeslide-3d .ui-swipeslide-nav li { 104 | -webkit-transform: translateZ(50px); 105 | } 106 | 107 | /* vertical */ 108 | .ui-swipeslide-vertical .ui-swipeslide-nav li { 109 | height: auto; width: 100%; text-align: center; 110 | } 111 | .ui-swipeslide-vertical .ui-swipeslide-nav li.prev { 112 | top: 0; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAATCAYAAACHrr18AAAAqklEQVR42sXRIQoCURSF4QlTRKZYDFMHXNBswSVYBZOuYuJsQXAFFpngBgQxWN2A1wOWy0vyn+CFP933+MKtIoI2VxWNfuzUXa0pTNFHfOdNcQcNB8eoi0PUxyHq4w76dHCKTmqh9hTHaHqLcBPlOEZdHKIcL+Gluv2Mcrwv4RGgBH+pJsMXgFJ8leFtsTwn1Gmn8lxVneFabdRJHdTMBHO9OqpBtfnGf+kD4JBSaseSdAwAAAAASUVORK5CYII=); 113 | } 114 | .ui-swipeslide-vertical .ui-swipeslide-nav li.next { 115 | bottom: 0; top: auto; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAATCAYAAACHrr18AAAAuklEQVR42sXSMQrCQBSEYQsbERsbC1vBA+UKOYJtIJWewtIrCJ7ARixygUCwsM0F8pxuNihbzAQc+ItXLF+zs4j4S+mxRWd0RcWEyAKd0A0d0JwwDtTEePUE6BrdY7wqhffxe0cTfcb3Him8Qn0G91HuQhihAg1Z3EdbtCHMyhxuoi+0S3+1gDsoYQF3UMISrqOEZVxDCTv4W0AJq7iGEhZwAdVh4h5KWMJ1lLCMayhhB++ICrDRUn37ARk5UmoS0ZZKAAAAAElFTkSuQmCC); 116 | } -------------------------------------------------------------------------------- /swipeslide.js: -------------------------------------------------------------------------------- 1 | var SwipeSlide = function(container, options){ 2 | this.options = $.extend({ 3 | first: 0, // the first visible slide on initialization 4 | visibleSlides: 1, // number of slides visible at the same time 5 | vertical: false, // horizontal or vertical 6 | tolerance:0.5, // values between 0 and 1, where 1 means you have to drag to the center of the slide (a value of 1 equals the ios behaviour) 7 | delay: 0.3, // animation speed in seconds, 8 | easing: 'ease-out', // the easing function 9 | autoPlay: false, // false, or value in seconds to start auto slideshow 10 | useTranslate3d: true, 11 | bulletNavigation: 'link', // will insert bullet navigation: false, true or 'link' (event handlers will be attached) 12 | directionalNavigation: false, // will insert previous and next links 13 | beforeChange: null, 14 | afterChange: null // after slide transition callback 15 | }, options) 16 | 17 | this.isVertical = !!this.options.vertical 18 | this.container = $(container).addClass('ui-swipeslide').addClass('ui-swipeslide-'+(this.isVertical ? 'vertical' : 'horizontal')) 19 | this.reel = this.container.children().first().addClass('ui-swipeslide-reel') 20 | this.slides = this.reel.children().addClass('ui-swipeslide-slide') 21 | this.numPages = Math.ceil(this.slides.length / this.options.visibleSlides) 22 | this.currentPage = this.validPage(this.options.first) 23 | this.touch = {} 24 | this.isTouch = 'ontouchstart' in document.documentElement 25 | this.events = { 26 | start: this.isTouch ? 'touchstart' : 'mousedown', 27 | move: this.isTouch ? 'touchmove' : 'mousemove', 28 | end: this.isTouch ? 'touchend touchcancel touchleave' : 'mouseup mouseout mouseleave', 29 | click: this.isTouch ? 'touchend' : 'click' 30 | } 31 | this.setup() 32 | this.addEventListeners() 33 | if (this.options.directionalNavigation) this.setupDirectionalNavigation() 34 | if (this.options.bulletNavigation) this.setupBulletNavigation() 35 | if (this.options.autoPlay) this.autoPlay() 36 | } 37 | 38 | SwipeSlide.prototype = { 39 | // public 40 | page: function(index) { 41 | this.stopAutoPlay() 42 | var newPage = this.validPage(index), callback 43 | // only set callback function if a slide happend 44 | if (this.currentPage != newPage) { 45 | if($.isFunction(this.options.beforeChange)) this.options.beforeChange(this, this.currentPage, newPage) 46 | this.currentPage = newPage 47 | callback = $.proxy(this.callback, this) 48 | } else if (this.options.autoPlay){ 49 | callback = $.proxy(this.autoPlay, this) 50 | } 51 | this.move(0, this.options.delay, callback) 52 | if (this.options.bulletNavigation) this.setActiveBullet() 53 | }, 54 | first: function(){ this.page(0) }, 55 | next: function(){ this.page(this.currentPage+1) }, 56 | prev: function(){ this.page(this.currentPage-1) }, 57 | last: function(){ this.page(this.numPages-1) }, 58 | isFirst: function(){ return this.currentPage == 0 }, 59 | isLast: function(){ return this.currentPage == this.numPages-1 }, 60 | validPage: function(num){ return Math.max(Math.min(num, this.numPages-1), 0) }, 61 | autoPlay: function(){ 62 | if (this.timeout) return false 63 | var fn = this.isLast() ? this.first : this.next 64 | this.timeout = setTimeout($.proxy(fn, this), this.options.autoPlay * 1000) 65 | }, 66 | stopAutoPlay: function(){ 67 | clearTimeout(this.timeout) 68 | delete this.timeout 69 | }, 70 | visibleSlides: function(){ 71 | return this.slides.slice(this.currentPage, this.currentPage+this.options.visibleSlides) 72 | }, 73 | 74 | // private 75 | move: function(distance, delay, callback) { 76 | this.reel.animate(this.animationProperties(distance), { duration: delay * 1000, easing: this.options.easing, complete: callback }) 77 | }, 78 | 79 | animationProperties: function(distance) { 80 | var position = -this.currentPage * this.dimension + distance + 'px', props = {} 81 | if (this.options.useTranslate3d) { 82 | props['translate3d'] = (this.isVertical ? '0,'+position : position+',0') + ',0' 83 | } else { 84 | props[this.isVertical ? 'translateY' : 'translateX'] = position 85 | } 86 | return props 87 | }, 88 | 89 | setup: function(){ 90 | var fn = this.isVertical ? 'height' : 'width' 91 | this.dimension = this.container[fn]() 92 | this.tolerance = this.options.tolerance * this.dimension / 2 93 | // set height or width of reel and slides 94 | this.reel[fn](this.dimension * this.numPages + 'px') 95 | this.slides[fn](this.dimension / this.options.visibleSlides + 'px') 96 | // move to first slide without animation 97 | this.move(0,0) 98 | }, 99 | 100 | addEventListeners: function(){ 101 | // bind listeners for touch movement 102 | this.reel 103 | .on(this.events.start, $.proxy(this.touchStart, this)) 104 | .on(this.events.move, $.proxy(this.touchMove, this)) 105 | .on(this.events.end, $.proxy(this.touchEnd, this)) 106 | 107 | // bind listeners to any elments with '.prev', '.next', '.first' or '.last' class 108 | this.container 109 | .on(this.events.click, '.next', $.proxy(this.next, this)) 110 | .on(this.events.click, '.prev', $.proxy(this.prev, this)) 111 | .on(this.events.click, '.first', $.proxy(this.first, this)) 112 | .on(this.events.click, '.last', $.proxy(this.last, this)) 113 | 114 | // recalculate dimension on window resize or orientation change 115 | $(window).on('resize', $.proxy(this.setup, this)) 116 | }, 117 | 118 | touchStart: function(e){ 119 | this.touch.start = this.trackTouch(e) 120 | delete this.isScroll 121 | if (!this.isTouch) return false 122 | }, 123 | 124 | touchMove: function(e){ 125 | if (!this.touch.start) return 126 | this.touch.end = this.trackTouch(e) 127 | var distance = this.distance(this.isVertical) 128 | if (typeof this.isScroll == 'undefined') { 129 | this.isScroll = Math.abs(distance) < Math.abs(this.distance(!this.isVertical)) 130 | } 131 | if (!this.isScroll) { 132 | this.stopAutoPlay() 133 | this.move(this.withResistance(distance), 0) 134 | return false 135 | } 136 | }, 137 | 138 | touchEnd: function(e){ 139 | if (!this.isScroll) { 140 | var distance = this.distance(this.isVertical), add = 0 141 | if (Math.abs(distance) > this.tolerance) add = distance < 0 ? 1 : -1 142 | this.page(this.currentPage + add) 143 | } 144 | this.touch = {} 145 | return false 146 | }, 147 | 148 | trackTouch: function(e) { 149 | var o = this.isTouch ? e.touches[0] : e 150 | return { x: o.pageX, y: o.pageY } 151 | }, 152 | 153 | distance: function(vertical) { 154 | var d = vertical ? 'y' : 'x' 155 | try { return this.touch.end[d] - this.touch.start[d] } catch(e) {return 0} 156 | }, 157 | 158 | withResistance: function(d){ 159 | if (this.isFirst() && d > 0 || this.isLast() && d < 0) d /= (1 + Math.abs(d) / this.dimension) 160 | return d 161 | }, 162 | 163 | callback: function(){ 164 | // call user defined callback function with the currentPage number and an array of visible slides 165 | if ($.isFunction(this.options.afterChange)) this.options.afterChange(this, this.currentPage) 166 | if (this.options.autoPlay) this.autoPlay() 167 | }, 168 | 169 | /* prev/next navigation */ 170 | setupDirectionalNavigation: function() { 171 | this.container.append('

') 172 | }, 173 | 174 | /* bullet navigation */ 175 | setupBulletNavigation: function() { 176 | this.navBullets = $('

') 177 | for (i=0; i'+(i+1)+'') 178 | if (this.options.bulletNavigation == 'link') { 179 | this.navBullets.on(this.events.click, 'li', $.proxy(function(e){ 180 | this.page(parseInt($(e.currentTarget).data('index'), 10)) 181 | }, this)) 182 | } 183 | this.container.append(this.navBullets) 184 | this.setActiveBullet() 185 | }, 186 | setActiveBullet: function() { 187 | this.navBullets.children('li').removeClass('active').eq(this.currentPage).addClass('active') 188 | } 189 | } 190 | 191 | 192 | 193 | var SwipeSlide3D = function(container, options) { 194 | SwipeSlide.call(this, container, options) 195 | this.container.addClass('ui-swipeslide-3d') 196 | } 197 | SwipeSlide3D.prototype = new SwipeSlide 198 | 199 | $.extend(SwipeSlide3D.prototype, { 200 | setup: function() { 201 | var fn = this.isVertical ? 'height' : 'width' 202 | this.dimension = this.container[fn]() 203 | this.tolerance = this.options.tolerance * this.dimension / 2 204 | this.alpha = 360/this.slides.length * (this.isVertical ? -1 : 1) 205 | this.radius = Math.round((this.dimension/2) / Math.tan(Math.PI / this.slides.length)) 206 | this.slides.each($.proxy(this.positionSlide, this)) 207 | this.move(0,0) 208 | }, 209 | validPage: function(num){ 210 | if (num < 0) num += this.numPages 211 | else if (num >= this.numPages) num %= this.numPages 212 | return num 213 | }, 214 | animationProperties: function(distance) { 215 | var delta = (this.alpha * distance / this.dimension) - (this.alpha * this.currentPage) 216 | return { translate3d: '0,0,'+ -this.radius + 'px', rotate3d: this.vectorsWithDeg(delta) } 217 | }, 218 | positionSlide: function(i, slide){ 219 | $(slide).animate({ rotate3d: this.vectorsWithDeg(i*this.alpha), translate3d: '0,0,'+this.radius+'px' }, {duration: 0}) 220 | }, 221 | vectorsWithDeg: function(degree){ 222 | return (this.isVertical ? '1,0' : '0,1') + ',0,' + degree + 'deg' 223 | }, 224 | withResistance: function(d) {return d} // no resistance for 3d 225 | }) 226 | 227 | // zepto plugin 228 | ;(function($) { 229 | $.fn.swipeSlide = function(options) { 230 | var klass = (options=options||{}).threeD ? SwipeSlide3D : SwipeSlide 231 | return this.each(function() { 232 | var s = new klass(this, options); 233 | if (typeof($(this).data("swipeInstance", s).data("swipeInstance")) === "string") { $(this).removeAttr("data-swipeInstance"); } 234 | return; 235 | }); 236 | } 237 | })(window.Zepto) --------------------------------------------------------------------------------