diff --git a/README.md b/README.md index 60f064b..1534837 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ `ABigImage` is jQuery plugin for viewing big versions of images. -Current version **2.1.0** (2017-01-15). +Current version **2.1.1** (2018-01-20).
@@ -13,8 +13,8 @@ Current version **2.1.0** (2017-01-15).
-* [abigimage.jquery.js](abigimage.jquery.js) (26.9 kB) [min](abigimage.jquery.min.js) (10.2 kB, gzipped 3.6 kB) -* [abigimage.jquery.css](abigimage.jquery.css) (6 kB) [min](abigimage.jquery.min.css) (3.1 kB, gzipped 802 bytes) +* [abigimage.jquery.js](abigimage.jquery.js) (30.1 kB) [min](abigimage.jquery.min.js) (10.2 kB, gzipped 3.6 kB) +* [abigimage.jquery.css](abigimage.jquery.css) (6 kB) [min](abigimage.jquery.min.css) (3.1 kB, gzipped 801 bytes) * Fork at [Github](https://github.com/makryl/ABigImage) ## Features @@ -187,10 +187,11 @@ $.abigimage.unbind($myimgs1); ## Changes +- **2.1.1** - fixed init in `head`, plugin now has lazy creation of it's dom. - **2.1.0** - improved animations for not fully loaded images, improved zoom positioning, added mouse scroll zoom, added scrolling down bottom area, added zoom out closing, added next and zoom buttons, added loading spinner, added images counter, 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. ## MIT License -Copyright (c) 2014-2016 Maksim Krylosov +Copyright (c) 2014-2018 Maksim Krylosov diff --git a/abigimage.jquery.js b/abigimage.jquery.js index aadf9a9..e0f8e26 100644 --- a/abigimage.jquery.js +++ b/abigimage.jquery.js @@ -8,91 +8,18 @@ (function ($) { - var last, - current, - - //overscroll = $('
').addClass('abigimage-overscroll') .appendTo('body'), - overlay = $('
').addClass('abigimage-overlay') .appendTo('body'), - layout = $('
').addClass('abigimage-layout') .appendTo('body'), - wrapper = $('
').addClass('abigimage-wrapper') .appendTo(layout), - box = $('
').addClass('abigimage-box') .appendTo(wrapper), - prevBtnBox = $('
').addClass('abigimage-prevBtnBox') .appendTo(box), - closeBtnBox = $('
').addClass('abigimage-closeBtnBox').appendTo(box), - top = $('
').addClass('abigimage-top') .appendTo(layout), - prevBtn = $('
').addClass('abigimage-prevBtn') .appendTo(top), - nextBtn = $('
').addClass('abigimage-nextBtn') .appendTo(top), - counter = $('
').addClass('abigimage-counter') .appendTo(top), - closeBtn = $('
').addClass('abigimage-closeBtn') .appendTo(top), - zoomOutBtn = $('
').addClass('abigimage-zoomOutBtn') .appendTo(top), - zoomInBtn = $('
').addClass('abigimage-zoomInBtn') .appendTo(top), - //spinner = $('
').addClass('abigimage-spinner') .appendTo(top), - bottomBox = $('
').addClass('abigimage-bottomBox') .appendTo(layout), - bottom = $('
').addClass('abigimage-bottom') .appendTo(bottomBox), - //under = $('
').addClass('abigimage-under') .appendTo(layout), - - cssLayoutActive = 'abigimage-layout-active', - cssLayoutFadeout = 'abigimage-layout-fadeout', - cssLayoutFull = 'abigimage-layout-full', - //cssLayoutSlide = 'abigimage-layout-slide', - cssLayoutZoom = 'abigimage-layout-zoom', - cssOverlayActive = 'abigimage-overlay-active', - cssPrevBtnHover = 'abigimage-prevBtn-hover', - cssNextBtnHover = 'abigimage-nextBtn-hover', - cssCloseBtnHover = 'abigimage-closeBtn-hover', - //cssSpinnerActive = 'abigimage-spinner-active', - - boxe = box[0], - //bboxe = bottomBox[0], - $w = $(window), - $h = $('html'), - $d = $(document), - $b = $(document.body), - - hpr = null, - bo = null, - //wst = null, - //bt = null, - - sx, - sy, - ss, - mss, - x, - y, - s, - k, - dx, - dy, - iw, - ih, - ww, - wh, - mx, - my, - - ztimer, - zstart, - zsign, - ttimer, - dstart, - start, - width, - height, - minD, - vert, - touches, - intr, - ontr, - sliding = false, - wheellock = false, - wheellocktimer, - zoomlock = false, - zoomlocktimer, - bs = boxe.style, - os = overlay[0].style; + var inited; + + function prevent(event) { + event.preventDefault(); + event.stopPropagation(); + } $.fn.abigimage = function(options) { - var plugin = new ABigImage(this, options); + if (!inited) { + inited = init(); + } + var plugin = new inited(this, options); this._abigimage = plugin; last = plugin; return this.each(function(i) { @@ -103,788 +30,870 @@ }); }; - $.fn.abigimage.defaults = { - duration: 200, - slideWidth: .4, - slideVelocity: .4, - zoomMin: 1.5, - zoomMax: 5, - zoomClose: .9, - zoomMoveViewport: .9, - zoomVelocity: .04, - doubleTapInterval: 400, - prevBtnHtml: '←', - nextBtnHtml: '→', - zoomInBtnHtml: '+', - zoomOutBtnHtml: '−', - closeBtnHtml: '×', - 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, - wrapper: wrapper, - box: box, - prevBtnBox: prevBtnBox, - closeBtnBox: closeBtnBox, - top: top, - prevBtn: prevBtn, - nextBtn: nextBtn, - zoomInBtn: zoomInBtn, - zoomOutBtn: zoomOutBtn, - closeBtn: closeBtn, - counter: counter, - //spinner: spinner, - bottomBox: bottomBox, - bottom: bottom, - //under: under, - - open: function(src, index, sel) { - ((sel && sel._abigimage) || current || last).open(src, index); - }, - close: function(sel) { - ((sel && sel._abigimage) || current || last).close(); - }, - next: function(sel) { - ((sel && sel._abigimage) || current || last).next(); - }, - prev: function(sel) { - ((sel && sel._abigimage) || current || last).prev(); - }, - unbind: function(sel) { - ((sel && sel._abigimage) || current || last).unbind(); - } - }; + function init() { + var last, + current, + + //overscroll = $('
').addClass('abigimage-overscroll') .appendTo('body'), + overlay = $('
').addClass('abigimage-overlay') .appendTo('body'), + layout = $('
').addClass('abigimage-layout') .appendTo('body'), + wrapper = $('
').addClass('abigimage-wrapper') .appendTo(layout), + box = $('
').addClass('abigimage-box') .appendTo(wrapper), + prevBtnBox = $('
').addClass('abigimage-prevBtnBox') .appendTo(box), + closeBtnBox = $('
').addClass('abigimage-closeBtnBox').appendTo(box), + top = $('
').addClass('abigimage-top') .appendTo(layout), + prevBtn = $('
').addClass('abigimage-prevBtn') .appendTo(top), + nextBtn = $('
').addClass('abigimage-nextBtn') .appendTo(top), + counter = $('
').addClass('abigimage-counter') .appendTo(top), + closeBtn = $('
').addClass('abigimage-closeBtn') .appendTo(top), + zoomOutBtn = $('
').addClass('abigimage-zoomOutBtn') .appendTo(top), + zoomInBtn = $('
').addClass('abigimage-zoomInBtn') .appendTo(top), + //spinner = $('
').addClass('abigimage-spinner') .appendTo(top), + bottomBox = $('
').addClass('abigimage-bottomBox') .appendTo(layout), + bottom = $('
').addClass('abigimage-bottom') .appendTo(bottomBox), + //under = $('
').addClass('abigimage-under') .appendTo(layout), + + cssLayoutActive = 'abigimage-layout-active', + cssLayoutFadeout = 'abigimage-layout-fadeout', + cssLayoutFull = 'abigimage-layout-full', + //cssLayoutSlide = 'abigimage-layout-slide', + cssLayoutZoom = 'abigimage-layout-zoom', + cssOverlayActive = 'abigimage-overlay-active', + cssPrevBtnHover = 'abigimage-prevBtn-hover', + cssNextBtnHover = 'abigimage-nextBtn-hover', + cssCloseBtnHover = 'abigimage-closeBtn-hover', + //cssSpinnerActive = 'abigimage-spinner-active', + + boxe = box[0], + //bboxe = bottomBox[0], + $w = $(window), + $h = $('html'), + $d = $(document), + $b = $(document.body), + + hpr = null, + bo = null, + //wst = null, + //bt = null, + + sx, + sy, + ss, + mss, + x, + y, + s, + k, + dx, + dy, + iw, + ih, + ww, + wh, + mx, + my, + + ztimer, + zstart, + zsign, + ttimer, + dstart, + start, + width, + height, + minD, + vert, + touches, + intr, + ontr, + sliding = false, + wheellock = false, + wheellocktimer, + zoomlock = false, + zoomlocktimer, + bs = boxe.style, + os = overlay[0].style; + + $.fn.abigimage.defaults = { + duration: 200, + slideWidth: .4, + slideVelocity: .4, + zoomMin: 1.5, + zoomMax: 5, + zoomClose: .9, + zoomMoveViewport: .9, + zoomVelocity: .04, + doubleTapInterval: 400, + prevBtnHtml: '←', + nextBtnHtml: '→', + zoomInBtnHtml: '+', + zoomOutBtnHtml: '−', + closeBtnHtml: '×', + 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 + }; - prevBtnBox.click(function(event) { - prevent(event); - if (current) current.prev(); - }).hover(function() { - prevBtn.addClass(cssPrevBtnHover); - }, function() { - prevBtn.removeClass(cssPrevBtnHover); - }); - - closeBtnBox.click(function(event) { - prevent(event); - if (current) current.close(); - }).hover(function() { - closeBtn.addClass(cssCloseBtnHover); - }, function() { - closeBtn.removeClass(cssCloseBtnHover); - }); - - prevBtn.click(function(event) { - prevent(event); - if (current) current.prev(); - }); - - nextBtn.click(function(event) { - prevent(event); - if (current) current.next(); - }); - - var reqAnimFrame = window.requestAnimationFrame - || window.mozRequestAnimationFrame - || window.webkitRequestAnimationFrame - || window.msRequestAnimationFrame - || function(callback){ - setTimeout(function(){ - callback((new Date()).getTime()); - }, 1000 / 60); + $.abigimage = { + overlay: overlay, + layout: layout, + wrapper: wrapper, + box: box, + prevBtnBox: prevBtnBox, + closeBtnBox: closeBtnBox, + top: top, + prevBtn: prevBtn, + nextBtn: nextBtn, + zoomInBtn: zoomInBtn, + zoomOutBtn: zoomOutBtn, + closeBtn: closeBtn, + counter: counter, + //spinner: spinner, + bottomBox: bottomBox, + bottom: bottom, + //under: under, + + open: function(src, index, sel) { + ((sel && sel._abigimage) || current || last).open(src, index); + }, + close: function(sel) { + ((sel && sel._abigimage) || current || last).close(); + }, + next: function(sel) { + ((sel && sel._abigimage) || current || last).next(); + }, + prev: function(sel) { + ((sel && sel._abigimage) || current || last).prev(); + }, + unbind: function(sel) { + ((sel && sel._abigimage) || current || last).unbind(); + } }; + prevBtnBox.click(function(event) { + prevent(event); + if (current) current.prev(); + }).hover(function() { + prevBtn.addClass(cssPrevBtnHover); + }, function() { + prevBtn.removeClass(cssPrevBtnHover); + }); - function zoomAnimationFrame(t) { - if (current && zsign !== null) { - if (zstart) { - zoom(zsign * current.zoomVelocity * (t - zstart)); - } else { - zstart = t; + closeBtnBox.click(function(event) { + prevent(event); + if (current) current.close(); + }).hover(function() { + closeBtn.addClass(cssCloseBtnHover); + }, function() { + closeBtn.removeClass(cssCloseBtnHover); + }); + + prevBtn.click(function(event) { + prevent(event); + if (current) current.prev(); + }); + + nextBtn.click(function(event) { + prevent(event); + if (current) current.next(); + }); + + var reqAnimFrame = window.requestAnimationFrame + || window.mozRequestAnimationFrame + || window.webkitRequestAnimationFrame + || window.msRequestAnimationFrame + || function(callback){ + setTimeout(function(){ + callback((new Date()).getTime()); + }, 1000 / 60); + }; + + + function zoomAnimationFrame(t) { + if (current && zsign !== null) { + if (zstart) { + zoom(zsign * current.zoomVelocity * (t - zstart)); + } else { + zstart = t; + } + reqAnimFrame(zoomAnimationFrame); } - reqAnimFrame(zoomAnimationFrame); } - } - zoomInBtn.mousedown(function(event) { - prevent(event); - initSizes(); - zstart = null; - zsign = 1; - reqAnimFrame(zoomAnimationFrame); - }).mouseup(function(event){ - prevent(event); - zsign = null; - }).mouseout(function(){ - zsign = null; - }).click(function(event) { - prevent(event); - if (current) zoom(current.zoomVelocity * current.duration, true); - }); - - zoomOutBtn.mousedown(function(event) { - prevent(event); - initSizes(); - zstart = null; - zsign = -1; - reqAnimFrame(zoomAnimationFrame); - }).mouseup(function(event){ - prevent(event); - zsign = null; - }).mouseout(function(){ - zsign = null; - }).click(function(event) { - prevent(event); - if (current) zoom(-current.zoomVelocity * current.duration, true); - }); - - closeBtn.click(function(event) { - prevent(event); - if (current) current.close(); - }); - - //layout - // .on('touchmove', prevent) - // .on('wheel', function(e) { - // e.stopPropagation(); - // }); - - if (boxe.addEventListener) { - function listen(element, event, listener) { // just for minification - element.addEventListener(event, listener); - } - listen(boxe, 'touchstart', touchstart); - listen(boxe, 'touchmove', touchmove); - listen(boxe, 'touchend', touchend); - listen(boxe, 'touchcancel', touchend); - - listen(boxe, 'webkitTransitionEnd', transitionEnd); - listen(boxe, 'mozTransitionEnd', transitionEnd); - listen(boxe, 'msTransitionEnd', transitionEnd); - listen(boxe, 'oTransitionEnd', transitionEnd); - listen(boxe, 'transitionend', transitionEnd); - - listen(boxe, 'wheel', zoomwheel); - listen(boxe, 'mousemove', zoommousemove); - } + zoomInBtn.mousedown(function(event) { + prevent(event); + initSizes(); + zstart = null; + zsign = 1; + reqAnimFrame(zoomAnimationFrame); + }).mouseup(function(event){ + prevent(event); + zsign = null; + }).mouseout(function(){ + zsign = null; + }).click(function(event) { + prevent(event); + if (current) zoom(current.zoomVelocity * current.duration, true); + }); - function ABigImage(elements, options) { - $.extend(this, $.fn.abigimage.defaults, options); - - this.elements = elements; - - this.overlay = overlay; - this.layout = layout; - this.wrapper = wrapper; - this.prevBtnBox = prevBtnBox; - this.closeBtnBox = closeBtnBox; - this.box = box; - this.top = top; - this.prevBtn = prevBtn; - this.nextBtn = nextBtn; - this.zoomInBtn = zoomInBtn; - this.zoomOutBtn = zoomOutBtn; - this.closeBtn = closeBtn; - this.counter = counter; - //this.spinner = spinner; - this.bottomBox = bottomBox; - this.bottom = bottom; - //this.under = under; - - this.index = -1; - this.distance = 0; - this.opened = null; - } + zoomOutBtn.mousedown(function(event) { + prevent(event); + initSizes(); + zstart = null; + zsign = -1; + reqAnimFrame(zoomAnimationFrame); + }).mouseup(function(event){ + prevent(event); + zsign = null; + }).mouseout(function(){ + zsign = null; + }).click(function(event) { + prevent(event); + if (current) zoom(-current.zoomVelocity * current.duration, true); + }); - ABigImage.prototype.open = function(src, index) { - current = this; + closeBtn.click(function(event) { + prevent(event); + if (current) current.close(); + }); - var currLink; - if ('number' == typeof src) { - index = src; - if (index == this.index || index < 0 || index > this.elements.length - 1) { - return; - } - currLink = $(this.elements[index]); - src = currLink.data('href') || currLink.attr('href'); - } else { - if ('number' != typeof index) { - index = this.index; - } else if (index == this.index) { - return; + //layout + // .on('touchmove', prevent) + // .on('wheel', function(e) { + // e.stopPropagation(); + // }); + + if (boxe.addEventListener) { + function listen(element, event, listener) { // just for minification + element.addEventListener(event, listener); } + listen(boxe, 'touchstart', touchstart); + listen(boxe, 'touchmove', touchmove); + listen(boxe, 'touchend', touchend); + listen(boxe, 'touchcancel', touchend); + + listen(boxe, 'webkitTransitionEnd', transitionEnd); + listen(boxe, 'mozTransitionEnd', transitionEnd); + listen(boxe, 'msTransitionEnd', transitionEnd); + listen(boxe, 'oTransitionEnd', transitionEnd); + listen(boxe, 'transitionend', transitionEnd); + + listen(boxe, 'wheel', zoomwheel); + listen(boxe, 'mousemove', zoommousemove); } - this.index = index; - this.opened = currLink; - - this.prevBtn.html(this.prevBtnHtml); - this.nextBtn.html(this.nextBtnHtml); - this.zoomInBtn.html(this.zoomInBtnHtml); - this.zoomOutBtn.html(this.zoomOutBtnHtml); - this.closeBtn.html(this.closeBtnHtml); - this.bottom.html(''); - //this.under.html(''); - this.counter.html(index >= 0 ? (index + 1) + ' / ' + this.elements.length : ''); - - $('img', this.box).remove(); - - fadeReset(); - //overscroll.addClass('abigimage-overscroll-active'); - this.overlay.addClass(cssOverlayActive) - /*.removeClass('abigimage-overlay-fadeout')*/; - this.layout.addClass(cssLayoutActive) - //.removeClass(cssLayoutSlide) - .removeClass(cssLayoutFadeout) - .scrollTop(0); - slideAnimate(0, 0, 1); - - this.img = createImage('abigimage-img', src) - .click(function(event) { - prevent(event); - if (current) current.next(); - }) - .hover(function() { - nextBtn.addClass(cssNextBtnHover); - }, function() { - nextBtn.removeClass(cssNextBtnHover); - }) - .one('load', function() { checkImagesLoaded(); }); - - var nextElement = $(this.elements[this.nextIndex()]); - this.imgNext = createImage('abigimage-imgNext', nextElement.data('href') || nextElement.attr('href')) - .hide() - .one('load', function() { checkImagesLoaded(); }); - var prevElement = $(this.elements[this.prevIndex()]); - this.imgPrev = createImage('abigimage-imgPrev', prevElement.data('href') || prevElement.attr('href')) - .hide() - .one('load', function() { checkImagesLoaded(); }); - - //this.spinner.toggleClass(cssSpinnerActive, !this.img[0].complete); - checkImagesLoaded(true); - - $d.unbind('keydown', documentKeydown).bind('keydown', documentKeydown); - - //if (wst === null && bt === null) { - // wst = $w.scrollTop(); - // bt = $b.css('top'); - // $b.css('top', (-1 * wst) + 'px').addClass('abigimage-body'); - //} - if (hpr === null && bo === null) { - hpr = $h.css('padding-right'); - bo = $b.css('overflow-y'); - $h.css('padding-right', (parseInt(hpr) + window.innerWidth - $w.width()) + 'px'); - $b.css('overflow-y', 'hidden'); + function ABigImage(elements, options) { + $.extend(this, $.fn.abigimage.defaults, options); + + this.elements = elements; + + this.overlay = overlay; + this.layout = layout; + this.wrapper = wrapper; + this.prevBtnBox = prevBtnBox; + this.closeBtnBox = closeBtnBox; + this.box = box; + this.top = top; + this.prevBtn = prevBtn; + this.nextBtn = nextBtn; + this.zoomInBtn = zoomInBtn; + this.zoomOutBtn = zoomOutBtn; + this.closeBtn = closeBtn; + this.counter = counter; + //this.spinner = spinner; + this.bottomBox = bottomBox; + this.bottom = bottom; + //this.under = under; + + this.index = -1; + this.distance = 0; + this.opened = null; } - if (this.onopen) this.onopen.call(this, this.opened); - }; + ABigImage.prototype.open = function(src, index) { + current = this; - ABigImage.prototype.next = function() { - if (this.distance == this.elements.length - 1) { - this.close(); - } else { - ++this.distance; - this.elements[this.nextIndex()].click(); - //this.open(this.nextIndex()); - } - }; + var currLink; + if ('number' == typeof src) { + index = src; + if (index == this.index || index < 0 || index > this.elements.length - 1) { + return; + } + currLink = $(this.elements[index]); + src = currLink.data('href') || currLink.attr('href'); + } else { + if ('number' != typeof index) { + index = this.index; + } else if (index == this.index) { + return; + } + } - ABigImage.prototype.prev = function() { - if (this.distance == 1 - this.elements.length) { - this.close(); - } else { - --this.distance; - this.elements[this.prevIndex()].click(); - //this.open(this.prevIndex()); - } - }; + this.index = index; + this.opened = currLink; + + this.prevBtn.html(this.prevBtnHtml); + this.nextBtn.html(this.nextBtnHtml); + this.zoomInBtn.html(this.zoomInBtnHtml); + this.zoomOutBtn.html(this.zoomOutBtnHtml); + this.closeBtn.html(this.closeBtnHtml); + this.bottom.html(''); + //this.under.html(''); + this.counter.html(index >= 0 ? (index + 1) + ' / ' + this.elements.length : ''); + + $('img', this.box).remove(); + + fadeReset(); + //overscroll.addClass('abigimage-overscroll-active'); + this.overlay.addClass(cssOverlayActive) + /*.removeClass('abigimage-overlay-fadeout')*/; + this.layout.addClass(cssLayoutActive) + //.removeClass(cssLayoutSlide) + .removeClass(cssLayoutFadeout) + .scrollTop(0); + slideAnimate(0, 0, 1); + + this.img = createImage('abigimage-img', src) + .click(function(event) { + prevent(event); + if (current) current.next(); + }) + .hover(function() { + nextBtn.addClass(cssNextBtnHover); + }, function() { + nextBtn.removeClass(cssNextBtnHover); + }) + .one('load', function() { checkImagesLoaded(); }); + + var nextElement = $(this.elements[this.nextIndex()]); + this.imgNext = createImage('abigimage-imgNext', nextElement.data('href') || nextElement.attr('href')) + .hide() + .one('load', function() { checkImagesLoaded(); }); + var prevElement = $(this.elements[this.prevIndex()]); + this.imgPrev = createImage('abigimage-imgPrev', prevElement.data('href') || prevElement.attr('href')) + .hide() + .one('load', function() { checkImagesLoaded(); }); + + //this.spinner.toggleClass(cssSpinnerActive, !this.img[0].complete); + checkImagesLoaded(true); + + $d.unbind('keydown', documentKeydown).bind('keydown', documentKeydown); + + //if (wst === null && bt === null) { + // wst = $w.scrollTop(); + // bt = $b.css('top'); + // $b.css('top', (-1 * wst) + 'px').addClass('abigimage-body'); + //} + if (hpr === null && bo === null) { + hpr = $h.css('padding-right'); + bo = $b.css('overflow-y'); + $h.css('padding-right', (parseInt(hpr) + window.innerWidth - $w.width()) + 'px'); + $b.css('overflow-y', 'hidden'); + } - ABigImage.prototype.close = function() { - if (!current) return; + if (this.onopen) this.onopen.call(this, this.opened); + }; - $d.unbind('keydown', documentKeydown); + ABigImage.prototype.next = function() { + if (this.distance == this.elements.length - 1) { + this.close(); + } else { + ++this.distance; + this.elements[this.nextIndex()].click(); + //this.open(this.nextIndex()); + } + }; - //setTimeout(function() { - $h.css('padding-right', hpr); - $b.css('overflow-y', bo); - hpr = null; - bo = null; - //overscroll.removeClass('abigimage-overscroll-active'); - //$b.css('top', bt).removeClass('abigimage-body'); - //$w.scrollTop(wst); - //wst = null; - //bt = null; - //}, current.duration); + ABigImage.prototype.prev = function() { + if (this.distance == 1 - this.elements.length) { + this.close(); + } else { + --this.distance; + this.elements[this.prevIndex()].click(); + //this.open(this.prevIndex()); + } + }; - //fadeReset(); - overlay.removeClass(cssOverlayActive); - layout.removeClass(cssLayoutActive); + ABigImage.prototype.close = function() { + if (!current) return; - if (this.onclose) this.onclose.call(this, this.opened); + $d.unbind('keydown', documentKeydown); - this.index = -1; - this.distance = 0; + //setTimeout(function() { + $h.css('padding-right', hpr); + $b.css('overflow-y', bo); + hpr = null; + bo = null; + //overscroll.removeClass('abigimage-overscroll-active'); + //$b.css('top', bt).removeClass('abigimage-body'); + //$w.scrollTop(wst); + //wst = null; + //bt = null; + //}, current.duration); - current = null; - }; + //fadeReset(); + overlay.removeClass(cssOverlayActive); + layout.removeClass(cssLayoutActive); - ABigImage.prototype.unbind = function() { - this.close(); - this.elements.each(function() { - $(this).unbind('click.abigimage'); - }) - }; + if (this.onclose) this.onclose.call(this, this.opened); - ABigImage.prototype.key = function(keyCode) { - if (this.keyNext.indexOf(keyCode) != -1) { - this.next(); - } else if (this.keyPrev.indexOf(keyCode) != -1) { - this.prev(); - } else if (this.keyClose.indexOf(keyCode) != -1) { + this.index = -1; + this.distance = 0; + + current = null; + }; + + ABigImage.prototype.unbind = function() { this.close(); - } else { - return false; - } - return true; - }; + this.elements.each(function() { + $(this).unbind('click.abigimage'); + }) + }; - ABigImage.prototype.nextIndex = function() { - var index = this.index + 1; - if (index >= this.elements.length) { - index = 0; - } - return index; - }; + ABigImage.prototype.key = function(keyCode) { + if (this.keyNext.indexOf(keyCode) != -1) { + this.next(); + } else if (this.keyPrev.indexOf(keyCode) != -1) { + this.prev(); + } else if (this.keyClose.indexOf(keyCode) != -1) { + this.close(); + } else { + return false; + } + return true; + }; - ABigImage.prototype.prevIndex = function() { - var index = this.index - 1; - if (index < 0) { - index = this.elements.length - 1; - } - return index; - }; + ABigImage.prototype.nextIndex = function() { + var index = this.index + 1; + if (index >= this.elements.length) { + index = 0; + } + return index; + }; - function createImage(className, src) { - return $('').addClass(className).attr('src', src).appendTo(box); - } + ABigImage.prototype.prevIndex = function() { + var index = this.index - 1; + if (index < 0) { + index = this.elements.length - 1; + } + return index; + }; - function documentKeydown(event) { - if (current) { - if (current.key(event.which)) { - prevent(event); + function createImage(className, src) { + return $('').addClass(className).attr('src', src).appendTo(box); + } + + function documentKeydown(event) { + if (current) { + if (current.key(event.which)) { + prevent(event); + } } } - } - function prevent(event) { - event.preventDefault(); - event.stopPropagation(); - } + function checkImagesLoaded(forceNoSlide) { + if (!current) return; - function checkImagesLoaded(forceNoSlide) { - if (!current) return; + if (!forceNoSlide && sliding) return; - if (!forceNoSlide && sliding) return; + if (current.imgNext[0].complete) { + current.imgNext.show(); + } - if (current.imgNext[0].complete) { - current.imgNext.show(); - } + if (current.imgPrev[0].complete) { + current.imgPrev.show(); + } - if (current.imgPrev[0].complete) { - current.imgPrev.show(); + //if (current.img[0].complete && current.imgNext[0].complete && current.imgPrev[0].complete) { + // current.spinner.removeClass(cssSpinnerActive); + //} } - //if (current.img[0].complete && current.imgNext[0].complete && current.imgPrev[0].complete) { - // current.spinner.removeClass(cssSpinnerActive); - //} - } + function onSlideStart() { + if (!current) return; - function onSlideStart() { - if (!current) return; + sliding = true; + //current.layout.addClass(cssLayoutSlide); - sliding = true; - //current.layout.addClass(cssLayoutSlide); + //if (!current.img[0].complete || !current.imgNext[0].complete || !current.imgPrev[0].complete) { + // current.spinner.addClass(cssSpinnerActive); + //} + } - //if (!current.img[0].complete || !current.imgNext[0].complete || !current.imgPrev[0].complete) { - // current.spinner.addClass(cssSpinnerActive); - //} - } + function onSlideEnd() { + if (!current) return; - function onSlideEnd() { - if (!current) return; + sliding = false; + //current.layout.removeClass(cssLayoutSlide); - sliding = false; - //current.layout.removeClass(cssLayoutSlide); + checkImagesLoaded(true); + } - checkImagesLoaded(true); - } + function touchstart(e) { + if (!current) return; - function touchstart(e) { - if (!current) return; - - onSlideEnd(); - - if (e.touches.length > 1) { - k = dis(e); - current.layout.addClass(cssLayoutZoom); - } else { - vert = null; - mss = s; - dstart = start; - start = (new Date()).getTime(); - width = box.width() * 0.34; - height = box.height(); - minD = current.slideWidth * width; - initSizes(); - } - sx = x; - sy = y; - ss = s; - dx = 0; - dy = 0; - touches = e.touches; - prevent(e); - - if (ttimer) { - clearTimeout(ttimer); - ttimer = null; - } - if (e.touches.length == 1) { - ttimer = setTimeout(function() { - current.layout.toggleClass(cssLayoutFull); - ttimer = null; - }, current.doubleTapInterval); - } - } + onSlideEnd(); - function touchmove(e) { - if (!current) return; + if (e.touches.length > 1) { + k = dis(e); + current.layout.addClass(cssLayoutZoom); + } else { + vert = null; + mss = s; + dstart = start; + start = (new Date()).getTime(); + width = box.width() * 0.34; + height = box.height(); + minD = current.slideWidth * width; + initSizes(); + } + sx = x; + sy = y; + ss = s; + dx = 0; + dy = 0; + touches = e.touches; + prevent(e); - if (e.touches.length > 1) { - s = ss * (dis(e) / k); - if (s < 1) { - s = 0.333 * s * s * s + 0.666; - fadeTo(s); + if (ttimer) { + clearTimeout(ttimer); + ttimer = null; } - if (s > mss) { - mss = s; + if (e.touches.length == 1) { + ttimer = setTimeout(function() { + current.layout.toggleClass(cssLayoutFull); + ttimer = null; + }, current.doubleTapInterval); } } - dx = (ww - med(touches, 'X')) / ss - (ww - med(e.touches, 'X')) / s; - dy = (wh - med(touches, 'Y')) / ss - (wh - med(e.touches, 'Y')) / s; + function touchmove(e) { + if (!current) return; - x = sx + dx; - y = sy + dy; + if (e.touches.length > 1) { + s = ss * (dis(e) / k); + if (s < 1) { + s = 0.333 * s * s * s + 0.666; + fadeTo(s); + } + if (s > mss) { + mss = s; + } + } - if (ttimer && (dx > 1 || dx < -1 || dy > 1 || dy < -1)) { - clearTimeout(ttimer); - ttimer = null; - } + 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 (ttimer && (dx > 1 || dx < -1 || dy > 1 || dy < -1)) { + clearTimeout(ttimer); + ttimer = null; + } - if (s == 1 && e.touches.length == 1) { - if (null === vert) { - var dv = Math.abs(dy) - Math.abs(dx); - if (Math.abs(dv) > 2) { - vert = dv > 0; + if (s == 1 && e.touches.length == 1) { + if (null === vert) { + var dv = Math.abs(dy) - Math.abs(dx); + if (Math.abs(dv) > 2) { + vert = dv > 0; + } + if (vert === false) { + onSlideStart(); + } } - if (vert === false) { - onSlideStart(); + if (vert) { + x = 0; + fadeTo(1 - Math.abs(dy) / height); + } else { + y = 0; } } - if (vert) { - x = 0; - fadeTo(1 - Math.abs(dy) / height); - } else { - y = 0; - } + slideAnimate(x, y, s); + prevent(e); } - slideAnimate(x, y, s); - prevent(e); - } - function touchend(e) { - if (!current) return; + function touchend(e) { + if (!current) return; - var end = (new Date()).getTime(); - var time = end - start; + var end = (new Date()).getTime(); + var time = end - start; - 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)); - - if (ttimer) { - clearTimeout(ttimer); - ttimer = null; - } + 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)); + + if (ttimer) { + clearTimeout(ttimer); + ttimer = null; + } - current.layout.addClass(cssLayoutZoom); - slideAnimate(x, y, s, true); - } else { - slideBack(); - } - } else if (mss == 1) { - if (s < current.zoomClose) { - slideClose(); - } else if (vert) { - var ady = Math.abs(dy); - if (ady > minD) { - slideClose(dy); + current.layout.addClass(cssLayoutZoom); + slideAnimate(x, y, s, true); } else { - if (ady / time > current.slideVelocity) { + slideBack(); + } + } else if (mss == 1) { + if (s < current.zoomClose) { + slideClose(); + } else if (vert) { + var ady = Math.abs(dy); + if (ady > minD) { slideClose(dy); } else { - slideBack(); + if (ady / time > current.slideVelocity) { + slideClose(dy); + } else { + slideBack(); + } } - } - } else { - if (dx < -minD) { - slideNext(); - } else if (dx > minD) { - slidePrev(); } else { - if (Math.abs(dx) / time > current.slideVelocity) { - if (dx < 0) { - slideNext(); + if (dx < -minD) { + slideNext(); + } else if (dx > minD) { + slidePrev(); + } else { + if (Math.abs(dx) / time > current.slideVelocity) { + if (dx < 0) { + slideNext(); + } else { + slidePrev(); + } } else { - slidePrev(); + slideBack(); } - } else { - slideBack(); } } + } else { + slideBack(); } } else { - slideBack(); - } - } else { - if (end - dstart <= current.doubleTapInterval) { - if (ttimer) { - clearTimeout(ttimer); - ttimer = null; - } + if (end - dstart <= current.doubleTapInterval) { + if (ttimer) { + clearTimeout(ttimer); + ttimer = null; + } - 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); + 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); + } } } - } - - touches = e.touches; - prevent(e); - } - function med(ts, c) { - var p = 0; - for (var t = 0, l = ts.length; t < l; t++) { - p += ts[t]['client' + c]; + touches = e.touches; + prevent(e); } - return p / l; - } - - function dis(e) { - return Math.sqrt( - Math.pow(e.touches[0].pageX - e.touches[1].pageX, 2) + - Math.pow(e.touches[0].pageY - e.touches[1].pageY, 2) - ); - } - function initSizes() { - iw = current.img.width() / 2; - ih = current.img.height() / 2; - ww = $w.width() / 2; - wh = ($w.height() - current.top.height() - current.bottomBox.height()) / 2; - } + function med(ts, c) { + var p = 0; + for (var t = 0, l = ts.length; t < l; t++) { + p += ts[t]['client' + c]; + } + return p / l; + } - function slideNext() { - slideAnimate(-width, 0, 1, true, function() { - current.next(); - }); - layout.animate({scrollTop: 0}, current.duration); - } + function dis(e) { + return Math.sqrt( + Math.pow(e.touches[0].pageX - e.touches[1].pageX, 2) + + Math.pow(e.touches[0].pageY - e.touches[1].pageY, 2) + ); + } - function slidePrev() { - slideAnimate(width, 0, 1, true, function() { - current.prev(); - }); - layout.animate({scrollTop: 0}, current.duration); - } + function initSizes() { + iw = current.img.width() / 2; + ih = current.img.height() / 2; + ww = $w.width() / 2; + wh = ($w.height() - current.top.height() - current.bottomBox.height()) / 2; + } - function slideBack() { - slideAnimate(0, 0, 1, true, function() { - current.layout.removeClass(cssLayoutZoom); - onSlideEnd(); - }); - fadeTo(1, true); - //overlay.addClass('abigimage-overlay-fadeout'); - } + function slideNext() { + slideAnimate(-width, 0, 1, true, function() { + current.next(); + }); + layout.animate({scrollTop: 0}, current.duration); + } - function slideClose(dir) { - if (dir) { - slideAnimate(x, Math.sign(dir) * ($w.height() / 2 + ih), s, true, function() { - current.close(); + function slidePrev() { + slideAnimate(width, 0, 1, true, function() { + current.prev(); }); - } else { - slideAnimate(x, y, 0, true, function() { - current.close(); + layout.animate({scrollTop: 0}, current.duration); + } + + function slideBack() { + slideAnimate(0, 0, 1, true, function() { + current.layout.removeClass(cssLayoutZoom); + onSlideEnd(); }); + fadeTo(1, true); + //overlay.addClass('abigimage-overlay-fadeout'); } - fadeTo(0, true); - //overlay.addClass('abigimage-overlay-fadeout'); - layout.addClass(cssLayoutFadeout); - //current.close(); - } - function slideAnimate(tx, ty, ts, transition, onend) { - x = tx; - y = ty; - s = ts; - intr = transition; - ontr = onend; - var transform = 'scale(' + s + ') translate3d(' + x + 'px, ' + y + 'px, 0)'; - bs.transition = transition ? 'all ' + current.duration + 'ms ease-out' : 'none'; - bs.webkitTransform = transform; - bs.mozTransform = transform; - bs.msTransform = transform; - bs.oTransform = transform; - bs.transform = transform; + function slideClose(dir) { + if (dir) { + slideAnimate(x, Math.sign(dir) * ($w.height() / 2 + ih), s, true, function() { + current.close(); + }); + } else { + slideAnimate(x, y, 0, true, function() { + current.close(); + }); + } + fadeTo(0, true); + //overlay.addClass('abigimage-overlay-fadeout'); + layout.addClass(cssLayoutFadeout); + //current.close(); + } - } + function slideAnimate(tx, ty, ts, transition, onend) { + x = tx; + y = ty; + s = ts; + intr = transition; + ontr = onend; + var transform = 'scale(' + s + ') translate3d(' + x + 'px, ' + y + 'px, 0)'; + bs.transition = transition ? 'all ' + current.duration + 'ms ease-out' : 'none'; + bs.webkitTransform = transform; + bs.mozTransform = transform; + bs.msTransform = transform; + bs.oTransform = transform; + bs.transform = transform; - function fadeTo(o, transition) { - os.transition = transition ? 'opacity ' + current.duration + 'ms ease-out' : 'none'; - os.opacity = o; - var transform = 'translate3d(0, 0, 0)'; - os.webkitTransform = transform; - os.mozTransform = transform; - os.msTransform = transform; - os.oTransform = transform; - os.transform = transform; - } - - function fadeReset() { - os.transition = null; - os.opacity = null; - } + } - function transitionEnd() { - intr = false; - if (ontr) { - var f = ontr; - ontr = null; - f(); + function fadeTo(o, transition) { + os.transition = transition ? 'opacity ' + current.duration + 'ms ease-out' : 'none'; + os.opacity = o; + var transform = 'translate3d(0, 0, 0)'; + os.webkitTransform = transform; + os.mozTransform = transform; + os.msTransform = transform; + os.oTransform = transform; + os.transform = transform; } - } - function zoomwheel(e) { - if (!current) return; + function fadeReset() { + os.transition = null; + os.opacity = null; + } - var delta = -e.deltaY || 0; - if (e.deltaMode == 1) { // line - delta *= current.zoomVelocity * current.duration; - } else if (e.deltaMode == 2) { // page - delta *= height; + function transitionEnd() { + intr = false; + if (ontr) { + var f = ontr; + ontr = null; + f(); + } } - if (layout.scrollTop() || (s == 1 && delta < 0)) { - if (wheellock) { - prevent(e); + function zoomwheel(e) { + if (!current) return; + + var delta = -e.deltaY || 0; + if (e.deltaMode == 1) { // line + delta *= current.zoomVelocity * current.duration; + } else if (e.deltaMode == 2) { // page + delta *= height; + } + + if (layout.scrollTop() || (s == 1 && delta < 0)) { + if (wheellock) { + prevent(e); + } else { + if (zoomlocktimer) { + clearTimeout(zoomlocktimer); + } + zoomlock = true; + zoomlocktimer = setTimeout(function() { + zoomlock = false; + zoomlocktimer = null; + }, current.duration); + } + return; } else { - if (zoomlocktimer) { - clearTimeout(zoomlocktimer); + if (zoomlock) return; + + if (wheellocktimer) { + clearTimeout(wheellocktimer); } - zoomlock = true; - zoomlocktimer = setTimeout(function() { - zoomlock = false; - zoomlocktimer = null; + wheellock = true; + wheellocktimer = setTimeout(function() { + wheellock = false; + wheellocktimer = null; }, current.duration); } - return; - } else { - if (zoomlock) return; - if (wheellocktimer) { - clearTimeout(wheellocktimer); - } - wheellock = true; - wheellocktimer = setTimeout(function() { - wheellock = false; - wheellocktimer = null; - }, current.duration); + zoomposition(e, delta); } - zoomposition(e, delta); - } + function zoommousemove(e) { + if (!current) return; + if (s == 1) return; - function zoommousemove(e) { - if (!current) return; - if (s == 1) return; + zoomposition(e, 0); + } - zoomposition(e, 0); - } + function zoomposition(e, delta) { + initSizes(); - function zoomposition(e, delta) { - initSizes(); + x = (ww - e.clientX) / (current.zoomMoveViewport * ww / iw) - (ww - e.clientX) / s; + y = (wh - e.clientY) / (current.zoomMoveViewport * wh / ih) - (wh - e.clientY) / s; - x = (ww - e.clientX) / (current.zoomMoveViewport * ww / iw) - (ww - e.clientX) / s; - y = (wh - e.clientY) / (current.zoomMoveViewport * wh / ih) - (wh - e.clientY) / s; + zoom(delta, true); + prevent(e); + } - zoom(delta, true); - prevent(e); - } + function zoom(delta, transition) { + if (!current) return; - function zoom(delta, transition) { - if (!current) return; + s *= (ih + delta) / ih; + s = Math.max(1, Math.min(current.zoomMax, s)); - s *= (ih + delta) / ih; - s = Math.max(1, Math.min(current.zoomMax, s)); + mx = iw - ww / s; + my = ih - wh / s; - mx = iw - ww / s; - my = ih - wh / s; + if (mx > 0) { + x = Math.max(-mx, Math.min(mx, x)); + } else { + x = 0; + } - if (mx > 0) { - x = Math.max(-mx, Math.min(mx, x)); - } else { - x = 0; - } + if (my > 0) { + y = Math.max(-my, Math.min(my, y)); + } else { + y = 0; + } - if (my > 0) { - y = Math.max(-my, Math.min(my, y)); - } else { - y = 0; + slideAnimate(x, y, s, transition); } - slideAnimate(x, y, s, transition); + return ABigImage; } }(jQuery)); diff --git a/abigimage.jquery.min.css b/abigimage.jquery.min.css index 135502b..92395b1 100644 --- a/abigimage.jquery.min.css +++ b/abigimage.jquery.min.css @@ -1,2 +1,2 @@ -/*! abigimage v2.1.0 (2017-01-15) */ +/*! abigimage v2.1.1 (2018-01-20) */ .abigimage-layout,.abigimage-overlay{position:fixed;z-index:100;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0)}.abigimage-layout,.abigimage-overlay,.abigimage-wrapper{left:0;right:0;top:0;bottom:0}.abigimage-layout{height:0;opacity:0;transform:translate3d(0,0,0);overflow:hidden;overflow-y:auto}.abigimage-layout-active{height:100%;opacity:1}.abigimage-layout-fadeout{transition:opacity .2s ease-out;opacity:0}.abigimage-bottom,.abigimage-counter,.abigimage-top{transition:all .2s ease-in-out}.abigimage-overlay{background-color:#000;background-color:rgba(0,0,0,.9);height:0;opacity:0;transform:translate3d(0,0,0)}.abigimage-overlay-active{height:100%;opacity:1}.abigimage-wrapper{position:absolute;overflow:hidden}.abigimage-box{position:absolute;width:312.5%;left:-106.25%;top:2.5em;bottom:2.5em}.abigimage-closeBtnBox,.abigimage-prevBtnBox{cursor:pointer;position:absolute;top:0;bottom:0}.abigimage-prevBtnBox{right:50%;left:0}.abigimage-closeBtnBox{right:0;left:50%}.abigimage-closeBtn,.abigimage-nextBtn,.abigimage-prevBtn,.abigimage-zoomInBtn,.abigimage-zoomOutBtn{cursor:pointer;color:#fff;background-color:#000;background-color:rgba(0,0,0,0);opacity:.5;padding:0 1em;transition:all .2s ease-in-out}.abigimage-nextBtn,.abigimage-prevBtn{float:left}.abigimage-closeBtn,.abigimage-zoomInBtn,.abigimage-zoomOutBtn{float:right}.abigimage-closeBtn-hover,.abigimage-closeBtn:hover,.abigimage-nextBtn-hover,.abigimage-nextBtn:hover,.abigimage-prevBtn-hover,.abigimage-prevBtn:hover,.abigimage-zoomInBtn:hover,.abigimage-zoomOutBtn:hover{background-color:#000;background-color:rgba(0,0,0,1);opacity:1}.abigimage-img,.abigimage-imgNext,.abigimage-imgPrev{position:absolute;margin:auto;width:auto;top:0;bottom:0;display:block;max-width:32%;max-height:100%;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.abigimage-img{right:0;left:0;cursor:pointer}.abigimage-imgNext{right:0;left:68%}.abigimage-imgPrev{right:68%;left:0}.abigimage-bottom,.abigimage-bottomBox,.abigimage-top{position:absolute;left:0;right:0}.abigimage-layout-zoom .abigimage-imgNext,.abigimage-layout-zoom .abigimage-imgPrev{display:none!important}.abigimage-top{top:0;color:#fff;line-height:2.5;background-color:#000;background-color:rgba(0,0,0,.5)}.abigimage-counter{text-align:center;opacity:.5;float:left;padding:0 1em}.abigimage-counter:hover{opacity:1}.abigimage-bottomBox{bottom:0;height:2.5em}.abigimage-bottom{top:0;color:#fff;line-height:2.5;background-color:#000;opacity:.5;text-align:center;padding:0 1em}.abigimage-bottom:hover{opacity:1}.abigimage-layout-full .abigimage-bottom,.abigimage-layout-full .abigimage-top{opacity:0}.abigimage-layout-full .abigimage-box{top:0;bottom:0}.abigimage-box,.abigimage-closeBtn,.abigimage-nextBtn,.abigimage-prevBtn,.abigimage-top,.abigimage-zoomInBtn,.abigimage-zoomOutBtn{-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent} \ No newline at end of file diff --git a/abigimage.jquery.min.js b/abigimage.jquery.min.js index 193db68..d851dfa 100644 --- a/abigimage.jquery.min.js +++ b/abigimage.jquery.min.js @@ -1,2 +1,2 @@ -/*! abigimage v2.1.0 (2017-01-15) */ -!function(a){function b(a){D&&null!==V&&(U?B(V*D.zoomVelocity*(a-U)):U=a,Pa(b))}function c(a,b,c){a.addEventListener(b,c)}function d(b,c){a.extend(this,a.fn.abigimage.defaults,c),this.elements=b,this.overlay=ga,this.layout=ha,this.wrapper=ia,this.prevBtnBox=ka,this.closeBtnBox=la,this.box=ja,this.top=ma,this.prevBtn=na,this.nextBtn=oa,this.zoomInBtn=sa,this.zoomOutBtn=ra,this.closeBtn=qa,this.counter=pa,this.bottomBox=ta,this.bottom=ua,this.index=-1,this.distance=0,this.opened=null}function e(b,c){return a("").addClass(b).attr("src",c).appendTo(ja)}function f(a){D&&D.key(a.which)&&g(a)}function g(a){a.preventDefault(),a.stopPropagation()}function h(a){D&&(a||!Ka)&&(D.imgNext[0].complete&&D.imgNext.show(),D.imgPrev[0].complete&&D.imgPrev.show())}function i(){D&&(Ka=!0)}function j(){D&&(Ka=!1,h(!0))}function k(a){D&&(j(),a.touches.length>1?(L=o(a),D.layout.addClass(ya)):(aa=null,H=K,X=Y,Y=(new Date).getTime(),Z=.34*ja.width(),$=ja.height(),_=D.slideWidth*Z,p()),E=I,F=J,G=K,M=0,N=0,ba=a.touches,g(a),W&&(clearTimeout(W),W=null),1==a.touches.length&&(W=setTimeout(function(){D.layout.toggleClass(xa),W=null},D.doubleTapInterval)))}function l(a){if(D){if(a.touches.length>1&&(K=G*(o(a)/L),1>K&&(K=.333*K*K*K+.666,v(K)),K>H&&(H=K)),M=(Q-n(ba,"X"))/G-(Q-n(a.touches,"X"))/K,N=(R-n(ba,"Y"))/G-(R-n(a.touches,"Y"))/K,I=E+M,J=F+N,W&&(M>1||-1>M||N>1||-1>N)&&(clearTimeout(W),W=null),1==K&&1==a.touches.length){if(null===aa){var b=Math.abs(N)-Math.abs(M);Math.abs(b)>2&&(aa=b>0),aa===!1&&i()}aa?(I=0,v(1-Math.abs(N)/$)):J=0}u(I,J,K),g(a)}}function m(a){if(D){var b=(new Date).getTime(),c=b-Y;if(a.touches.length)E=I,F=J,G=K;else if(K<=D.zoomMin)if(1>=c||M>=-1&&1>=M&&N>=-1&&1>=N)if(Y-X<=D.doubleTapInterval){K=D.zoomMax;var d=n(ba,"X"),e=n(ba,"Y");I+=(Q-d)/G-(Q-d)/K,J+=(R-e)/G-(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)),W&&(clearTimeout(W),W=null),D.layout.addClass(ya),u(I,J,K,!0)}else s();else if(1==H)if(K_?t(N):f/c>D.slideVelocity?t(N):s()}else-_>M?q():M>_?r():Math.abs(M)/c>D.slideVelocity?0>M?q():r():s();else s();else b-X<=D.doubleTapInterval?(W&&(clearTimeout(W),W=null),s()):(K=Math.max(1,Math.min(D.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)),u(I,J,K,!0));ba=a.touches,g(a)}}function n(a,b){for(var c=0,d=0,e=a.length;e>d;d++)c+=a[d]["client"+b];return c/e}function o(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 p(){O=D.img.width()/2,P=D.img.height()/2,Q=Ea.width()/2,R=(Ea.height()-D.top.height()-D.bottomBox.height())/2}function q(){u(-Z,0,1,!0,function(){D.next()}),ha.animate({scrollTop:0},D.duration)}function r(){u(Z,0,1,!0,function(){D.prev()}),ha.animate({scrollTop:0},D.duration)}function s(){u(0,0,1,!0,function(){D.layout.removeClass(ya),j()}),v(1,!0)}function t(a){a?u(I,Math.sign(a)*(Ea.height()/2+P),K,!0,function(){D.close()}):u(I,J,0,!0,function(){D.close()}),v(0,!0),ha.addClass(wa)}function u(a,b,c,d,e){I=a,J=b,K=c,ca=d,da=e;var f="scale("+K+") translate3d("+I+"px, "+J+"px, 0)";Na.transition=d?"all "+D.duration+"ms ease-out":"none",Na.webkitTransform=f,Na.mozTransform=f,Na.msTransform=f,Na.oTransform=f,Na.transform=f}function v(a,b){Oa.transition=b?"opacity "+D.duration+"ms ease-out":"none",Oa.opacity=a;var c="translate3d(0, 0, 0)";Oa.webkitTransform=c,Oa.mozTransform=c,Oa.msTransform=c,Oa.oTransform=c,Oa.transform=c}function w(){Oa.transition=null,Oa.opacity=null}function x(){if(ca=!1,da){var a=da;da=null,a()}}function y(a){if(D){var b=-a.deltaY||0;return 1==a.deltaMode?b*=D.zoomVelocity*D.duration:2==a.deltaMode&&(b*=$),ha.scrollTop()||1==K&&0>b?void(La?g(a):(fa&&clearTimeout(fa),Ma=!0,fa=setTimeout(function(){Ma=!1,fa=null},D.duration))):void(Ma||(ea&&clearTimeout(ea),La=!0,ea=setTimeout(function(){La=!1,ea=null},D.duration),A(a,b)))}}function z(a){D&&1!=K&&A(a,0)}function A(a,b){p(),I=(Q-a.clientX)/(D.zoomMoveViewport*Q/O)-(Q-a.clientX)/K,J=(R-a.clientY)/(D.zoomMoveViewport*R/P)-(R-a.clientY)/K,B(b,!0),g(a)}function B(a,b){D&&(K*=(P+a)/P,K=Math.max(1,Math.min(D.zoomMax,K)),S=O-Q/K,T=P-R/K,I=S>0?Math.max(-S,Math.min(S,I)):0,J=T>0?Math.max(-T,Math.min(T,J)):0,u(I,J,K,b))}var C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,$,_,aa,ba,ca,da,ea,fa,ga=a("
").addClass("abigimage-overlay").appendTo("body"),ha=a("
").addClass("abigimage-layout").appendTo("body"),ia=a("
").addClass("abigimage-wrapper").appendTo(ha),ja=a("
").addClass("abigimage-box").appendTo(ia),ka=a("
").addClass("abigimage-prevBtnBox").appendTo(ja),la=a("
").addClass("abigimage-closeBtnBox").appendTo(ja),ma=a("
").addClass("abigimage-top").appendTo(ha),na=a("
").addClass("abigimage-prevBtn").appendTo(ma),oa=a("
").addClass("abigimage-nextBtn").appendTo(ma),pa=a("
").addClass("abigimage-counter").appendTo(ma),qa=a("
").addClass("abigimage-closeBtn").appendTo(ma),ra=a("
").addClass("abigimage-zoomOutBtn").appendTo(ma),sa=a("
").addClass("abigimage-zoomInBtn").appendTo(ma),ta=a("
").addClass("abigimage-bottomBox").appendTo(ha),ua=a("
").addClass("abigimage-bottom").appendTo(ta),va="abigimage-layout-active",wa="abigimage-layout-fadeout",xa="abigimage-layout-full",ya="abigimage-layout-zoom",za="abigimage-overlay-active",Aa="abigimage-prevBtn-hover",Ba="abigimage-nextBtn-hover",Ca="abigimage-closeBtn-hover",Da=ja[0],Ea=a(window),Fa=a("html"),Ga=a(document),Ha=a(document.body),Ia=null,Ja=null,Ka=!1,La=!1,Ma=!1,Na=Da.style,Oa=ga[0].style;a.fn.abigimage=function(b){var c=new d(this,b);return this._abigimage=c,C=c,this.each(function(b){a(this).unbind("click.abigimage").bind("click.abigimage",function(a){g(a),c.open(b)})})},a.fn.abigimage.defaults={duration:200,slideWidth:.4,slideVelocity:.4,zoomMin:1.5,zoomMax:5,zoomClose:.9,zoomMoveViewport:.9,zoomVelocity:.04,doubleTapInterval:400,prevBtnHtml:"←",nextBtnHtml:"→",zoomInBtnHtml:"+",zoomOutBtnHtml:"−",closeBtnHtml:"×",keyNext:[13,32,39,40],keyPrev:[8,37,38],keyClose:[27,35,36],onopen:null,onclose:null},a.abigimage={overlay:ga,layout:ha,wrapper:ia,box:ja,prevBtnBox:ka,closeBtnBox:la,top:ma,prevBtn:na,nextBtn:oa,zoomInBtn:sa,zoomOutBtn:ra,closeBtn:qa,counter:pa,bottomBox:ta,bottom:ua,open:function(a,b,c){(c&&c._abigimage||D||C).open(a,b)},close:function(a){(a&&a._abigimage||D||C).close()},next:function(a){(a&&a._abigimage||D||C).next()},prev:function(a){(a&&a._abigimage||D||C).prev()},unbind:function(a){(a&&a._abigimage||D||C).unbind()}},ka.click(function(a){g(a),D&&D.prev()}).hover(function(){na.addClass(Aa)},function(){na.removeClass(Aa)}),la.click(function(a){g(a),D&&D.close()}).hover(function(){qa.addClass(Ca)},function(){qa.removeClass(Ca)}),na.click(function(a){g(a),D&&D.prev()}),oa.click(function(a){g(a),D&&D.next()});var Pa=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame||function(a){setTimeout(function(){a((new Date).getTime())},1e3/60)};sa.mousedown(function(a){g(a),p(),U=null,V=1,Pa(b)}).mouseup(function(a){g(a),V=null}).mouseout(function(){V=null}).click(function(a){g(a),D&&B(D.zoomVelocity*D.duration,!0)}),ra.mousedown(function(a){g(a),p(),U=null,V=-1,Pa(b)}).mouseup(function(a){g(a),V=null}).mouseout(function(){V=null}).click(function(a){g(a),D&&B(-D.zoomVelocity*D.duration,!0)}),qa.click(function(a){g(a),D&&D.close()}),Da.addEventListener&&(c(Da,"touchstart",k),c(Da,"touchmove",l),c(Da,"touchend",m),c(Da,"touchcancel",m),c(Da,"webkitTransitionEnd",x),c(Da,"mozTransitionEnd",x),c(Da,"msTransitionEnd",x),c(Da,"oTransitionEnd",x),c(Da,"transitionend",x),c(Da,"wheel",y),c(Da,"mousemove",z)),d.prototype.open=function(b,c){D=this;var d;if("number"==typeof b){if(c=b,c==this.index||0>c||c>this.elements.length-1)return;d=a(this.elements[c]),b=d.data("href")||d.attr("href")}else if("number"!=typeof c)c=this.index;else if(c==this.index)return;this.index=c,this.opened=d,this.prevBtn.html(this.prevBtnHtml),this.nextBtn.html(this.nextBtnHtml),this.zoomInBtn.html(this.zoomInBtnHtml),this.zoomOutBtn.html(this.zoomOutBtnHtml),this.closeBtn.html(this.closeBtnHtml),this.bottom.html(""),this.counter.html(c>=0?c+1+" / "+this.elements.length:""),a("img",this.box).remove(),w(),this.overlay.addClass(za),this.layout.addClass(va).removeClass(wa).scrollTop(0),u(0,0,1),this.img=e("abigimage-img",b).click(function(a){g(a),D&&D.next()}).hover(function(){oa.addClass(Ba)},function(){oa.removeClass(Ba)}).one("load",function(){h()});var i=a(this.elements[this.nextIndex()]);this.imgNext=e("abigimage-imgNext",i.data("href")||i.attr("href")).hide().one("load",function(){h()});var j=a(this.elements[this.prevIndex()]);this.imgPrev=e("abigimage-imgPrev",j.data("href")||j.attr("href")).hide().one("load",function(){h()}),h(!0),Ga.unbind("keydown",f).bind("keydown",f),null===Ia&&null===Ja&&(Ia=Fa.css("padding-right"),Ja=Ha.css("overflow-y"),Fa.css("padding-right",parseInt(Ia)+window.innerWidth-Ea.width()+"px"),Ha.css("overflow-y","hidden")),this.onopen&&this.onopen.call(this,this.opened)},d.prototype.next=function(){this.distance==this.elements.length-1?this.close():(++this.distance,this.elements[this.nextIndex()].click())},d.prototype.prev=function(){this.distance==1-this.elements.length?this.close():(--this.distance,this.elements[this.prevIndex()].click())},d.prototype.close=function(){D&&(Ga.unbind("keydown",f),Fa.css("padding-right",Ia),Ha.css("overflow-y",Ja),Ia=null,Ja=null,ga.removeClass(za),ha.removeClass(va),this.onclose&&this.onclose.call(this,this.opened),this.index=-1,this.distance=0,D=null)},d.prototype.unbind=function(){this.close(),this.elements.each(function(){a(this).unbind("click.abigimage")})},d.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},d.prototype.nextIndex=function(){var a=this.index+1;return a>=this.elements.length&&(a=0),a},d.prototype.prevIndex=function(){var a=this.index-1;return 0>a&&(a=this.elements.length-1),a}}(jQuery); \ No newline at end of file +/*! abigimage v2.1.1 (2018-01-20) */ +!function(a){function b(a){a.preventDefault(),a.stopPropagation()}function c(){function c(a){D&&null!==V&&(U?B(V*D.zoomVelocity*(a-U)):U=a,Pa(c))}function d(a,b,c){a.addEventListener(b,c)}function e(b,c){a.extend(this,a.fn.abigimage.defaults,c),this.elements=b,this.overlay=ga,this.layout=ha,this.wrapper=ia,this.prevBtnBox=ka,this.closeBtnBox=la,this.box=ja,this.top=ma,this.prevBtn=na,this.nextBtn=oa,this.zoomInBtn=sa,this.zoomOutBtn=ra,this.closeBtn=qa,this.counter=pa,this.bottomBox=ta,this.bottom=ua,this.index=-1,this.distance=0,this.opened=null}function f(b,c){return a("").addClass(b).attr("src",c).appendTo(ja)}function g(a){D&&D.key(a.which)&&b(a)}function h(a){D&&(a||!Ka)&&(D.imgNext[0].complete&&D.imgNext.show(),D.imgPrev[0].complete&&D.imgPrev.show())}function i(){D&&(Ka=!0)}function j(){D&&(Ka=!1,h(!0))}function k(a){D&&(j(),a.touches.length>1?(L=o(a),D.layout.addClass(ya)):(aa=null,H=K,X=Y,Y=(new Date).getTime(),Z=.34*ja.width(),$=ja.height(),_=D.slideWidth*Z,p()),E=I,F=J,G=K,M=0,N=0,ba=a.touches,b(a),W&&(clearTimeout(W),W=null),1==a.touches.length&&(W=setTimeout(function(){D.layout.toggleClass(xa),W=null},D.doubleTapInterval)))}function l(a){if(D){if(a.touches.length>1&&(K=G*(o(a)/L),1>K&&(K=.333*K*K*K+.666,v(K)),K>H&&(H=K)),M=(Q-n(ba,"X"))/G-(Q-n(a.touches,"X"))/K,N=(R-n(ba,"Y"))/G-(R-n(a.touches,"Y"))/K,I=E+M,J=F+N,W&&(M>1||-1>M||N>1||-1>N)&&(clearTimeout(W),W=null),1==K&&1==a.touches.length){if(null===aa){var c=Math.abs(N)-Math.abs(M);Math.abs(c)>2&&(aa=c>0),aa===!1&&i()}aa?(I=0,v(1-Math.abs(N)/$)):J=0}u(I,J,K),b(a)}}function m(a){if(D){var c=(new Date).getTime(),d=c-Y;if(a.touches.length)E=I,F=J,G=K;else if(K<=D.zoomMin)if(1>=d||M>=-1&&1>=M&&N>=-1&&1>=N)if(Y-X<=D.doubleTapInterval){K=D.zoomMax;var e=n(ba,"X"),f=n(ba,"Y");I+=(Q-e)/G-(Q-e)/K,J+=(R-f)/G-(R-f)/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)),W&&(clearTimeout(W),W=null),D.layout.addClass(ya),u(I,J,K,!0)}else s();else if(1==H)if(K_?t(N):g/d>D.slideVelocity?t(N):s()}else-_>M?q():M>_?r():Math.abs(M)/d>D.slideVelocity?0>M?q():r():s();else s();else c-X<=D.doubleTapInterval?(W&&(clearTimeout(W),W=null),s()):(K=Math.max(1,Math.min(D.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)),u(I,J,K,!0));ba=a.touches,b(a)}}function n(a,b){for(var c=0,d=0,e=a.length;e>d;d++)c+=a[d]["client"+b];return c/e}function o(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 p(){O=D.img.width()/2,P=D.img.height()/2,Q=Ea.width()/2,R=(Ea.height()-D.top.height()-D.bottomBox.height())/2}function q(){u(-Z,0,1,!0,function(){D.next()}),ha.animate({scrollTop:0},D.duration)}function r(){u(Z,0,1,!0,function(){D.prev()}),ha.animate({scrollTop:0},D.duration)}function s(){u(0,0,1,!0,function(){D.layout.removeClass(ya),j()}),v(1,!0)}function t(a){a?u(I,Math.sign(a)*(Ea.height()/2+P),K,!0,function(){D.close()}):u(I,J,0,!0,function(){D.close()}),v(0,!0),ha.addClass(wa)}function u(a,b,c,d,e){I=a,J=b,K=c,ca=d,da=e;var f="scale("+K+") translate3d("+I+"px, "+J+"px, 0)";Na.transition=d?"all "+D.duration+"ms ease-out":"none",Na.webkitTransform=f,Na.mozTransform=f,Na.msTransform=f,Na.oTransform=f,Na.transform=f}function v(a,b){Oa.transition=b?"opacity "+D.duration+"ms ease-out":"none",Oa.opacity=a;var c="translate3d(0, 0, 0)";Oa.webkitTransform=c,Oa.mozTransform=c,Oa.msTransform=c,Oa.oTransform=c,Oa.transform=c}function w(){Oa.transition=null,Oa.opacity=null}function x(){if(ca=!1,da){var a=da;da=null,a()}}function y(a){if(D){var c=-a.deltaY||0;return 1==a.deltaMode?c*=D.zoomVelocity*D.duration:2==a.deltaMode&&(c*=$),ha.scrollTop()||1==K&&0>c?void(La?b(a):(fa&&clearTimeout(fa),Ma=!0,fa=setTimeout(function(){Ma=!1,fa=null},D.duration))):void(Ma||(ea&&clearTimeout(ea),La=!0,ea=setTimeout(function(){La=!1,ea=null},D.duration),A(a,c)))}}function z(a){D&&1!=K&&A(a,0)}function A(a,c){p(),I=(Q-a.clientX)/(D.zoomMoveViewport*Q/O)-(Q-a.clientX)/K,J=(R-a.clientY)/(D.zoomMoveViewport*R/P)-(R-a.clientY)/K,B(c,!0),b(a)}function B(a,b){D&&(K*=(P+a)/P,K=Math.max(1,Math.min(D.zoomMax,K)),S=O-Q/K,T=P-R/K,I=S>0?Math.max(-S,Math.min(S,I)):0,J=T>0?Math.max(-T,Math.min(T,J)):0,u(I,J,K,b))}var C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,$,_,aa,ba,ca,da,ea,fa,ga=a("
").addClass("abigimage-overlay").appendTo("body"),ha=a("
").addClass("abigimage-layout").appendTo("body"),ia=a("
").addClass("abigimage-wrapper").appendTo(ha),ja=a("
").addClass("abigimage-box").appendTo(ia),ka=a("
").addClass("abigimage-prevBtnBox").appendTo(ja),la=a("
").addClass("abigimage-closeBtnBox").appendTo(ja),ma=a("
").addClass("abigimage-top").appendTo(ha),na=a("
").addClass("abigimage-prevBtn").appendTo(ma),oa=a("
").addClass("abigimage-nextBtn").appendTo(ma),pa=a("
").addClass("abigimage-counter").appendTo(ma),qa=a("
").addClass("abigimage-closeBtn").appendTo(ma),ra=a("
").addClass("abigimage-zoomOutBtn").appendTo(ma),sa=a("
").addClass("abigimage-zoomInBtn").appendTo(ma),ta=a("
").addClass("abigimage-bottomBox").appendTo(ha),ua=a("
").addClass("abigimage-bottom").appendTo(ta),va="abigimage-layout-active",wa="abigimage-layout-fadeout",xa="abigimage-layout-full",ya="abigimage-layout-zoom",za="abigimage-overlay-active",Aa="abigimage-prevBtn-hover",Ba="abigimage-nextBtn-hover",Ca="abigimage-closeBtn-hover",Da=ja[0],Ea=a(window),Fa=a("html"),Ga=a(document),Ha=a(document.body),Ia=null,Ja=null,Ka=!1,La=!1,Ma=!1,Na=Da.style,Oa=ga[0].style;a.fn.abigimage.defaults={duration:200,slideWidth:.4,slideVelocity:.4,zoomMin:1.5,zoomMax:5,zoomClose:.9,zoomMoveViewport:.9,zoomVelocity:.04,doubleTapInterval:400,prevBtnHtml:"←",nextBtnHtml:"→",zoomInBtnHtml:"+",zoomOutBtnHtml:"−",closeBtnHtml:"×",keyNext:[13,32,39,40],keyPrev:[8,37,38],keyClose:[27,35,36],onopen:null,onclose:null},a.abigimage={overlay:ga,layout:ha,wrapper:ia,box:ja,prevBtnBox:ka,closeBtnBox:la,top:ma,prevBtn:na,nextBtn:oa,zoomInBtn:sa,zoomOutBtn:ra,closeBtn:qa,counter:pa,bottomBox:ta,bottom:ua,open:function(a,b,c){(c&&c._abigimage||D||C).open(a,b)},close:function(a){(a&&a._abigimage||D||C).close()},next:function(a){(a&&a._abigimage||D||C).next()},prev:function(a){(a&&a._abigimage||D||C).prev()},unbind:function(a){(a&&a._abigimage||D||C).unbind()}},ka.click(function(a){b(a),D&&D.prev()}).hover(function(){na.addClass(Aa)},function(){na.removeClass(Aa)}),la.click(function(a){b(a),D&&D.close()}).hover(function(){qa.addClass(Ca)},function(){qa.removeClass(Ca)}),na.click(function(a){b(a),D&&D.prev()}),oa.click(function(a){b(a),D&&D.next()});var Pa=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame||function(a){setTimeout(function(){a((new Date).getTime())},1e3/60)};return sa.mousedown(function(a){b(a),p(),U=null,V=1,Pa(c)}).mouseup(function(a){b(a),V=null}).mouseout(function(){V=null}).click(function(a){b(a),D&&B(D.zoomVelocity*D.duration,!0)}),ra.mousedown(function(a){b(a),p(),U=null,V=-1,Pa(c)}).mouseup(function(a){b(a),V=null}).mouseout(function(){V=null}).click(function(a){b(a),D&&B(-D.zoomVelocity*D.duration,!0)}),qa.click(function(a){b(a),D&&D.close()}),Da.addEventListener&&(d(Da,"touchstart",k),d(Da,"touchmove",l),d(Da,"touchend",m),d(Da,"touchcancel",m),d(Da,"webkitTransitionEnd",x),d(Da,"mozTransitionEnd",x),d(Da,"msTransitionEnd",x),d(Da,"oTransitionEnd",x),d(Da,"transitionend",x),d(Da,"wheel",y),d(Da,"mousemove",z)),e.prototype.open=function(c,d){D=this;var e;if("number"==typeof c){if(d=c,d==this.index||0>d||d>this.elements.length-1)return;e=a(this.elements[d]),c=e.data("href")||e.attr("href")}else if("number"!=typeof d)d=this.index;else if(d==this.index)return;this.index=d,this.opened=e,this.prevBtn.html(this.prevBtnHtml),this.nextBtn.html(this.nextBtnHtml),this.zoomInBtn.html(this.zoomInBtnHtml),this.zoomOutBtn.html(this.zoomOutBtnHtml),this.closeBtn.html(this.closeBtnHtml),this.bottom.html(""),this.counter.html(d>=0?d+1+" / "+this.elements.length:""),a("img",this.box).remove(),w(),this.overlay.addClass(za),this.layout.addClass(va).removeClass(wa).scrollTop(0),u(0,0,1),this.img=f("abigimage-img",c).click(function(a){b(a),D&&D.next()}).hover(function(){oa.addClass(Ba)},function(){oa.removeClass(Ba)}).one("load",function(){h()});var i=a(this.elements[this.nextIndex()]);this.imgNext=f("abigimage-imgNext",i.data("href")||i.attr("href")).hide().one("load",function(){h()});var j=a(this.elements[this.prevIndex()]);this.imgPrev=f("abigimage-imgPrev",j.data("href")||j.attr("href")).hide().one("load",function(){h()}),h(!0),Ga.unbind("keydown",g).bind("keydown",g),null===Ia&&null===Ja&&(Ia=Fa.css("padding-right"),Ja=Ha.css("overflow-y"),Fa.css("padding-right",parseInt(Ia)+window.innerWidth-Ea.width()+"px"),Ha.css("overflow-y","hidden")),this.onopen&&this.onopen.call(this,this.opened)},e.prototype.next=function(){this.distance==this.elements.length-1?this.close():(++this.distance,this.elements[this.nextIndex()].click())},e.prototype.prev=function(){this.distance==1-this.elements.length?this.close():(--this.distance,this.elements[this.prevIndex()].click())},e.prototype.close=function(){D&&(Ga.unbind("keydown",g),Fa.css("padding-right",Ia),Ha.css("overflow-y",Ja),Ia=null,Ja=null,ga.removeClass(za),ha.removeClass(va),this.onclose&&this.onclose.call(this,this.opened),this.index=-1,this.distance=0,D=null)},e.prototype.unbind=function(){this.close(),this.elements.each(function(){a(this).unbind("click.abigimage")})},e.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},e.prototype.nextIndex=function(){var a=this.index+1;return a>=this.elements.length&&(a=0),a},e.prototype.prevIndex=function(){var a=this.index-1;return 0>a&&(a=this.elements.length-1),a},e}var d;a.fn.abigimage=function(e){d||(d=c());var f=new d(this,e);return this._abigimage=f,last=f,this.each(function(c){a(this).unbind("click.abigimage").bind("click.abigimage",function(a){b(a),f.open(c)})})}}(jQuery); \ No newline at end of file diff --git a/index.html b/index.html index b7711a6..357c762 100644 --- a/index.html +++ b/index.html @@ -143,7 +143,7 @@

ABigImage

ABigImage is jQuery plugin for viewing big versions of images.

-

Current version 2.1.0 (2017-01-15).

+

Current version 2.1.1 (2018-01-20).

@@ -154,8 +154,8 @@

ABigImage

Features

@@ -332,12 +332,13 @@

Static methods

Changes

    +
  • 2.1.1 - fixed init in head, plugin now has lazy creation of it's dom.
  • 2.1.0 - improved animations for not fully loaded images, improved zoom positioning, added mouse scroll zoom, added scrolling down bottom area, added zoom out closing, added next and zoom buttons, added loading spinner, added images counter, 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.

MIT License

-

Copyright (c) 2014-2016 Maksim Krylosov aequiternus@gmail.com

+

Copyright (c) 2014-2018 Maksim Krylosov aequiternus@gmail.com

diff --git a/package.json b/package.json index 89f859e..17b3caf 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "abigimage", - "version": "2.1.0", + "version": "2.1.1", "author": "Maksim Krylosov (http://aeqdev.com/)", "license": "MIT", "homepage": "http://aeqdev.com/tools/js/abigimage/",