diff --git a/README.md b/README.md index a6388c6..71b14af 100644 --- a/README.md +++ b/README.md @@ -11,6 +11,7 @@ - Hotkeys for next, previous and close buttons. - Closing after viewing of all images. - Preloading of next and previous images. +- Multi-touch zoom. - Uses link's `href` or `data-href` attribute for large images. - Fully customizable styles. - Customizable bottom area. diff --git a/abigimage.jquery.js b/abigimage.jquery.js index 612ea96..c5faf69 100644 --- a/abigimage.jquery.js +++ b/abigimage.jquery.js @@ -1,6 +1,6 @@ /** * http://aeqdev.com/tools/js/abigimage/ - * v 1.2.7 + * v 1.2.8 * * Copyright © 2014 Maksim Krylosov * @@ -167,6 +167,7 @@ minD, vert, touches, + multi, slideTransition = false, slideQueueFn = [null, null, null], @@ -179,6 +180,7 @@ y = 0; s = 1; vert = null; + multi = false; if (opts.imgCSS) { img.css({zIndex: opts.imgCSS.zIndex}); } @@ -202,6 +204,7 @@ img[0].addEventListener('touchstart', function(e) { if (!opened) return; if (e.touches.length > 1) { + multi = true; k = dis(e); img.css({zIndex: opts.prevBtnBoxCSS.zIndex}); } else { @@ -262,8 +265,12 @@ if (!e.touches.length) { if (s <= opts.zoomMin) { - if (dx >= -1 && dx <= 1 && dy >= -1 && dy <= 1) { - slideNext(true); + if (time <= 1 || (dx >= -1 && dx <= 1 && dy >= -1 && dy <= 1)) { + if (multi) { + slideAnimate(0, 0, 1); + } else { + slideNext(true); + } } else { if (vert) { var ady = Math.abs(dy); diff --git a/abigimage.jquery.json b/abigimage.jquery.json index a8f554f..8129f5d 100644 --- a/abigimage.jquery.json +++ b/abigimage.jquery.json @@ -1,6 +1,6 @@ { "name": "abigimage", - "version": "1.2.7", + "version": "1.2.8", "title": "ABigImage - view big versions of images", "author": { "name": "Maksim Krylosov", diff --git a/abigimage.jquery.min.js b/abigimage.jquery.min.js index 0951f3f..7294839 100644 --- a/abigimage.jquery.min.js +++ b/abigimage.jquery.min.js @@ -1 +1 @@ -(function(R){var aj=R("
").css({display:"none"}).appendTo("body"),P=R("
").css({display:"none"}).appendTo("body"),n=R("
").appendTo(P),U=R("
").appendTo(n),F=R("
").appendTo(U),v=R("
").appendTo(F),B=R("
").appendTo(n),M=R("
").appendTo(B),V=R("
").appendTo(M),p=R("").appendTo(n),z=R("").appendTo(n),ab=R("").appendTo(n),b=R("
").appendTo(P);var N={},ac=null,ai=null,al=0,D=false;function ag(){var d=ai+1;if(d>=ac.length){d=0}return d}function o(){var d=ai-1;if(d<0){d=ac.length-1}return d}function f(){if(al===ac.length-1){return ae()}else{++al;return K(ag())}}function O(){if(al===1-ac.length){return ae()}else{--al;return K(o())}}function G(d){if(N.keyNext.indexOf(d.which)!==-1){f();return false}else{if(N.keyPrev.indexOf(d.which)!==-1){O();return false}else{if(N.keyClose.indexOf(d.which)!==-1){ae();return false}}}}function K(k,d){if("number"===typeof k){if(k===ai||k<0||k>ac.length-1){return}ai=k;var t=R(ac[ai]);k=t.data("href")||t.attr("href")}else{if("number"!==typeof d){d=-1}if(ai===d){return}ai=d}D=true;p.removeAttr("src").attr("src",k);var s=R(ac[ag()]);z.removeAttr("src").attr("src",s.data("href")||s.attr("href"));var i=R(ac[o()]);ab.removeAttr("src").attr("src",i.data("href")||i.attr("href"));aj.fadeIn(N.fadeIn);P.fadeIn(N.fadeIn);N.onopen.call(ac,ac[ai],ai);R(document).unbind("keydown",G).bind("keydown",G);return false}function ae(){if(!D){return}D=false;ai=null;al=0;aj.fadeOut(N.fadeOut);P.fadeOut(N.fadeOut,I);N.onclose.call(ac);R(document).unbind("keydown",G);return false}U.click(function(){return O()});B.click(function(){return ae()});var h=function(d){d.preventDefault()};P.on("touchmove",h).on("wheel",h);var r,q,w,aa,Z,ad,ah,l,g,J,T,L,a,e,am,C,ao,A=false,X=[null,null,null],af=n[0].style;an();function an(){aa=0;Z=0;ad=1;C=null;if(N.imgCSS){p.css({zIndex:N.imgCSS.zIndex})}}function E(k,x){var s=0;for(var i=0,d=k.length;i1){ah=ak(d);p.css({zIndex:N.prevBtnBoxCSS.zIndex})}else{C=null;L=(new Date()).getTime();a=n.width()*0.34;e=n.height();am=N.slideWidth*a;J=p.width();T=p.height()}r=aa;q=Z;w=ad;l=0;g=0;ao=d.touches;d.preventDefault()});p[0].addEventListener("touchmove",function(k){if(!D){return}l=(E(k.touches,"X")-E(ao,"X"));g=(E(k.touches,"Y")-E(ao,"Y"));aa=r+l/ad;Z=q+g/ad;if(k.touches.length>1){ad=Math.max(1,w*(ak(k)/ah))}if(ad>N.zoomMin){var s=0.5*(J-(J/ad));var i=0.5*(T-(T/ad));aa=Math.max(-s,Math.min(s,aa));Z=Math.max(-i,Math.min(i,Z))}else{if(null===C){var d=Math.abs(g)-Math.abs(l);if(Math.abs(d)>2){C=d>0}}if(C){aa=0}else{Z=0}}S(aa,Z,ad,false);k.preventDefault()});p[0].addEventListener("touchend",W);p[0].addEventListener("touchcancel",W);function W(i){if(!D){return}var d=(new Date()).getTime()-L;if(!i.touches.length){if(ad<=N.zoomMin){if(l>=-1&&l<=1&&g>=-1&&g<=1){Q(true)}else{if(C){var k=Math.abs(g);if(k>am){c()}else{if(k/d>N.slideVelocity){c()}else{j()}}}else{if(l<-am){Q()}else{if(l>am){m()}else{if(Math.abs(l)/d>N.slideVelocity){if(l<0){Q()}else{m()}}else{j()}}}}}an()}else{if(ad>N.zoomMax){ad=N.zoomMax;S(aa,Z,ad,true)}}}if(ad<=N.zoomMin){p.css({zIndex:N.imgCSS.zIndex})}ao=i.touches;i.preventDefault()}n.on("transitionend webkitTransitionEnd msTransitionEnd oTransitionEnd",I);function I(){A=false;for(var d=0;d<2;d++){if(X[d]){X[d]();X[d]=null;if(A){break}}}}p.click(function(){return f()});function Q(d){S(d?0:-a,0,1,!d);Y(f)}function m(){S(a,0,1,true);Y(O)}function j(){S(0,0,1,true)}function c(){j();Y();ae()}function H(k,d){if(A){X[d||0]=k}else{k()}}function S(d,aq,t,ap,k){H(function(){u(d,aq,t,ap)},k)}function Y(d){H(function(){u(0,0,1,false);if(d){d()}},1)}function u(d,ap,k,t){A=t;var i="scale("+k+") translate3d("+d+"px, "+ap+"px, 0)";af.transition=t?"all .2s ease-out":"";af.webkitTransform=i;af.mozTransform=i;af.msTransform=i;af.oTransform=i;af.transform=i}R.fn.abigimage=function(s){ac=this;N=R.extend(true,R.fn.abigimage.defaults,s);this.overlay=aj.attr(N.overlayAttrs).css(N.overlayCSS);this.layout=P.attr(N.layoutAttrs).css(N.layoutCSS);this.box=n.attr(N.boxAttrs).css(N.boxCSS);this.prevBtnWrapper=U.attr(N.prevBtnWrapperAttrs).css(N.prevBtnWrapperCSS);this.prevBtnBox=F.attr(N.prevBtnBoxAttrs).css(N.prevBtnBoxCSS);this.prevBtn=v.attr(N.prevBtnAttrs).css(N.prevBtnCSS).html(N.prevBtnHtml);this.closeBtnWrapper=B.attr(N.closeBtnWrapperAttrs).css(N.closeBtnWrapperCSS);this.closeBtnBox=M.attr(N.closeBtnBoxAttrs).css(N.closeBtnBoxCSS);this.closeBtn=V.attr(N.closeBtnAttrs).css(N.closeBtnCSS).html(N.closeBtnHtml);this.img=p.attr(N.imgAttrs).css(N.imgCSS);this.imgNext=z.attr(N.imgNextAttrs).css(N.imgNextCSS);this.imgPrev=ab.attr(N.imgPrevAttrs).css(N.imgPrevCSS);this.bottom=b.attr(N.bottomAttrs).css(N.bottomCSS);var k={};for(var t in N.prevBtnHoverCSS){if(N.prevBtnCSS){k[t]=N.prevBtnCSS[t]}}var d={};for(var t in N.closeBtnHoverCSS){if(N.closeBtnCSS){d[t]=N.closeBtnCSS[t]}}var i={};for(var t in N.bottomHoverCSS){if(N.bottomCSS){i[t]=N.bottomCSS[t]}}this.prevBtnWrapper.hover(function(){v.stop().animate(N.prevBtnHoverCSS,N.fadeIn)},function(){v.stop().animate(k,N.fadeOut)});this.closeBtnWrapper.hover(function(){V.stop().animate(N.closeBtnHoverCSS,N.fadeIn)},function(){V.stop().animate(d,N.fadeOut)});this.bottom.hover(function(){b.stop().animate(N.bottomHoverCSS,N.fadeIn)},function(){b.stop().animate(i,N.fadeOut)});return this.each(function(x){R(this).unbind("click.abigimage").bind("click.abigimage",function(){return K(x)})})};R.abigimage={open:K,next:f,prev:O,close:ae};R.fn.abigimage.defaults={fadeIn:"fast",fadeOut:"fast",slideWidth:0.4,slideVelocity:0.4,zoomMin:1.5,zoomMax:5,prevBtnHtml:"←",closeBtnHtml:"x",keyNext:[13,32,39,40],keyPrev:[8,37,38],keyClose:[27,35,36],onopen:function(){},onclose:function(){},overlayCSS:{position:"fixed",zIndex:101,top:0,right:0,bottom:0,left:0,backgroundColor:"#000",opacity:0.9},layoutCSS:{position:"fixed",zIndex:101,top:0,right:0,bottom:0,left:0,"-webkit-user-select":"none","-moz-user-select":"none","user-select":"none","-webkit-tap-highlight-color":"rgba(0, 0, 0, 0)",lineHeight:2.5},boxCSS:{position:"absolute",width:"312.5%",height:"100%",left:"-106.25%",top:0},prevBtnWrapperCSS:{cursor:"pointer",position:"absolute",top:0,right:"50%",bottom:0,left:0},closeBtnWrapperCSS:{cursor:"pointer",position:"absolute",top:0,right:0,bottom:0,left:"50%"},prevBtnBoxCSS:{position:"absolute",zIndex:103,top:0,bottom:0,left:"68%"},closeBtnBoxCSS:{position:"absolute",zIndex:103,top:0,bottom:0,right:"68%"},prevBtnCSS:{color:"#fff",backgroundColor:"#000",opacity:0.5,padding:"0 1em",borderRadius:"0 0 1ex 0"},closeBtnCSS:{color:"#fff",backgroundColor:"#000",opacity:0.5,padding:"0 1em",borderRadius:"0 0 0 1ex"},prevBtnHoverCSS:{opacity:1},closeBtnHoverCSS:{opacity:1},imgCSS:{position:"absolute",zIndex:102,margin:"auto",width:"auto",top:0,right:0,bottom:0,left:0,display:"block",cursor:"pointer",maxWidth:"32%",maxHeight:"100%"},imgNextCSS:{position:"absolute",margin:"auto",width:"auto",top:0,right:0,bottom:0,left:"68%",display:"block",maxWidth:"32%",maxHeight:"100%"},imgPrevCSS:{position:"absolute",margin:"auto",width:"auto",top:0,right:"68%",bottom:0,left:0,display:"block",maxWidth:"32%",maxHeight:"100%"},bottomCSS:{position:"fixed",zIndex:104,right:0,bottom:0,left:0,"-webkit-user-select":"text","-moz-user-select":"text","user-select":"text",backgroundColor:"#000",color:"#fff",opacity:0.5,padding:"0 1em",textAlign:"center"},bottomHoverCSS:{opacity:1},overlayAttrs:{},layoutAttrs:{},boxAttrs:{},prevBtnWrapperAttrs:{},prevBtnBoxAttrs:{},prevBtnAttrs:{},closeBtnWrapperAttrs:{},closeBtnBoxAttrs:{},closeBtnAttrs:{},imgAttrs:{},imgNextAttrs:{},imgPrevAttrs:{},bottomAttrs:{}}}(jQuery)); \ No newline at end of file +(function(R){var ak=R("
").css({display:"none"}).appendTo("body"),P=R("
").css({display:"none"}).appendTo("body"),n=R("
").appendTo(P),U=R("
").appendTo(n),F=R("
").appendTo(U),v=R("
").appendTo(F),B=R("
").appendTo(n),M=R("
").appendTo(B),V=R("
").appendTo(M),p=R("").appendTo(n),z=R("").appendTo(n),ac=R("").appendTo(n),b=R("
").appendTo(P);var N={},ad=null,aj=null,am=0,D=false;function ah(){var d=aj+1;if(d>=ad.length){d=0}return d}function o(){var d=aj-1;if(d<0){d=ad.length-1}return d}function f(){if(am===ad.length-1){return af()}else{++am;return K(ah())}}function O(){if(am===1-ad.length){return af()}else{--am;return K(o())}}function G(d){if(N.keyNext.indexOf(d.which)!==-1){f();return false}else{if(N.keyPrev.indexOf(d.which)!==-1){O();return false}else{if(N.keyClose.indexOf(d.which)!==-1){af();return false}}}}function K(k,d){if("number"===typeof k){if(k===aj||k<0||k>ad.length-1){return}aj=k;var t=R(ad[aj]);k=t.data("href")||t.attr("href")}else{if("number"!==typeof d){d=-1}if(aj===d){return}aj=d}D=true;p.removeAttr("src").attr("src",k);var s=R(ad[ah()]);z.removeAttr("src").attr("src",s.data("href")||s.attr("href"));var i=R(ad[o()]);ac.removeAttr("src").attr("src",i.data("href")||i.attr("href"));ak.fadeIn(N.fadeIn);P.fadeIn(N.fadeIn);N.onopen.call(ad,ad[aj],aj);R(document).unbind("keydown",G).bind("keydown",G);return false}function af(){if(!D){return}D=false;aj=null;am=0;ak.fadeOut(N.fadeOut);P.fadeOut(N.fadeOut,I);N.onclose.call(ad);R(document).unbind("keydown",G);return false}U.click(function(){return O()});B.click(function(){return af()});var h=function(d){d.preventDefault()};P.on("touchmove",h).on("wheel",h);var r,q,w,ab,Z,ae,ai,l,g,J,T,L,a,e,an,C,ap,aa,A=false,X=[null,null,null],ag=n[0].style;ao();function ao(){ab=0;Z=0;ae=1;C=null;aa=false;if(N.imgCSS){p.css({zIndex:N.imgCSS.zIndex})}}function E(k,x){var s=0;for(var i=0,d=k.length;i1){aa=true;ai=al(d);p.css({zIndex:N.prevBtnBoxCSS.zIndex})}else{C=null;L=(new Date()).getTime();a=n.width()*0.34;e=n.height();an=N.slideWidth*a;J=p.width();T=p.height()}r=ab;q=Z;w=ae;l=0;g=0;ap=d.touches;d.preventDefault()});p[0].addEventListener("touchmove",function(k){if(!D){return}l=(E(k.touches,"X")-E(ap,"X"));g=(E(k.touches,"Y")-E(ap,"Y"));ab=r+l/ae;Z=q+g/ae;if(k.touches.length>1){ae=Math.max(1,w*(al(k)/ai))}if(ae>N.zoomMin){var s=0.5*(J-(J/ae));var i=0.5*(T-(T/ae));ab=Math.max(-s,Math.min(s,ab));Z=Math.max(-i,Math.min(i,Z))}else{if(null===C){var d=Math.abs(g)-Math.abs(l);if(Math.abs(d)>2){C=d>0}}if(C){ab=0}else{Z=0}}S(ab,Z,ae,false);k.preventDefault()});p[0].addEventListener("touchend",W);p[0].addEventListener("touchcancel",W);function W(i){if(!D){return}var d=(new Date()).getTime()-L;if(!i.touches.length){if(ae<=N.zoomMin){if(d<=1||(l>=-1&&l<=1&&g>=-1&&g<=1)){if(aa){u(0,0,1)}else{Q(true)}}else{if(C){var k=Math.abs(g);if(k>an){c()}else{if(k/d>N.slideVelocity){c()}else{j()}}}else{if(l<-an){Q()}else{if(l>an){m()}else{if(Math.abs(l)/d>N.slideVelocity){if(l<0){Q()}else{m()}}else{j()}}}}}ao()}else{if(ae>N.zoomMax){ae=N.zoomMax;S(ab,Z,ae,true)}}}if(ae<=N.zoomMin){p.css({zIndex:N.imgCSS.zIndex})}ap=i.touches;i.preventDefault()}n.on("transitionend webkitTransitionEnd msTransitionEnd oTransitionEnd",I);function I(){A=false;for(var d=0;d<2;d++){if(X[d]){X[d]();X[d]=null;if(A){break}}}}p.click(function(){return f()});function Q(d){S(d?0:-a,0,1,!d);Y(f)}function m(){S(a,0,1,true);Y(O)}function j(){S(0,0,1,true)}function c(){j();Y();af()}function H(k,d){if(A){X[d||0]=k}else{k()}}function S(d,ar,t,aq,k){H(function(){u(d,ar,t,aq)},k)}function Y(d){H(function(){u(0,0,1,false);if(d){d()}},1)}function u(d,aq,k,t){A=t;var i="scale("+k+") translate3d("+d+"px, "+aq+"px, 0)";ag.transition=t?"all .2s ease-out":"";ag.webkitTransform=i;ag.mozTransform=i;ag.msTransform=i;ag.oTransform=i;ag.transform=i}R.fn.abigimage=function(s){ad=this;N=R.extend(true,R.fn.abigimage.defaults,s);this.overlay=ak.attr(N.overlayAttrs).css(N.overlayCSS);this.layout=P.attr(N.layoutAttrs).css(N.layoutCSS);this.box=n.attr(N.boxAttrs).css(N.boxCSS);this.prevBtnWrapper=U.attr(N.prevBtnWrapperAttrs).css(N.prevBtnWrapperCSS);this.prevBtnBox=F.attr(N.prevBtnBoxAttrs).css(N.prevBtnBoxCSS);this.prevBtn=v.attr(N.prevBtnAttrs).css(N.prevBtnCSS).html(N.prevBtnHtml);this.closeBtnWrapper=B.attr(N.closeBtnWrapperAttrs).css(N.closeBtnWrapperCSS);this.closeBtnBox=M.attr(N.closeBtnBoxAttrs).css(N.closeBtnBoxCSS);this.closeBtn=V.attr(N.closeBtnAttrs).css(N.closeBtnCSS).html(N.closeBtnHtml);this.img=p.attr(N.imgAttrs).css(N.imgCSS);this.imgNext=z.attr(N.imgNextAttrs).css(N.imgNextCSS);this.imgPrev=ac.attr(N.imgPrevAttrs).css(N.imgPrevCSS);this.bottom=b.attr(N.bottomAttrs).css(N.bottomCSS);var k={};for(var t in N.prevBtnHoverCSS){if(N.prevBtnCSS){k[t]=N.prevBtnCSS[t]}}var d={};for(var t in N.closeBtnHoverCSS){if(N.closeBtnCSS){d[t]=N.closeBtnCSS[t]}}var i={};for(var t in N.bottomHoverCSS){if(N.bottomCSS){i[t]=N.bottomCSS[t]}}this.prevBtnWrapper.hover(function(){v.stop().animate(N.prevBtnHoverCSS,N.fadeIn)},function(){v.stop().animate(k,N.fadeOut)});this.closeBtnWrapper.hover(function(){V.stop().animate(N.closeBtnHoverCSS,N.fadeIn)},function(){V.stop().animate(d,N.fadeOut)});this.bottom.hover(function(){b.stop().animate(N.bottomHoverCSS,N.fadeIn)},function(){b.stop().animate(i,N.fadeOut)});return this.each(function(x){R(this).unbind("click.abigimage").bind("click.abigimage",function(){return K(x)})})};R.abigimage={open:K,next:f,prev:O,close:af};R.fn.abigimage.defaults={fadeIn:"fast",fadeOut:"fast",slideWidth:0.4,slideVelocity:0.4,zoomMin:1.5,zoomMax:5,prevBtnHtml:"←",closeBtnHtml:"x",keyNext:[13,32,39,40],keyPrev:[8,37,38],keyClose:[27,35,36],onopen:function(){},onclose:function(){},overlayCSS:{position:"fixed",zIndex:101,top:0,right:0,bottom:0,left:0,backgroundColor:"#000",opacity:0.9},layoutCSS:{position:"fixed",zIndex:101,top:0,right:0,bottom:0,left:0,"-webkit-user-select":"none","-moz-user-select":"none","user-select":"none","-webkit-tap-highlight-color":"rgba(0, 0, 0, 0)",lineHeight:2.5},boxCSS:{position:"absolute",width:"312.5%",height:"100%",left:"-106.25%",top:0},prevBtnWrapperCSS:{cursor:"pointer",position:"absolute",top:0,right:"50%",bottom:0,left:0},closeBtnWrapperCSS:{cursor:"pointer",position:"absolute",top:0,right:0,bottom:0,left:"50%"},prevBtnBoxCSS:{position:"absolute",zIndex:103,top:0,bottom:0,left:"68%"},closeBtnBoxCSS:{position:"absolute",zIndex:103,top:0,bottom:0,right:"68%"},prevBtnCSS:{color:"#fff",backgroundColor:"#000",opacity:0.5,padding:"0 1em",borderRadius:"0 0 1ex 0"},closeBtnCSS:{color:"#fff",backgroundColor:"#000",opacity:0.5,padding:"0 1em",borderRadius:"0 0 0 1ex"},prevBtnHoverCSS:{opacity:1},closeBtnHoverCSS:{opacity:1},imgCSS:{position:"absolute",zIndex:102,margin:"auto",width:"auto",top:0,right:0,bottom:0,left:0,display:"block",cursor:"pointer",maxWidth:"32%",maxHeight:"100%"},imgNextCSS:{position:"absolute",margin:"auto",width:"auto",top:0,right:0,bottom:0,left:"68%",display:"block",maxWidth:"32%",maxHeight:"100%"},imgPrevCSS:{position:"absolute",margin:"auto",width:"auto",top:0,right:"68%",bottom:0,left:0,display:"block",maxWidth:"32%",maxHeight:"100%"},bottomCSS:{position:"fixed",zIndex:104,right:0,bottom:0,left:0,"-webkit-user-select":"text","-moz-user-select":"text","user-select":"text",backgroundColor:"#000",color:"#fff",opacity:0.5,padding:"0 1em",textAlign:"center"},bottomHoverCSS:{opacity:1},overlayAttrs:{},layoutAttrs:{},boxAttrs:{},prevBtnWrapperAttrs:{},prevBtnBoxAttrs:{},prevBtnAttrs:{},closeBtnWrapperAttrs:{},closeBtnBoxAttrs:{},closeBtnAttrs:{},imgAttrs:{},imgNextAttrs:{},imgPrevAttrs:{},bottomAttrs:{}}}(jQuery)); \ No newline at end of file diff --git a/index.html b/index.html index 7aae002..c7dbd4c 100644 --- a/index.html +++ b/index.html @@ -74,13 +74,13 @@

ABigImage

ABigImage is jQuery plugin for viewing big versions of images.

-

Current version: 1.2.7 (2014-07-24).

+

Current version: 1.2.8 (2014-07-24).

@@ -108,6 +108,7 @@

Features

  • Hotkeys for next, previous and close buttons.
  • Closing after viewing of all images.
  • Preloading of next and previous images.
    • +
  • Multi-touch zoom.
  • Uses link's href or data-href attribute for large images.
  • Fully customizable styles.
  • Customizable bottom area.