diff --git a/README.md b/README.md index 49e503f..1db3882 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ `ABigImage` is jQuery plugin for viewing big versions of images. -Current version **2.0.0** (2016-02-14). +Current version **2.0.1** (2016-06-07).
@@ -13,8 +13,8 @@ Current version **2.0.0** (2016-02-14).
-* [abigimage.jquery.js](abigimage.jquery.js) (14.1 kB) [min](abigimage.jquery.min.js) (5.9 kB, gzipped 2.2 kB) -* [abigimage.jquery.css](abigimage.jquery.css) (2.6 kB) [min](abigimage.jquery.min.css) (1.5 kB, gzipped 549 bytes) +* [abigimage.jquery.js](abigimage.jquery.js) (16.2 kB) [min](abigimage.jquery.min.js) (6.7 kB, gzipped 2.5 kB) +* [abigimage.jquery.css](abigimage.jquery.css) (2.6 kB) [min](abigimage.jquery.min.css) (1.5 kB, gzipped 550 bytes) * Fork at [Github](https://github.com/makryl/ABigImage) ## Features @@ -72,6 +72,7 @@ $(function(){ - `slideVelocity` - slide velocity to switch or close image (pixels per millisecond, default: 0.4). - `zoomMin` - minimal zoom that will hold (default: 1.5). - `zoomMax` - maximal zoom (default: 5). +- `zoomScrollMultiplier` - how much zoom on mouse scroll (default: 1.25). - `doubleTapInterval` - zoom double-tap interval (milliseconds, default: 400). - `prevBtnHtml` - html of "previous" button (default: `←`). - `closeBtnHtml` - html of "close" button (default: `x`). @@ -168,6 +169,7 @@ $.abigimage.unbind($myimgs1); ## Changes +- **2.1.0** - improved zoom positioning, added mouse scroll zoom, fixed prevention of non-plugin's hotkeys. - **2.0.0** - fixed multiple plugin instances context, added double-tap zoom, optimized touch event handlers, styles moved to CSS file, license changed to MIT. - **1.3.1** - fixed image caching, added `unbind` method. diff --git a/abigimage.jquery.js b/abigimage.jquery.js index 8397a6c..ea89a5d 100644 --- a/abigimage.jquery.js +++ b/abigimage.jquery.js @@ -18,7 +18,8 @@ prevBtn = $('
').addClass('abigimage-prevBtn') .appendTo(layout), closeBtn = $('
').addClass('abigimage-closeBtn') .appendTo(layout), bottom = $('
').addClass('abigimage-bottom') .appendTo(layout), - boxe = box[0]; + boxe = box[0], + $w = $(window); $.fn.abigimage = function(options) { var plugin = new ABigImage(this, options); @@ -33,31 +34,33 @@ }; $.fn.abigimage.defaults = { - fadeIn: 'fast', - fadeOut: 'fast', - slideWidth: .4, - slideVelocity: .4, - zoomMin: 1.5, - zoomMax: 5, - doubleTapInterval: 400, - prevBtnHtml: '←', - closeBtnHtml: 'x', - keyNext: [13 /* enter */, 32 /* space */, 39 /* right */, 40 /* down */], - keyPrev: [8 /* backspace */, 37 /* left */, 38 /* up */], - keyClose: [27 /* escape */, 35 /* end */, 36 /* home */], - onopen: null, - onclose: null + fadeIn: 'fast', + fadeOut: 'fast', + slideWidth: .4, + slideVelocity: .4, + zoomMin: 1.5, + zoomMax: 5, + zoomScrollMultiplier: 1.25, + zoomMoveViewport: 0.9, + doubleTapInterval: 400, + prevBtnHtml: '←', + closeBtnHtml: 'x', + keyNext: [13 /* enter */, 32 /* space */, 39 /* right */, 40 /* down */], + keyPrev: [8 /* backspace */, 37 /* left */, 38 /* up */], + keyClose: [27 /* escape */, 35 /* end */, 36 /* home */], + onopen: null, + onclose: null }; $.abigimage = { - overlay: overlay, - layout: layout, - prevBtnBox: prevBtnBox, - prevBtn: prevBtn, - closeBtnBox: closeBtnBox, - closeBtn: closeBtn, - box: box, - bottom: bottom, + overlay: overlay, + layout: layout, + prevBtnBox: prevBtnBox, + prevBtn: prevBtn, + closeBtnBox: closeBtnBox, + closeBtn: closeBtn, + box: box, + bottom: bottom, open: function(src, index, sel) { ((sel && sel._abigimage) || current || last).open(src, index); @@ -122,6 +125,9 @@ listen(boxe, 'msTransitionEnd', transitionEnd); listen(boxe, 'oTransitionEnd', transitionEnd); listen(boxe, 'transitionend', transitionEnd); + + listen(boxe, 'wheel', zoomwheel); + listen(boxe, 'mousemove', zoomwheel); } function ABigImage(elements, options) { @@ -241,7 +247,10 @@ this.prev(); } else if (this.keyClose.indexOf(keyCode) != -1) { this.close(); + } else { + return false; } + return true; }; ABigImage.prototype.nextIndex = function() { @@ -266,8 +275,9 @@ function documentKeydown(event) { if (current) { - prevent(event); - current.key(event.which); + if (current.key(event.which)) { + prevent(event); + } } } @@ -287,6 +297,10 @@ dy, iw, ih, + ww, + wh, + mx, + my, dstart, start, @@ -312,8 +326,7 @@ width = box.width() * 0.34; height = box.height(); minD = current.slideWidth * width; - iw = current.img.width(); - ih = current.img.height(); + initSizes(); } sx = x; sy = y; @@ -327,19 +340,20 @@ function touchmove(e) { if (!current) return; - dx = (med(e.touches, 'X') - med(touches, 'X')); - dy = (med(e.touches, 'Y') - med(touches, 'Y')); - x = sx + dx / s; - y = sy + dy / s; if (e.touches.length > 1) { - s = Math.max(1, ss * (dis(e) / k)); + s = ss * (dis(e) / k); + if (s < 1) { + s = 0.333 * s * s * s + 0.666; + } } - if (s > current.zoomMin) { - var mx = 0.5 * (iw - (iw / s)); - var my = 0.5 * (ih - (ih / s)); - x = Math.max(-mx, Math.min(mx, x)); - y = Math.max(-my, Math.min(my, y)); - } else { + + dx = (ww - med(touches, 'X')) / ss - (ww - med(e.touches, 'X')) / s; + dy = (wh - med(touches, 'Y')) / ss - (wh - med(e.touches, 'Y')) / s; + + x = sx + dx; + y = sy + dy; + + if (s <= current.zoomMin && e.touches.length <= 1) { if (null === vert) { var dv = Math.abs(dy) - Math.abs(dx); if (Math.abs(dv) > 2) { @@ -362,12 +376,30 @@ var end = (new Date()).getTime(); var time = end - start; - if (!e.touches.length) { + if (e.touches.length) { + sx = x; + sy = y; + ss = s; + dx = 0; + dy = 0; + touches = e.touches; + } else { if (s <= current.zoomMin) { if (time <= 1 || (dx >= -1 && dx <= 1 && dy >= -1 && dy <= 1)) { if (start - dstart <= current.doubleTapInterval) { + s = current.zoomMax; + var tx = med(touches, 'X'); + var ty = med(touches, 'Y'); + x += (ww - tx) / ss - (ww - tx) / s; + y += (wh - ty) / ss - (wh - ty) / s; + + mx = iw - ww / s; + my = ih - wh / s; + x = mx <= 0 ? 0 : Math.max(-mx, Math.min(mx, x)); + y = my <= 0 ? 0 : Math.max(-my, Math.min(my, y)); + current.box.addClass('abigimage-box-zoom'); - slideAnimate(x, y, current.zoomMax, true); + slideAnimate(x, y, s, true); } else { slideAnimate(0, 0, 1, true); } @@ -401,11 +433,16 @@ } } } - } else if (s > current.zoomMax) { - slideAnimate(x, y, current.zoomMax, true); - } else if (s > current.zoomMin) { + } else { if (end - dstart <= current.doubleTapInterval) { slideBack(); + } else { + s = Math.max(1, Math.min(current.zoomMax, s)); + mx = iw - ww / s; + my = ih - wh / s; + x = mx <= 0 ? 0 : Math.max(-mx, Math.min(mx, x)); + y = my <= 0 ? 0 : Math.max(-my, Math.min(my, y)); + slideAnimate(x, y, s, true); } } } @@ -417,7 +454,7 @@ function med(ts, c) { var p = 0; for (var t = 0, l = ts.length; t < l; t++) { - p += ts[t]['page' + c]; + p += ts[t]['client' + c]; } return p / l; } @@ -429,6 +466,13 @@ ); } + function initSizes() { + iw = current.img.width() / 2; + ih = current.img.height() / 2; + ww = $w.width() / 2; + wh = $w.height() / 2; + } + function slideNext() { slideAnimate(-width, 0, 1, true, function() { current.next(); @@ -475,4 +519,38 @@ } } + function zoomwheel(e) { + if (!current) return; + + initSizes(); + + if (e.deltaY > 0) { + s /= current.zoomScrollMultiplier; + } else if (e.deltaY < 0) { + s *= current.zoomScrollMultiplier; + } + s = Math.max(1, Math.min(current.zoomMax, s)); + + x = 0; + y = 0; + + mx = iw - ww / s; + my = ih - wh / s; + + if (mx > 0) + { + x = (ww - e.clientX) / (current.zoomMoveViewport * ww / iw) - (ww - e.clientX) / s; + x = Math.max(-mx, Math.min(mx, x)); + } + + if (my > 0) + { + y = (wh - e.clientY) / (current.zoomMoveViewport * wh / ih) - (wh - e.clientY) / s; + y = Math.max(-my, Math.min(my, y)); + } + + slideAnimate(x, y, s, true); + prevent(e); + } + }(jQuery)); diff --git a/abigimage.jquery.min.css b/abigimage.jquery.min.css index 1eb748a..2eab55b 100644 --- a/abigimage.jquery.min.css +++ b/abigimage.jquery.min.css @@ -1,2 +1,2 @@ -/*! abigimage v2.0.0 (2016-02-14) */ +/*! abigimage v2.0.1 (2016-06-07) */ .abigimage-layout,.abigimage-overlay{position:fixed;z-index:100;right:0;left:0;bottom:0}.abigimage-overlay{top:0;background-color:#000;border:1px solid #000;opacity:.9}.abigimage-closeBtn,.abigimage-prevBtn{opacity:.5;top:0;background-color:#000;color:#fff;padding:0 1em;transition:all .2s ease-in-out}.abigimage-layout{top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;line-height:2.5}.abigimage-prevBtnBox{cursor:pointer;position:absolute;top:0;right:50%;bottom:0;left:0}.abigimage-closeBtnBox{cursor:pointer;position:absolute;top:0;right:0;bottom:0;left:50%}.abigimage-prevBtn{border-radius:0 0 1ex;position:absolute;left:0}.abigimage-closeBtn{border-radius:0 0 0 1ex;position:absolute;right:0}.abigimage-closeBtn-hover,.abigimage-closeBtn:hover,.abigimage-prevBtn-hover,.abigimage-prevBtn:hover{opacity:1}.abigimage-box{position:absolute;width:312.5%;height:100%;left:-106.25%;top:0}.abigimage-img,.abigimage-imgNext,.abigimage-imgPrev{position:absolute;margin:auto;width:auto;top:0;display:block;max-width:32%;max-height:100%;bottom:0}.abigimage-box-zoom{z-index:101}.abigimage-img{right:0;left:0;cursor:pointer}.abigimage-imgNext{right:0;left:68%}.abigimage-imgPrev{right:68%;left:0}.abigimage-bottom{position:fixed;right:0;bottom:0;left:0;-webkit-user-select:text;-moz-user-select:text;user-select:text;background-color:#000;color:#fff;opacity:.5;padding:0 1em;text-align:center;transition:all .2s ease-in-out}.abigimage-bottom:hover{opacity:1} \ No newline at end of file diff --git a/abigimage.jquery.min.js b/abigimage.jquery.min.js index 6a5d04d..944fd53 100644 --- a/abigimage.jquery.min.js +++ b/abigimage.jquery.min.js @@ -1,2 +1,2 @@ -/*! abigimage v2.0.0 (2016-02-14) */ -!function(a){function b(a,b,c){a.addEventListener(b,c)}function c(b,c){a.extend(this,a.fn.abigimage.defaults,c),this.elements=b,this.overlay=t,this.layout=u,this.prevBtnBox=w,this.prevBtn=y,this.closeBtnBox=x,this.closeBtn=z,this.box=v,this.bottom=A,this.index=-1,this.distance=0}function d(b,c){return a("").addClass(b).attr("src",c).appendTo(v)}function e(a){s&&(f(a),s.key(a.which))}function f(a){a.preventDefault(),a.stopPropagation()}function g(a){s&&(a.touches.length>1?(I=k(a),s.box.addClass("abigimage-box-zoom")):(S=null,N=O,O=(new Date).getTime(),P=.34*v.width(),Q=v.height(),R=s.slideWidth*P,L=s.img.width(),M=s.img.height()),C=F,D=G,E=H,J=0,K=0,T=a.touches,f(a))}function h(a){if(s){if(J=j(a.touches,"X")-j(T,"X"),K=j(a.touches,"Y")-j(T,"Y"),F=C+J/H,G=D+K/H,a.touches.length>1&&(H=Math.max(1,E*(k(a)/I))),H>s.zoomMin){var b=.5*(L-L/H),c=.5*(M-M/H);F=Math.max(-b,Math.min(b,F)),G=Math.max(-c,Math.min(c,G))}else{if(null===S){var d=Math.abs(K)-Math.abs(J);Math.abs(d)>2&&(S=d>0)}S?F=0:G=0}p(F,G,H),f(a)}}function i(a){if(s){var b=(new Date).getTime(),c=b-O;if(!a.touches.length)if(H<=s.zoomMin)if(1>=c||J>=-1&&1>=J&&K>=-1&&1>=K)O-N<=s.doubleTapInterval?(s.box.addClass("abigimage-box-zoom"),p(F,G,s.zoomMax,!0)):p(0,0,1,!0);else if(S){var d=Math.abs(K);d>R?o():d/c>s.slideVelocity?o():n()}else-R>J?l():J>R?m():Math.abs(J)/c>s.slideVelocity?0>J?l():m():n();else H>s.zoomMax?p(F,G,s.zoomMax,!0):H>s.zoomMin&&b-N<=s.doubleTapInterval&&n();T=a.touches,f(a)}}function j(a,b){for(var c=0,d=0,e=a.length;e>d;d++)c+=a[d]["page"+b];return c/e}function k(a){return Math.sqrt(Math.pow(a.touches[0].pageX-a.touches[1].pageX,2)+Math.pow(a.touches[0].pageY-a.touches[1].pageY,2))}function l(){p(-P,0,1,!0,function(){s.next()})}function m(){p(P,0,1,!0,function(){s.prev()})}function n(){s.box.removeClass("abigimage-box-zoom"),p(0,0,1,!0)}function o(){n(),s.close()}function p(a,b,c,d,e){F=a,G=b,H=c,U=d,V=e;var f="scale("+H+") translate3d("+F+"px, "+G+"px, 0)";W.transition=d?"all .2s ease-out":"",W.webkitTransform=f,W.mozTransform=f,W.msTransform=f,W.oTransform=f,W.transform=f}function q(){if(U=!1,V){var a=V;V=null,a()}}var r,s,t=a("
").addClass("abigimage-overlay").appendTo("body").hide(),u=a("
").addClass("abigimage-layout").appendTo("body").hide(),v=a("
").addClass("abigimage-box").appendTo(u),w=a("
").addClass("abigimage-prevBtnBox").appendTo(v),x=a("
").addClass("abigimage-closeBtnBox").appendTo(v),y=a("
").addClass("abigimage-prevBtn").appendTo(u),z=a("
").addClass("abigimage-closeBtn").appendTo(u),A=a("
").addClass("abigimage-bottom").appendTo(u),B=v[0];a.fn.abigimage=function(b){var d=new c(this,b);return this._abigimage=d,r=d,this.each(function(b){a(this).unbind("click.abigimage").bind("click.abigimage",function(a){f(a),d.open(b)})})},a.fn.abigimage.defaults={fadeIn:"fast",fadeOut:"fast",slideWidth:.4,slideVelocity:.4,zoomMin:1.5,zoomMax:5,doubleTapInterval:400,prevBtnHtml:"←",closeBtnHtml:"x",keyNext:[13,32,39,40],keyPrev:[8,37,38],keyClose:[27,35,36],onopen:null,onclose:null},a.abigimage={overlay:t,layout:u,prevBtnBox:w,prevBtn:y,closeBtnBox:x,closeBtn:z,box:v,bottom:A,open:function(a,b,c){(c&&c._abigimage||s||r).open(a,b)},close:function(a){(a&&a._abigimage||s||r).close()},next:function(a){(a&&a._abigimage||s||r).next()},prev:function(a){(a&&a._abigimage||s||r).prev()},unbind:function(a){(a&&a._abigimage||s||r).unbind()}},w.click(function(a){f(a),s&&s.prev()}).hover(function(){y.addClass("abigimage-prevBtn-hover")},function(){y.removeClass("abigimage-prevBtn-hover")}),x.click(function(a){f(a),s&&s.close()}).hover(function(){z.addClass("abigimage-closeBtn-hover")},function(){z.removeClass("abigimage-closeBtn-hover")}),y.click(function(a){f(a),s&&s.prev()}),z.click(function(a){f(a),s&&s.close()}),u.on("touchmove",f).on("wheel",f),B.addEventListener&&(b(B,"touchstart",g),b(B,"touchmove",h),b(B,"touchend",i),b(B,"touchcancel",i),b(B,"webkitTransitionEnd",q),b(B,"mozTransitionEnd",q),b(B,"msTransitionEnd",q),b(B,"oTransitionEnd",q),b(B,"transitionend",q)),c.prototype.open=function(b,c){s=this;var g;if("number"==typeof b){if(c=b,c==this.index||0>c||c>this.elements.length-1)return;g=a(this.elements[c]),b=g.data("href")||g.attr("href")}else if("number"!=typeof c)c=this.index;else if(c==this.index)return;this.index=c,this.prevBtn.html(this.prevBtnHtml),this.closeBtn.html(this.closeBtnHtml),this.bottom.html(""),a("img",this.box).remove(),this.box.removeClass("abigimage-box-zoom"),p(0,0,1),this.img=d("abigimage-img",b).click(function(a){f(a),s&&s.next()});var h=a(this.elements[this.nextIndex()]);this.imgNext=d("abigimage-imgNext",h.data("href")||h.attr("href"));var i=a(this.elements[this.prevIndex()]);this.imgPrev=d("abigimage-imgPrev",i.data("href")||i.attr("href")),t.fadeIn(),u.fadeIn(),a(document).unbind("keydown",e).bind("keydown",e),this.onopen&&this.onopen.call(this,g)},c.prototype.next=function(){this.distance==this.elements.length-1?this.close():(++this.distance,this.elements[this.nextIndex()].click())},c.prototype.prev=function(){this.distance==1-this.elements.length?this.close():(--this.distance,this.elements[this.prevIndex()].click())},c.prototype.close=function(){s&&(a(document).unbind("keydown",e),t.fadeOut(this.fadeOut),u.fadeOut(this.fadeOut,q),this.onclose&&this.onclose.call(this),this.index=-1,this.distance=0,s=null)},c.prototype.unbind=function(){this.close(),this.elements.each(function(){a(this).unbind("click.abigimage")})},c.prototype.key=function(a){-1!=this.keyNext.indexOf(a)?this.next():-1!=this.keyPrev.indexOf(a)?this.prev():-1!=this.keyClose.indexOf(a)&&this.close()},c.prototype.nextIndex=function(){var a=this.index+1;return a>=this.elements.length&&(a=0),a},c.prototype.prevIndex=function(){var a=this.index-1;return 0>a&&(a=this.elements.length-1),a};var C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W=B.style}(jQuery); \ No newline at end of file +/*! abigimage v2.0.1 (2016-06-07) */ +!function(a){function b(a,b,c){a.addEventListener(b,c)}function c(b,c){a.extend(this,a.fn.abigimage.defaults,c),this.elements=b,this.overlay=v,this.layout=w,this.prevBtnBox=y,this.prevBtn=A,this.closeBtnBox=z,this.closeBtn=B,this.box=x,this.bottom=C,this.index=-1,this.distance=0}function d(b,c){return a("").addClass(b).attr("src",c).appendTo(x)}function e(a){u&&u.key(a.which)&&f(a)}function f(a){a.preventDefault(),a.stopPropagation()}function g(a){u&&(a.touches.length>1?(L=k(a),u.box.addClass("abigimage-box-zoom")):(Z=null,U=V,V=(new Date).getTime(),W=.34*x.width(),X=x.height(),Y=u.slideWidth*W,l()),F=I,G=J,H=K,M=0,N=0,$=a.touches,f(a))}function h(a){if(u){if(a.touches.length>1&&(K=H*(k(a)/L),1>K&&(K=.333*K*K*K+.666)),M=(Q-j($,"X"))/H-(Q-j(a.touches,"X"))/K,N=(R-j($,"Y"))/H-(R-j(a.touches,"Y"))/K,I=F+M,J=G+N,K<=u.zoomMin&&a.touches.length<=1){if(null===Z){var b=Math.abs(N)-Math.abs(M);Math.abs(b)>2&&(Z=b>0)}Z?I=0:J=0}q(I,J,K),f(a)}}function i(a){if(u){var b=(new Date).getTime(),c=b-V;if(a.touches.length)F=I,G=J,H=K,M=0,N=0,$=a.touches;else if(K<=u.zoomMin)if(1>=c||M>=-1&&1>=M&&N>=-1&&1>=N)if(V-U<=u.doubleTapInterval){K=u.zoomMax;var d=j($,"X"),e=j($,"Y");I+=(Q-d)/H-(Q-d)/K,J+=(R-e)/H-(R-e)/K,S=O-Q/K,T=P-R/K,I=0>=S?0:Math.max(-S,Math.min(S,I)),J=0>=T?0:Math.max(-T,Math.min(T,J)),u.box.addClass("abigimage-box-zoom"),q(I,J,K,!0)}else q(0,0,1,!0);else if(Z){var g=Math.abs(N);g>Y?p():g/c>u.slideVelocity?p():o()}else-Y>M?m():M>Y?n():Math.abs(M)/c>u.slideVelocity?0>M?m():n():o();else b-U<=u.doubleTapInterval?o():(K=Math.max(1,Math.min(u.zoomMax,K)),S=O-Q/K,T=P-R/K,I=0>=S?0:Math.max(-S,Math.min(S,I)),J=0>=T?0:Math.max(-T,Math.min(T,J)),q(I,J,K,!0));$=a.touches,f(a)}}function j(a,b){for(var c=0,d=0,e=a.length;e>d;d++)c+=a[d]["client"+b];return c/e}function k(a){return Math.sqrt(Math.pow(a.touches[0].pageX-a.touches[1].pageX,2)+Math.pow(a.touches[0].pageY-a.touches[1].pageY,2))}function l(){O=u.img.width()/2,P=u.img.height()/2,Q=E.width()/2,R=E.height()/2}function m(){q(-W,0,1,!0,function(){u.next()})}function n(){q(W,0,1,!0,function(){u.prev()})}function o(){u.box.removeClass("abigimage-box-zoom"),q(0,0,1,!0)}function p(){o(),u.close()}function q(a,b,c,d,e){I=a,J=b,K=c,_=d,aa=e;var f="scale("+K+") translate3d("+I+"px, "+J+"px, 0)";ba.transition=d?"all .2s ease-out":"",ba.webkitTransform=f,ba.mozTransform=f,ba.msTransform=f,ba.oTransform=f,ba.transform=f}function r(){if(_=!1,aa){var a=aa;aa=null,a()}}function s(a){u&&(l(),a.deltaY>0?K/=u.zoomScrollMultiplier:a.deltaY<0&&(K*=u.zoomScrollMultiplier),K=Math.max(1,Math.min(u.zoomMax,K)),I=0,J=0,S=O-Q/K,T=P-R/K,S>0&&(I=(Q-a.clientX)/(u.zoomMoveViewport*Q/O)-(Q-a.clientX)/K,I=Math.max(-S,Math.min(S,I))),T>0&&(J=(R-a.clientY)/(u.zoomMoveViewport*R/P)-(R-a.clientY)/K,J=Math.max(-T,Math.min(T,J))),q(I,J,K,!0),f(a))}var t,u,v=a("
").addClass("abigimage-overlay").appendTo("body").hide(),w=a("
").addClass("abigimage-layout").appendTo("body").hide(),x=a("
").addClass("abigimage-box").appendTo(w),y=a("
").addClass("abigimage-prevBtnBox").appendTo(x),z=a("
").addClass("abigimage-closeBtnBox").appendTo(x),A=a("
").addClass("abigimage-prevBtn").appendTo(w),B=a("
").addClass("abigimage-closeBtn").appendTo(w),C=a("
").addClass("abigimage-bottom").appendTo(w),D=x[0],E=a(window);a.fn.abigimage=function(b){var d=new c(this,b);return this._abigimage=d,t=d,this.each(function(b){a(this).unbind("click.abigimage").bind("click.abigimage",function(a){f(a),d.open(b)})})},a.fn.abigimage.defaults={fadeIn:"fast",fadeOut:"fast",slideWidth:.4,slideVelocity:.4,zoomMin:1.5,zoomMax:5,zoomScrollMultiplier:1.25,zoomMoveViewport:.9,doubleTapInterval:400,prevBtnHtml:"←",closeBtnHtml:"x",keyNext:[13,32,39,40],keyPrev:[8,37,38],keyClose:[27,35,36],onopen:null,onclose:null},a.abigimage={overlay:v,layout:w,prevBtnBox:y,prevBtn:A,closeBtnBox:z,closeBtn:B,box:x,bottom:C,open:function(a,b,c){(c&&c._abigimage||u||t).open(a,b)},close:function(a){(a&&a._abigimage||u||t).close()},next:function(a){(a&&a._abigimage||u||t).next()},prev:function(a){(a&&a._abigimage||u||t).prev()},unbind:function(a){(a&&a._abigimage||u||t).unbind()}},y.click(function(a){f(a),u&&u.prev()}).hover(function(){A.addClass("abigimage-prevBtn-hover")},function(){A.removeClass("abigimage-prevBtn-hover")}),z.click(function(a){f(a),u&&u.close()}).hover(function(){B.addClass("abigimage-closeBtn-hover")},function(){B.removeClass("abigimage-closeBtn-hover")}),A.click(function(a){f(a),u&&u.prev()}),B.click(function(a){f(a),u&&u.close()}),w.on("touchmove",f).on("wheel",f),D.addEventListener&&(b(D,"touchstart",g),b(D,"touchmove",h),b(D,"touchend",i),b(D,"touchcancel",i),b(D,"webkitTransitionEnd",r),b(D,"mozTransitionEnd",r),b(D,"msTransitionEnd",r),b(D,"oTransitionEnd",r),b(D,"transitionend",r),b(D,"wheel",s),b(D,"mousemove",s)),c.prototype.open=function(b,c){u=this;var g;if("number"==typeof b){if(c=b,c==this.index||0>c||c>this.elements.length-1)return;g=a(this.elements[c]),b=g.data("href")||g.attr("href")}else if("number"!=typeof c)c=this.index;else if(c==this.index)return;this.index=c,this.prevBtn.html(this.prevBtnHtml),this.closeBtn.html(this.closeBtnHtml),this.bottom.html(""),a("img",this.box).remove(),this.box.removeClass("abigimage-box-zoom"),q(0,0,1),this.img=d("abigimage-img",b).click(function(a){f(a),u&&u.next()});var h=a(this.elements[this.nextIndex()]);this.imgNext=d("abigimage-imgNext",h.data("href")||h.attr("href"));var i=a(this.elements[this.prevIndex()]);this.imgPrev=d("abigimage-imgPrev",i.data("href")||i.attr("href")),v.fadeIn(),w.fadeIn(),a(document).unbind("keydown",e).bind("keydown",e),this.onopen&&this.onopen.call(this,g)},c.prototype.next=function(){this.distance==this.elements.length-1?this.close():(++this.distance,this.elements[this.nextIndex()].click())},c.prototype.prev=function(){this.distance==1-this.elements.length?this.close():(--this.distance,this.elements[this.prevIndex()].click())},c.prototype.close=function(){u&&(a(document).unbind("keydown",e),v.fadeOut(this.fadeOut),w.fadeOut(this.fadeOut,r),this.onclose&&this.onclose.call(this),this.index=-1,this.distance=0,u=null)},c.prototype.unbind=function(){this.close(),this.elements.each(function(){a(this).unbind("click.abigimage")})},c.prototype.key=function(a){if(-1!=this.keyNext.indexOf(a))this.next();else if(-1!=this.keyPrev.indexOf(a))this.prev();else{if(-1==this.keyClose.indexOf(a))return!1;this.close()}return!0},c.prototype.nextIndex=function(){var a=this.index+1;return a>=this.elements.length&&(a=0),a},c.prototype.prevIndex=function(){var a=this.index-1;return 0>a&&(a=this.elements.length-1),a};var F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,$,_,aa,ba=D.style}(jQuery); \ No newline at end of file diff --git a/index.html b/index.html index 64e6c25..553a968 100644 --- a/index.html +++ b/index.html @@ -111,7 +111,7 @@

ABigImage

ABigImage is jQuery plugin for viewing big versions of images.

-

Current version 2.0.0 (2016-02-14).

+

Current version 2.0.1 (2016-06-07).

@@ -122,8 +122,8 @@

ABigImage

Features

@@ -153,7 +153,7 @@

Example

Live example, where I'm using and testing this plugin at the moment: kawaiinyan.com.

- + - +