diff --git a/dist/jquery.magnify.css b/dist/jquery.magnify.css index 3b411d0..db44fb6 100644 --- a/dist/jquery.magnify.css +++ b/dist/jquery.magnify.css @@ -6,7 +6,7 @@ * | | | | _ | \_/ | |\ |_| |_| | | | * |__| |__|__| |__|\____/|_|__| \__|_____|__| |__| * - * jquery.magnify - v1.4.3 + * jquery.magnify - v1.4.4 * A jQuery plugin to view images just like in windows * https://github.com/nzbin/magnify#readme * diff --git a/dist/jquery.magnify.js b/dist/jquery.magnify.js index 52d8943..8ff9885 100644 --- a/dist/jquery.magnify.js +++ b/dist/jquery.magnify.js @@ -6,7 +6,7 @@ * | | | | _ | \_/ | |\ |_| |_| | | | * |__| |__|__| |__|\____/|_|__| \__|_____|__| |__| * - * jquery.magnify - v1.4.3 + * jquery.magnify - v1.4.4 * A jQuery plugin to view images just like in windows * https://github.com/nzbin/magnify#readme * @@ -35,8 +35,8 @@ */ /** - * [getImgSrc] - * @param {[Object]} el [description] + * Get image src from `data-src` + * @param {Object} el - image */ function getImgSrc(el) { // Get data-src as image src at first @@ -47,53 +47,49 @@ function getImgSrc(el) { } /** - * [throttle] - * @param {Function} fn [description] - * @param {[Number]} delay [description] - * @return {Function} [description] + * Throttle function + * @param {Function} fn - The function will be triggered + * @param {Number} delay - The throttle delay time + * @return {Function} */ function throttle(fn, delay) { - var timer = null; - return function () { + return function() { var context = this, args = arguments; clearTimeout(timer); - timer = setTimeout(function () { + timer = setTimeout(function() { fn.apply(context, args); }, delay); }; - } /** - * [preloadImg] - * @param {[String]} src [image src] - * @param {Function} success [callbacks] - * @param {Function} error [callbacks] + * Preload a image + * @param {String} src - The image src + * @param {Function} success - The callback of success + * @param {Function} error - The callback of error */ function preloadImg(src, success, error) { - var img = new Image(); - img.onload = function () { + img.onload = function() { success(img); }; - img.onerror = function () { + img.onerror = function() { error(img); }; img.src = src; - } /** - * [requestFullscreen] - * @param {[type]} element [description] + * Request fullscreen + * @param {type} element */ function requestFullscreen(element) { if (element.requestFullscreen) { @@ -108,7 +104,7 @@ function requestFullscreen(element) { } /** - * [exitFullscreen] + * Exit fullscreen */ function exitFullscreen() { if (document.exitFullscreen) { @@ -121,49 +117,50 @@ function exitFullscreen() { } /** - * [getImageNameFromUrl] - * @param {[String]} url [description] - * @return {[String]} [description] + * Get the image name from its url + * @param {String} url- The image src + * @return {String} */ function getImageNameFromUrl(url) { - var reg = /^.*?\/*([^/?]*)\.[a-z]+(\?.+|$)/ig, + var reg = /^.*?\/*([^/?]*)\.[a-z]+(\?.+|$)/gi, txt = url.replace(reg, '$1'); return txt; } /** - * [hasScrollbar] - * @return {[Boolean]} [description] + * Check if the document has a scrollbar + * @return {Boolean} */ function hasScrollbar() { - return document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight); + return ( + document.body.scrollHeight > + (window.innerHeight || document.documentElement.clientHeight) + ); } /** - * [getScrollbarWidth] - * @return {[Number]} [description] + * Get the scrollbar width + * @return {Number} */ function getScrollbarWidth() { - var scrollDiv = document.createElement('div'); - scrollDiv.style.cssText = 'width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px;'; + scrollDiv.style.cssText = + 'width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px;'; document.body.appendChild(scrollDiv); var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth; document.body.removeChild(scrollDiv); return scrollbarWidth; - } /** - * [setGrabCursor] - * @param {[Object]} imageData [description] - * @param {[Object]} stageData [description] - * @param {[Object]} stage [description] - * @param {[Boolean]} isRotate [description] + * Set grab cursor when move image + * @param {Object} imageData - The image data + * @param {Object} stageData - The stage data + * @param {Object} stage - The stage element + * @param {Boolean} isRotate - The image rotated flag */ function setGrabCursor(imageData, stageData, stage, isRotated) { - var imageWidth = !isRotated ? imageData.w : imageData.h, imageHeight = !isRotated ? imageData.h : imageData.w; @@ -176,29 +173,35 @@ function setGrabCursor(imageData, stageData, stage, isRotated) { } /** - * [supportTouch] - * @return {[Boolean]} [description] + * Check if browser support touch event + * @return {Boolean} */ function supportTouch() { - return !!(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch); + return !!( + 'ontouchstart' in window || + (window.DocumentTouch && document instanceof DocumentTouch) + ); } /** - * [isIE8] - * @return {[Boolean]} [description] + * Check if the browser is IE8 + * @return {Boolean} */ function isIE8() { - return (navigator.appName == 'Microsoft Internet Explorer' && navigator.appVersion.indexOf('MSIE 8.0') > 0) || - (navigator.appName == 'Microsoft Internet Explorer' && navigator.appVersion.indexOf('MSIE 7.0') > 0); + return ( + (navigator.appName == 'Microsoft Internet Explorer' && + navigator.appVersion.indexOf('MSIE 8.0') > 0) || + (navigator.appName == 'Microsoft Internet Explorer' && + navigator.appVersion.indexOf('MSIE 7.0') > 0) + ); } /** - * Private Static Constants + * Private static constants */ var $W = $(window), $D = $(document), - CLICK_EVENT = 'click', RESIZE_EVENT = 'resize', KEYDOWN_EVENT = 'keydown', @@ -206,11 +209,9 @@ var $W = $(window), TOUCH_START_EVENT = supportTouch() ? 'touchstart' : 'mousedown', TOUCH_MOVE_EVENT = supportTouch() ? 'touchmove' : 'mousemove', TOUCH_END_EVENT = supportTouch() ? 'touchend' : 'mouseup', - NS = 'magnify', EVENT_NS = '.' + NS, - - // plugin default options + // Plugin default options DEFAULTS = { // Enable modal to drag draggable: true, @@ -255,10 +256,7 @@ var $W = $(window), maxRatio: 16, // Toolbar options in header - headToolbar: [ - 'maximize', - 'close' - ], + headToolbar: ['maximize', 'close'], // Toolbar options in footer footToolbar: [ @@ -273,20 +271,23 @@ var $W = $(window), // Customize button icon icons: { - minimize: '\ + minimize: + '\ \ ', - maximize: '\ + maximize: + '\ \ ', - close: '\ + close: + '\ \ ', - zoomIn: '\ + zoomIn: + '\ \ ', - zoomOut: '\ + zoomOut: + '\ \ ', - prev: '\ + prev: + '\ \ ', - next: '\ + next: + '\ \ ', - fullscreen: '\ + fullscreen: + '\ \ ', - actualSize: '\ + actualSize: + '\ \ ', - rotateLeft: '\ + rotateLeft: + '\ \ ', - rotateRight: '\ + rotateRight: + '\ ' : ''); + _createTitle: function() { + return this.options.title ? '
' : ''; }, - render: function () { - + render: function() { var btnsTpl = { - minimize: '', - maximize: '', - close: '', - zoomIn: '', - zoomOut: '', - prev: '', - next: '', - fullscreen: '', - actualSize: '', - rotateLeft: '', - rotateRight: '' }; - // magnify base HTML + // Magnify base HTML var magnifyHTML = '
\
\
' + - this._createBtns(this.options.headToolbar, btnsTpl) + '\ + this._createBtns(this.options.headToolbar, btnsTpl) + + '\
' + - this._createTitle() + '\ + this._createTitle() + + '\
\
\ \
\
\
' + - this._createBtns(this.options.footToolbar, btnsTpl) + '\ + this._createBtns(this.options.footToolbar, btnsTpl) + + '\
\
\
'; return magnifyHTML; - }, - build: function () { - + build: function() { // Create magnify HTML string var magnifyHTML = this.render(); @@ -688,23 +708,25 @@ Magnify.prototype = { this.$magnify.css('z-index', PUBLIC_VARS['zIndex']); // Set handle element of draggable - if (!this.options.dragHandle || this.options.dragHandle === '.magnify-modal') { + if ( + !this.options.dragHandle || + this.options.dragHandle === '.magnify-modal' + ) { this.dragHandle = this.$magnify; } else { this.dragHandle = this.$magnify.find(this.options.dragHandle); } - }, - open: function () { - + open: function() { if (!this.options.multiInstances) { - $('.magnify-modal').eq(0).remove(); + $('.magnify-modal') + .eq(0) + .remove(); } // Fixed modal position bug if (!$('.magnify-modal').length && this.options.fixedContent) { - - $('html').css({ 'overflow': 'hidden' }); + $('html').css({ overflow: 'hidden' }); if (hasScrollbar()) { var scrollbarWidth = getScrollbarWidth(); @@ -712,7 +734,6 @@ Magnify.prototype = { $('html').css({ 'padding-right': scrollbarWidth }); } } - } this.build(); @@ -727,10 +748,8 @@ Magnify.prototype = { this.setModalPos(this.$magnify); this._triggerHook('opened', this.$el); - }, - close: function (el) { - + close: function(el) { this._triggerHook('beforeClose', this.$el); // Remove instance @@ -745,7 +764,7 @@ Magnify.prototype = { // Fixed modal position bug if (zeroModal && this.options.fixedContent) { - $('html').css({ 'overflow': '', 'padding-right': '' }); + $('html').css({ overflow: '', 'padding-right': '' }); } // Reset zIndex after close @@ -760,10 +779,8 @@ Magnify.prototype = { } this._triggerHook('closed', this.$el); - }, - setModalPos: function (modal) { - + setModalPos: function(modal) { var winWidth = $W.width(), winHeight = $W.height(), scrollLeft = $D.scrollLeft(), @@ -774,7 +791,6 @@ Magnify.prototype = { // Set modal maximized when init if (this.options.initMaximized) { - modal.addClass('magnify-maximize'); modal.css({ @@ -786,9 +802,7 @@ Magnify.prototype = { this.isOpened = true; this.isMaximized = true; - } else { - // Make the modal in windows center modal.css({ width: modalWidth, @@ -796,19 +810,16 @@ Magnify.prototype = { left: (winWidth - modalWidth) / 2 + scrollLeft + 'px', top: (winHeight - modalHeight) / 2 + scrollTop + 'px' }); - } - }, - setModalSize: function (img) { - + setModalSize: function(img) { var self = this, winWidth = $W.width(), winHeight = $W.height(), scrollLeft = $D.scrollLeft(), scrollTop = $D.scrollTop(); - // stage css value + // Stage css value var stageCSS = { left: this.$stage.css('left'), right: this.$stage.css('right'), @@ -821,19 +832,22 @@ Magnify.prototype = { }; // Modal size should calc with stage css value - var modalWidth = img.width + - parseFloat(stageCSS.left) + - parseFloat(stageCSS.right) + - parseFloat(stageCSS.borderLeft) + - parseFloat(stageCSS.borderRight), - modalHeight = img.height + + var modalWidth = + img.width + + parseFloat(stageCSS.left) + + parseFloat(stageCSS.right) + + parseFloat(stageCSS.borderLeft) + + parseFloat(stageCSS.borderRight), + modalHeight = + img.height + parseFloat(stageCSS.top) + parseFloat(stageCSS.bottom) + parseFloat(stageCSS.borderTop) + parseFloat(stageCSS.borderBottom); - var gapThreshold = (this.options.gapThreshold > 0 ? this.options.gapThreshold : 0) + 1, - // modal scale to window + var gapThreshold = + (this.options.gapThreshold > 0 ? this.options.gapThreshold : 0) + 1, + // Modal scale to window scale = Math.min( winWidth / (modalWidth * gapThreshold), winHeight / (modalHeight * gapThreshold), @@ -843,8 +857,12 @@ Magnify.prototype = { var minWidth = Math.max(modalWidth * scale, this.options.modalWidth), minHeight = Math.max(modalHeight * scale, this.options.modalHeight); - minWidth = this.options.fixedModalSize ? this.options.modalWidth : Math.round(minWidth); - minHeight = this.options.fixedModalSize ? this.options.modalHeight : Math.round(minHeight); + minWidth = this.options.fixedModalSize + ? this.options.modalWidth + : Math.round(minWidth); + minHeight = this.options.fixedModalSize + ? this.options.modalHeight + : Math.round(minHeight); var modalCSSObj = { width: minWidth + 'px', @@ -855,35 +873,36 @@ Magnify.prototype = { // Add modal init animation if (this.options.initAnimation) { - - this.$magnify.animate(modalCSSObj, function () { + this.$magnify.animate(modalCSSObj, function() { self.setImageSize(img); }); - } else { - this.$magnify.css(modalCSSObj); this.setImageSize(img); - } this.isOpened = true; - }, getImageScaleToStage: function(stageWidth, stageHeight) { - var scale = 1; if (!this.isRotated) { - scale = Math.min(stageWidth / this.img.width, stageHeight / this.img.height, 1); + scale = Math.min( + stageWidth / this.img.width, + stageHeight / this.img.height, + 1 + ); } else { - scale = Math.min(stageWidth / this.img.height, stageHeight / this.img.width, 1); + scale = Math.min( + stageWidth / this.img.height, + stageHeight / this.img.width, + 1 + ); } return scale; }, - setImageSize: function (img) { - + setImageSize: function(img) { var $image = isIE8() ? this.$stage.find('.magnify-image') : this.$image; var stageData = { @@ -891,10 +910,7 @@ Magnify.prototype = { h: this.$stage.height() }; - var scale = this.getImageScaleToStage( - stageData.w, - stageData.h - ); + var scale = this.getImageScaleToStage(stageData.w, stageData.h); $image.css({ width: Math.ceil(img.width * scale) + 'px', @@ -931,14 +947,14 @@ Magnify.prototype = { ); // Just execute before image loaded - if(!this.imgLoaded){ + if (!this.imgLoaded) { // loader end this.$magnify.find('.magnify-loader').remove(); // Remove class must when image setting end this.$stage.removeClass('stage-ready'); this.$image.removeClass('image-ready'); - + // Add image init animation if (this.options.initAnimation && !this.options.progressiveLoading) { $image.fadeIn(); @@ -946,10 +962,8 @@ Magnify.prototype = { this.imgLoaded = true; } - }, - loadImg: function (imgSrc, fn, err) { - + loadImg: function(imgSrc, fn, err) { var self = this; // Reset image @@ -959,7 +973,7 @@ Magnify.prototype = { this.imgLoaded = false; - // loader start + // Loader start this.$magnify.append('
'); // Add class before image loaded @@ -971,55 +985,59 @@ Magnify.prototype = { } if (isIE8()) { - this.$stage.html(''); + this.$stage.html( + '' + ); } else { this.$image.attr('src', imgSrc); } - preloadImg(imgSrc, function (img) { - // Store HTMLImageElement - self.img = img; + preloadImg( + imgSrc, + function(img) { + // Store HTMLImageElement + self.img = img; - // Store original data - self.imageData = { - originalWidth: img.width, - originalHeight: img.height - }; - - if (self.isMaximized || (self.isOpened && self.options.fixedModalPos)) { - self.setImageSize(img); - } else { - self.setModalSize(img); - } + // Store original data + self.imageData = { + originalWidth: img.width, + originalHeight: img.height + }; - // callback of image loaded successfully - if(fn){ - fn.call(); - } + if (self.isMaximized || (self.isOpened && self.options.fixedModalPos)) { + self.setImageSize(img); + } else { + self.setModalSize(img); + } - }, function () { - // loader end - self.$magnify.find('.magnify-loader').remove(); + // Callback of image loaded successfully + if (fn) { + fn.call(); + } + }, + function() { + // Loader end + self.$magnify.find('.magnify-loader').remove(); - // callback of image loading failed - if(err){ - err.call(); + // Callback of image loading failed + if (err) { + err.call(); + } } - }); + ); if (this.options.title) { this.setImgTitle(imgSrc); } - }, - getImgGroup: function (list, imgSrc) { - + getImgGroup: function(list, imgSrc) { var self = this; self.groupData = []; - $(list).each(function (index, item) { - + $(list).each(function(index, item) { var src = getImgSrc(this); self.groupData.push({ @@ -1030,30 +1048,23 @@ Magnify.prototype = { if (imgSrc === src) { self.groupIndex = index; } - }); - }, - setImgTitle: function (url) { - + setImgTitle: function(url) { var index = this.groupIndex, caption = this.groupData[index].caption, caption = caption ? caption : getImageNameFromUrl(url); this.$title.html(caption); - }, - jump: function (step) { - + jump: function(step) { this._triggerHook('beforeChange', this.groupIndex); this.groupIndex = this.groupIndex + step; this.jumpTo(this.groupIndex); - }, - jumpTo: function (index) { - + jumpTo: function(index) { var self = this; index = index % this.groupData.length; @@ -1066,15 +1077,17 @@ Magnify.prototype = { this.groupIndex = index; - this.loadImg(this.groupData[index].src, function () { - self._triggerHook('changed', index); - }, function () { - self._triggerHook('changed', index); - }); - + this.loadImg( + this.groupData[index].src, + function() { + self._triggerHook('changed', index); + }, + function() { + self._triggerHook('changed', index); + } + ); }, - wheel: function (e) { - + wheel: function(e) { e.preventDefault(); var delta = 1; @@ -1087,27 +1100,25 @@ Magnify.prototype = { delta = e.originalEvent.detail > 0 ? 1 : -1; } - // ratio threshold + // Ratio threshold var ratio = -delta * this.options.ratioThreshold; - // mouse point position relative to stage + // Mouse point position relative to stage var pointer = { x: e.originalEvent.clientX - this.$stage.offset().left + $D.scrollLeft(), y: e.originalEvent.clientY - this.$stage.offset().top + $D.scrollTop() }; this.zoom(ratio, pointer, e); - }, - zoom: function (ratio, origin, e) { - + zoom: function(ratio, origin, e) { this.$image = isIE8() ? this.$stage.find('.magnify-image') : this.$image; - // zoom out ratio & zoom in ratio - ratio = ratio < 0 ? (1 / (1 - ratio)) : (1 + ratio); + // Zoom out ratio & Zoom in ratio + ratio = ratio < 0 ? 1 / (1 - ratio) : 1 + ratio; - // image ratio - ratio = this.$image.width() / this.imageData.originalWidth * ratio; + // Image ratio + ratio = (this.$image.width() / this.imageData.originalWidth) * ratio; // Fixed digital error // if (ratio > 0.95 && ratio < 1.05) { @@ -1119,10 +1130,8 @@ Magnify.prototype = { } this.zoomTo(ratio, origin, e); - }, - zoomTo: function (ratio, origin, e) { - + zoomTo: function(ratio, origin, e) { var $image = isIE8() ? this.$stage.find('.magnify-image') : this.$image, $stage = this.$stage, imgData = { @@ -1132,7 +1141,7 @@ Magnify.prototype = { y: this.imageData.top }; - // image stage position + // Image stage position // We will use it to calc the relative position of image var stageData = { w: $stage.width(), @@ -1144,8 +1153,8 @@ Magnify.prototype = { var newWidth = this.imageData.originalWidth * ratio, newHeight = this.imageData.originalHeight * ratio, // Think about it for a while - newLeft = origin.x - (origin.x - imgData.x) / imgData.w * newWidth, - newTop = origin.y - (origin.y - imgData.y) / imgData.h * newHeight; + newLeft = origin.x - ((origin.x - imgData.x) / imgData.w) * newWidth, + newTop = origin.y - ((origin.y - imgData.y) / imgData.h) * newHeight; // δ is the difference between image new width and new height var δ = !this.isRotated ? 0 : (newWidth - newHeight) / 2, @@ -1155,31 +1164,27 @@ Magnify.prototype = { var offsetX = stageData.w - newWidth, offsetY = stageData.h - newHeight; - // zoom out & zoom in condition + // Zoom out & Zoom in condition // It's important and it takes me a lot of time to get it // The conditions with image rotate 90 degree drive me crazy alomst! if (imgNewHeight <= stageData.h) { newTop = (stageData.h - newHeight) / 2; } else { - newTop = newTop > δ - ? δ - : (newTop > (offsetY - δ) - ? newTop - : (offsetY - δ)); + newTop = newTop > δ ? δ : newTop > offsetY - δ ? newTop : offsetY - δ; } if (imgNewWidth <= stageData.w) { newLeft = (stageData.w - newWidth) / 2; } else { - newLeft = newLeft > -δ - ? -δ - : (newLeft > (offsetX + δ) - ? newLeft - : (offsetX + δ)); + newLeft = + newLeft > -δ ? -δ : newLeft > offsetX + δ ? newLeft : offsetX + δ; } - // if the image scale get to the critical point - if (Math.abs(this.imageData.initWidth - newWidth) < this.imageData.initWidth * 0.05) { + // If the image scale get to the critical point + if ( + Math.abs(this.imageData.initWidth - newWidth) < + this.imageData.initWidth * 0.05 + ) { this.setImageSize(this.img); } else { $image.css({ @@ -1211,10 +1216,8 @@ Magnify.prototype = { left: newLeft, top: newTop }); - }, - rotate: function (angle) { - + rotate: function(angle) { this.rotateAngle = this.rotateAngle + angle; if ((this.rotateAngle / 90) % 2 === 0) { @@ -1224,14 +1227,12 @@ Magnify.prototype = { } this.rotateTo(this.rotateAngle); - }, - rotateTo: function (angle) { - + rotateTo: function(angle) { var self = this, $image = isIE8() ? this.$stage.find('.magnify-image') : this.$image; - // depend on jQueryRotate.js + // Depend on jQueryRotate.js $image.rotate({ angle: angle }); @@ -1243,16 +1244,12 @@ Magnify.prototype = { // Remove grab cursor when rotate this.$stage.removeClass('is-grab'); - }, - resize: function () { - + resize: function() { var self = this; - var resizeHandler = throttle(function () { - + var resizeHandler = throttle(function() { if (self.isOpened) { - if (self.isMaximized) { self.setImageSize({ width: self.imageData.originalWidth, @@ -1264,16 +1261,12 @@ Magnify.prototype = { height: self.imageData.originalHeight }); } - } - }, 500); return resizeHandler; - }, - maximize: function () { - + maximize: function() { var self = this; if (!this.isMaximized) { @@ -1295,9 +1288,7 @@ Magnify.prototype = { }); this.isMaximized = true; - } else { - this.$magnify.removeClass('magnify-maximize'); this.$magnify.css({ @@ -1322,15 +1313,11 @@ Magnify.prototype = { width: this.imageData.originalWidth, height: this.imageData.originalHeight }); - }, - fullscreen: function () { - + fullscreen: function() { requestFullscreen(this.$magnify[0]); - }, - keydown: function (e) { - + keydown: function(e) { var self = this; if (!this.options.keyboard) { @@ -1342,140 +1329,163 @@ Magnify.prototype = { altKey = e.altKey || e.metaKey; switch (keyCode) { - // ← - case 37: - self.jump(-1); - break; + // ← + case 37: + self.jump(-1); + break; // → - case 39: - self.jump(1); - break; + case 39: + self.jump(1); + break; // + - case 187: - self.zoom( - self.options.ratioThreshold * 3, - { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, - e - ); - break; + case 187: + self.zoom( + self.options.ratioThreshold * 3, + { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, + e + ); + break; // - - case 189: - self.zoom( - -self.options.ratioThreshold * 3, - { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, - e - ); - break; + case 189: + self.zoom( + -self.options.ratioThreshold * 3, + { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, + e + ); + break; // + Firefox - case 61: - self.zoom( - self.options.ratioThreshold * 3, - { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, - e - ); - break; + case 61: + self.zoom( + self.options.ratioThreshold * 3, + { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, + e + ); + break; // - Firefox - case 173: - self.zoom( - -self.options.ratioThreshold * 3, - { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, - e - ); - break; - // ctrl + alt + 0 - case 48: - if (ctrlKey && altKey) { - self.zoomTo( - 1, + case 173: + self.zoom( + -self.options.ratioThreshold * 3, { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, e ); - } - break; - // ctrl + , - case 188: - if (ctrlKey) { - self.rotate(-90); - } - break; - // ctrl + . - case 190: - if (ctrlKey) { - self.rotate(90); - } - break; - default: + break; + // Ctrl + Alt + 0 + case 48: + if (ctrlKey && altKey) { + self.zoomTo( + 1, + { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, + e + ); + } + break; + // Ctrl + , + case 188: + if (ctrlKey) { + self.rotate(-90); + } + break; + // Ctrl + . + case 190: + if (ctrlKey) { + self.rotate(90); + } + break; + // Q + case 81: + this.close(); + break; + default: } - }, - addEvents: function () { - + addEvents: function() { var self = this; - this.$close.off(CLICK_EVENT + EVENT_NS).on(CLICK_EVENT + EVENT_NS, function (e) { - self.close(); - }); + this.$close + .off(CLICK_EVENT + EVENT_NS) + .on(CLICK_EVENT + EVENT_NS, function(e) { + self.close(); + }); - this.$stage.off(WHEEL_EVENT + EVENT_NS).on(WHEEL_EVENT + EVENT_NS, function (e) { - self.wheel(e); - }); + this.$stage + .off(WHEEL_EVENT + EVENT_NS) + .on(WHEEL_EVENT + EVENT_NS, function(e) { + self.wheel(e); + }); - this.$zoomIn.off(CLICK_EVENT + EVENT_NS).on(CLICK_EVENT + EVENT_NS, function (e) { - self.zoom( - self.options.ratioThreshold * 3, - { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, - e - ); - }); + this.$zoomIn + .off(CLICK_EVENT + EVENT_NS) + .on(CLICK_EVENT + EVENT_NS, function(e) { + self.zoom( + self.options.ratioThreshold * 3, + { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, + e + ); + }); - this.$zoomOut.off(CLICK_EVENT + EVENT_NS).on(CLICK_EVENT + EVENT_NS, function (e) { - self.zoom( - -self.options.ratioThreshold * 3, - { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, - e - ); - }); + this.$zoomOut + .off(CLICK_EVENT + EVENT_NS) + .on(CLICK_EVENT + EVENT_NS, function(e) { + self.zoom( + -self.options.ratioThreshold * 3, + { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, + e + ); + }); - this.$actualSize.off(CLICK_EVENT + EVENT_NS).on(CLICK_EVENT + EVENT_NS, function (e) { - self.zoomTo( - 1, - { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, - e - ); - }); + this.$actualSize + .off(CLICK_EVENT + EVENT_NS) + .on(CLICK_EVENT + EVENT_NS, function(e) { + self.zoomTo( + 1, + { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, + e + ); + }); - this.$prev.off(CLICK_EVENT + EVENT_NS).on(CLICK_EVENT + EVENT_NS, function () { - self.jump(-1); - }); + this.$prev + .off(CLICK_EVENT + EVENT_NS) + .on(CLICK_EVENT + EVENT_NS, function() { + self.jump(-1); + }); - this.$fullscreen.off(CLICK_EVENT + EVENT_NS).on(CLICK_EVENT + EVENT_NS, function () { - self.fullscreen(); - }); + this.$fullscreen + .off(CLICK_EVENT + EVENT_NS) + .on(CLICK_EVENT + EVENT_NS, function() { + self.fullscreen(); + }); - this.$next.off(CLICK_EVENT + EVENT_NS).on(CLICK_EVENT + EVENT_NS, function () { - self.jump(1); - }); + this.$next + .off(CLICK_EVENT + EVENT_NS) + .on(CLICK_EVENT + EVENT_NS, function() { + self.jump(1); + }); - this.$rotateLeft.off(CLICK_EVENT + EVENT_NS).on(CLICK_EVENT + EVENT_NS, function () { - self.rotate(-90); - }); + this.$rotateLeft + .off(CLICK_EVENT + EVENT_NS) + .on(CLICK_EVENT + EVENT_NS, function() { + self.rotate(-90); + }); - this.$rotateRight.off(CLICK_EVENT + EVENT_NS).on(CLICK_EVENT + EVENT_NS, function () { - self.rotate(90); - }); + this.$rotateRight + .off(CLICK_EVENT + EVENT_NS) + .on(CLICK_EVENT + EVENT_NS, function() { + self.rotate(90); + }); - this.$maximize.off(CLICK_EVENT + EVENT_NS).on(CLICK_EVENT + EVENT_NS, function () { - self.maximize(); - }); + this.$maximize + .off(CLICK_EVENT + EVENT_NS) + .on(CLICK_EVENT + EVENT_NS, function() { + self.maximize(); + }); - $D.off(KEYDOWN_EVENT + EVENT_NS).on(KEYDOWN_EVENT + EVENT_NS, function (e) { + $D.off(KEYDOWN_EVENT + EVENT_NS).on(KEYDOWN_EVENT + EVENT_NS, function(e) { self.keydown(e); }); $W.on(RESIZE_EVENT + EVENT_NS, self.resize()); - }, - _triggerHook: function (e, data) { + _triggerHook: function(e, data) { if (this.options.callbacks[e]) { this.options.callbacks[e].apply(this, $.isArray(data) ? data : [data]); } @@ -1486,13 +1496,12 @@ Magnify.prototype = { * jQuery plugin */ -$.fn.magnify = function (options) { - +$.fn.magnify = function(options) { jqEl = $(this); // Convert a numeric string into a number for (var key in options) { - if (typeof (options[key]) === 'string' && !isNaN(options[key])) { + if (typeof options[key] === 'string' && !isNaN(options[key])) { options[key] = parseFloat(options[key]); } } @@ -1504,82 +1513,64 @@ $.fn.magnify = function (options) { PUBLIC_VARS['zIndex'] = opts.zIndex; if (typeof options === 'string') { - // $(this).data('magnify')[options](); - } else { - if (opts.initEvent === 'dblclick') { - - jqEl.off('click' + EVENT_NS).on('click' + EVENT_NS, function (e) { - + jqEl.off('click' + EVENT_NS).on('click' + EVENT_NS, function(e) { e.preventDefault(); // This will stop triggering data-api event e.stopPropagation(); - }); - } - jqEl.off(opts.initEvent + EVENT_NS).on(opts.initEvent + EVENT_NS, function (e) { - - e.preventDefault(); - // This will stop triggering data-api event - e.stopPropagation(); - - $(this).data('magnify', new Magnify(this, options)); - - }); + jqEl + .off(opts.initEvent + EVENT_NS) + .on(opts.initEvent + EVENT_NS, function(e) { + e.preventDefault(); + // This will stop triggering data-api event + e.stopPropagation(); + $(this).data('magnify', new Magnify(this, options)); + }); } return jqEl; - }; /** * MAGNIFY DATA-API */ -$D.on(CLICK_EVENT + EVENT_NS, '[data-magnify]', function (e) { - +$D.on(CLICK_EVENT + EVENT_NS, '[data-magnify]', function(e) { jqEl = $('[data-magnify]'); e.preventDefault(); $(this).data('magnify', new Magnify(this, DEFAULTS)); - }); /** - * [draggable] - * @param {[Object]} modal [the modal element] - * @param {[Object]} dragHandle [the handle element when dragging] - * @param {[Object]} dragCancel [the cancel element when dragging] + * Draggable + * @param {Object} modal - The modal element + * @param {Object} dragHandle - The handle element when dragging + * @param {Object} dragCancel - The cancel element when dragging */ -var draggable = function (modal, dragHandle, dragCancel) { - +var draggable = function(modal, dragHandle, dragCancel) { var self = this; var isDragging = false; var startX = 0, startY = 0, - left = 0, top = 0; - var dragStart = function (e) { - + var dragStart = function(e) { var e = e || window.event; // Must be removed // e.preventDefault(); - if (self.options.multiInstances) { - modal.css('z-index', ++PUBLIC_VARS['zIndex']); - } - // Get clicked button var elemCancel = $(e.target).closest(dragCancel); // Stop modal moving when click buttons @@ -1587,38 +1578,49 @@ var draggable = function (modal, dragHandle, dragCancel) { return true; } + if (self.options.multiInstances) { + modal.css('z-index', ++PUBLIC_VARS['zIndex']); + } + isDragging = true; - startX = e.type === 'touchstart' - ? e.originalEvent.targetTouches[0].pageX - : e.clientX; - startY = e.type === 'touchstart' - ? e.originalEvent.targetTouches[0].pageY - : e.clientY; + startX = + e.type === 'touchstart' + ? e.originalEvent.targetTouches[0].pageX + : e.clientX; + startY = + e.type === 'touchstart' + ? e.originalEvent.targetTouches[0].pageY + : e.clientY; left = $(modal).offset().left; top = $(modal).offset().top; - $D.on(TOUCH_MOVE_EVENT + EVENT_NS, dragMove) - .on(TOUCH_END_EVENT + EVENT_NS, dragEnd); - + $D.on(TOUCH_MOVE_EVENT + EVENT_NS, dragMove).on( + TOUCH_END_EVENT + EVENT_NS, + dragEnd + ); }; - var dragMove = function (e) { - + var dragMove = function(e) { var e = e || window.event; e.preventDefault(); - if (isDragging && !PUBLIC_VARS['isMoving'] && !PUBLIC_VARS['isResizing'] && !self.isMaximized) { - - var endX = e.type === 'touchmove' - ? e.originalEvent.targetTouches[0].pageX - : e.clientX, - endY = e.type === 'touchmove' - ? e.originalEvent.targetTouches[0].pageY - : e.clientY, - + if ( + isDragging && + !PUBLIC_VARS['isMoving'] && + !PUBLIC_VARS['isResizing'] && + !self.isMaximized + ) { + var endX = + e.type === 'touchmove' + ? e.originalEvent.targetTouches[0].pageX + : e.clientX, + endY = + e.type === 'touchmove' + ? e.originalEvent.targetTouches[0].pageY + : e.clientY, relativeX = endX - startX, relativeY = endY - startY; @@ -1626,22 +1628,19 @@ var draggable = function (modal, dragHandle, dragCancel) { left: relativeX + left + 'px', top: relativeY + top + 'px' }); - } - }; - var dragEnd = function (e) { - - $D.off(TOUCH_MOVE_EVENT + EVENT_NS, dragMove) - .off(TOUCH_END_EVENT + EVENT_NS, dragEnd); + var dragEnd = function(e) { + $D.off(TOUCH_MOVE_EVENT + EVENT_NS, dragMove).off( + TOUCH_END_EVENT + EVENT_NS, + dragEnd + ); isDragging = false; - }; $(dragHandle).on(TOUCH_START_EVENT + EVENT_NS, dragStart); - }; // Add to Magnify Prototype @@ -1650,37 +1649,32 @@ $.extend(Magnify.prototype, { }); /** - * -------------------------------------- - * 1.no movable - * 2.vertical movable - * 3.horizontal movable - * 4.vertical & horizontal movable - * -------------------------------------- + * -------------------------------------------------------------------------- + * 1. No movable + * 2. Vertical movable + * 3. Horizontal movable + * 4. Vertical & Horizontal movable + * -------------------------------------------------------------------------- * - * [image movable] - * @param {[Object]} stage [the stage element] - * @param {[Object]} image [the image element] + * Image movable + * @param {Object} stage - The stage element + * @param {Object} image - The image element */ -var movable = function (stage, image) { - +var movable = function(stage, image) { var self = this; var isDragging = false; var startX = 0, startY = 0, - left = 0, top = 0, - widthDiff = 0, heightDiff = 0, - δ = 0; - var dragStart = function (e) { - + var dragStart = function(e) { var e = e || window.event; e.preventDefault(); @@ -1692,27 +1686,29 @@ var movable = function (stage, image) { stageWidth = $(stage).width(), stageHeight = $(stage).height(); - startX = e.type === 'touchstart' - ? e.originalEvent.targetTouches[0].pageX - : e.clientX; - startY = e.type === 'touchstart' - ? e.originalEvent.targetTouches[0].pageY - : e.clientY; + startX = + e.type === 'touchstart' + ? e.originalEvent.targetTouches[0].pageX + : e.clientX; + startY = + e.type === 'touchstart' + ? e.originalEvent.targetTouches[0].pageY + : e.clientY; // δ is the difference between image width and height δ = !self.isRotated ? 0 : (imageWidth - imageHeight) / 2; // Width or height difference can be use to limit image right or top position widthDiff = !self.isRotated - ? (imageWidth - stageWidth) - : (imageHeight - stageWidth); + ? imageWidth - stageWidth + : imageHeight - stageWidth; heightDiff = !self.isRotated - ? (imageHeight - stageHeight) - : (imageWidth - stageHeight); + ? imageHeight - stageHeight + : imageWidth - stageHeight; // Modal can be dragging if image is smaller to stage - isDragging = (widthDiff > 0 || heightDiff > 0) ? true : false; - PUBLIC_VARS['isMoving'] = (widthDiff > 0 || heightDiff > 0) ? true : false; + isDragging = widthDiff > 0 || heightDiff > 0 ? true : false; + PUBLIC_VARS['isMoving'] = widthDiff > 0 || heightDiff > 0 ? true : false; // Reclac the element position when mousedown // Fixed the issue of stage with a border @@ -1721,16 +1717,18 @@ var movable = function (stage, image) { // Add grabbing cursor if (stage.hasClass('is-grab')) { - $('html,body,.magnify-modal,.magnify-stage,.magnify-button,.magnify-resizable-handle').addClass('is-grabbing'); + $( + 'html,body,.magnify-modal,.magnify-stage,.magnify-button,.magnify-resizable-handle' + ).addClass('is-grabbing'); } - $D.on(TOUCH_MOVE_EVENT + EVENT_NS, dragMove) - .on(TOUCH_END_EVENT + EVENT_NS, dragEnd); - + $D.on(TOUCH_MOVE_EVENT + EVENT_NS, dragMove).on( + TOUCH_END_EVENT + EVENT_NS, + dragEnd + ); }; - var dragMove = function (e) { - + var dragMove = function(e) { var e = e || window.event; e.preventDefault(); @@ -1738,41 +1736,36 @@ var movable = function (stage, image) { var $image = isIE8() ? $(stage).find(image) : $(image); if (isDragging) { - - var endX = e.type === 'touchmove' - ? e.originalEvent.targetTouches[0].pageX - : e.clientX, - endY = e.type === 'touchmove' - ? e.originalEvent.targetTouches[0].pageY - : e.clientY, - + var endX = + e.type === 'touchmove' + ? e.originalEvent.targetTouches[0].pageX + : e.clientX, + endY = + e.type === 'touchmove' + ? e.originalEvent.targetTouches[0].pageY + : e.clientY, relativeX = endX - startX, relativeY = endY - startY, - newLeft = relativeX + left, newTop = relativeY + top; - // vertical limit + // Vertical limit if (heightDiff > 0) { - - if ((relativeY + top) > δ) { + if (relativeY + top > δ) { newTop = δ; - } else if ((relativeY + top) < -heightDiff + δ) { + } else if (relativeY + top < -heightDiff + δ) { newTop = -heightDiff + δ; } - } else { newTop = top; } - // horizontal limit + // Horizontal limit if (widthDiff > 0) { - - if ((relativeX + left) > -δ) { + if (relativeX + left > -δ) { newLeft = -δ; - } else if ((relativeX + left) < -widthDiff - δ) { + } else if (relativeX + left < -widthDiff - δ) { newLeft = -widthDiff - δ; } - } else { newLeft = left; } @@ -1787,26 +1780,25 @@ var movable = function (stage, image) { left: newLeft, top: newTop }); - } - }; - var dragEnd = function (e) { - - $D.off(TOUCH_MOVE_EVENT + EVENT_NS, dragMove) - .off(TOUCH_END_EVENT + EVENT_NS, dragEnd); + var dragEnd = function(e) { + $D.off(TOUCH_MOVE_EVENT + EVENT_NS, dragMove).off( + TOUCH_END_EVENT + EVENT_NS, + dragEnd + ); isDragging = false; PUBLIC_VARS['isMoving'] = false; // Remove grabbing cursor - $('html,body,.magnify-modal,.magnify-stage,.magnify-button,.magnify-resizable-handle').removeClass('is-grabbing'); - + $( + 'html,body,.magnify-modal,.magnify-stage,.magnify-button,.magnify-resizable-handle' + ).removeClass('is-grabbing'); }; $(stage).on(TOUCH_START_EVENT + EVENT_NS, dragStart); - }; // Add to Magnify Prototype @@ -1815,54 +1807,74 @@ $.extend(Magnify.prototype, { }); /** - * ------------------------------ - * 1.modal resizable - * 2.keep image in stage center - * 3.other image limitations - * ------------------------------ + * -------------------------------------------------------------------------- + * 1. Modal resizable + * 2. Keep image in stage center + * 3. Other image limitations + * -------------------------------------------------------------------------- * - * [resizable] - * @param {[Object]} modal [the modal element] - * @param {[Object]} stage [the stage element] - * @param {[Object]} image [the image element] - * @param {[Number]} minWidth [the option of modalWidth] - * @param {[Number]} minHeight [the option of modalHeight] + * Resizable + * @param {Object} modal - The modal element + * @param {Object} stage - The stage element + * @param {Object} image - The image element + * @param {Number} minWidth - The option of modalWidth + * @param {Number} minHeight - The option of modalHeight */ -var resizable = function (modal, stage, image, minWidth, minHeight) { - +var resizable = function(modal, stage, image, minWidth, minHeight) { var self = this; - var resizableHandleE = $('
'), - resizableHandleW = $('
'), - resizableHandleS = $('
'), - resizableHandleN = $('
'), - resizableHandleSE = $('
'), - resizableHandleSW = $('
'), - resizableHandleNE = $('
'), - resizableHandleNW = $('
'); + var resizableHandleE = $( + '
' + ), + resizableHandleW = $( + '
' + ), + resizableHandleS = $( + '
' + ), + resizableHandleN = $( + '
' + ), + resizableHandleSE = $( + '
' + ), + resizableHandleSW = $( + '
' + ), + resizableHandleNE = $( + '
' + ), + resizableHandleNW = $( + '
' + ); var resizableHandles = { - 'e': resizableHandleE, - 's': resizableHandleS, - 'se': resizableHandleSE, - 'n': resizableHandleN, - 'w': resizableHandleW, - 'nw': resizableHandleNW, - 'ne': resizableHandleNE, - 'sw': resizableHandleSW + e: resizableHandleE, + s: resizableHandleS, + se: resizableHandleSE, + n: resizableHandleN, + w: resizableHandleW, + nw: resizableHandleNW, + ne: resizableHandleNE, + sw: resizableHandleSW }; $(modal).append( - resizableHandleE, resizableHandleW, resizableHandleS, resizableHandleN, - resizableHandleSE, resizableHandleSW, resizableHandleNE, resizableHandleNW + resizableHandleE, + resizableHandleW, + resizableHandleS, + resizableHandleN, + resizableHandleSE, + resizableHandleSW, + resizableHandleNE, + resizableHandleNW ); var isDragging = false; var startX = 0, startY = 0, - modalData = { w: 0, h: 0, @@ -1881,58 +1893,57 @@ var resizable = function (modal, stage, image, minWidth, minHeight) { l: 0, t: 0 }, - // δ is the difference between image width and height δ = 0, imgWidth = 0, imgHeight = 0, - direction = ''; - // modal CSS options - var getModalOpts = function (dir, offsetX, offsetY) { - + // Modal CSS options + var getModalOpts = function(dir, offsetX, offsetY) { // Modal should not move when its width to the minwidth - var modalLeft = (-offsetX + modalData.w) > minWidth - ? (offsetX + modalData.l) - : (modalData.l + modalData.w - minWidth), - modalTop = (-offsetY + modalData.h) > minHeight - ? (offsetY + modalData.t) - : (modalData.t + modalData.h - minHeight); + var modalLeft = + -offsetX + modalData.w > minWidth + ? offsetX + modalData.l + : modalData.l + modalData.w - minWidth, + modalTop = + -offsetY + modalData.h > minHeight + ? offsetY + modalData.t + : modalData.t + modalData.h - minHeight; var opts = { - 'e': { - width: Math.max((offsetX + modalData.w), minWidth) + 'px' + e: { + width: Math.max(offsetX + modalData.w, minWidth) + 'px' }, - 's': { - height: Math.max((offsetY + modalData.h), minHeight) + 'px' + s: { + height: Math.max(offsetY + modalData.h, minHeight) + 'px' }, - 'se': { - width: Math.max((offsetX + modalData.w), minWidth) + 'px', - height: Math.max((offsetY + modalData.h), minHeight) + 'px' + se: { + width: Math.max(offsetX + modalData.w, minWidth) + 'px', + height: Math.max(offsetY + modalData.h, minHeight) + 'px' }, - 'w': { - width: Math.max((-offsetX + modalData.w), minWidth) + 'px', + w: { + width: Math.max(-offsetX + modalData.w, minWidth) + 'px', left: modalLeft + 'px' }, - 'n': { - height: Math.max((-offsetY + modalData.h), minHeight) + 'px', + n: { + height: Math.max(-offsetY + modalData.h, minHeight) + 'px', top: modalTop + 'px' }, - 'nw': { - width: Math.max((-offsetX + modalData.w), minWidth) + 'px', - height: Math.max((-offsetY + modalData.h), minHeight) + 'px', + nw: { + width: Math.max(-offsetX + modalData.w, minWidth) + 'px', + height: Math.max(-offsetY + modalData.h, minHeight) + 'px', top: modalTop + 'px', left: modalLeft + 'px' }, - 'ne': { - width: Math.max((offsetX + modalData.w), minWidth) + 'px', - height: Math.max((-offsetY + modalData.h), minHeight) + 'px', + ne: { + width: Math.max(offsetX + modalData.w, minWidth) + 'px', + height: Math.max(-offsetY + modalData.h, minHeight) + 'px', top: modalTop + 'px' }, - 'sw': { - width: Math.max((-offsetX + modalData.w), minWidth) + 'px', - height: Math.max((offsetY + modalData.h), minHeight) + 'px', + sw: { + width: Math.max(-offsetX + modalData.w, minWidth) + 'px', + height: Math.max(offsetY + modalData.h, minHeight) + 'px', left: modalLeft + 'px' } }; @@ -1940,136 +1951,141 @@ var resizable = function (modal, stage, image, minWidth, minHeight) { return opts[dir]; }; - // image CSS options - var getImageOpts = function (dir, offsetX, offsetY) { - + // Image CSS options + var getImageOpts = function(dir, offsetX, offsetY) { var $image = isIE8() ? $(stage).find(image) : $(image); // In modern browser, the width and height of image won't change after rotated. // But its position top and left will get values from the image rotated. // In IE8 browser, due to the type of rotating, all the value will be the same. - var imgPosLeft = isIE8() ? ($image.position().left + δ) : $image.position().left, - imgPosTop = isIE8() ? ($image.position().top - δ) : $image.position().top; + var imgPosLeft = isIE8() + ? $image.position().left + δ + : $image.position().left, + imgPosTop = isIE8() ? $image.position().top - δ : $image.position().top; // Image should not move when modal width to the min width // The minwidth is modal width, so we should clac the stage minwidth - var widthDiff = (offsetX + modalData.w) > minWidth - ? (stageData.w - imgWidth + offsetX - δ) - : (minWidth - (modalData.w - stageData.w) - imgWidth - δ), - heightDiff = (offsetY + modalData.h) > minHeight - ? (stageData.h - imgHeight + offsetY + δ) - : (minHeight - (modalData.h - stageData.h) - imgHeight + δ), - - widthDiff2 = (-offsetX + modalData.w) > minWidth - ? (stageData.w - imgWidth - offsetX - δ) - : (minWidth - (modalData.w - stageData.w) - imgWidth - δ), - heightDiff2 = (-offsetY + modalData.h) > minHeight - ? (stageData.h - imgHeight - offsetY + δ) - : (minHeight - (modalData.h - stageData.h) - imgHeight + δ); + var widthDiff = + offsetX + modalData.w > minWidth + ? stageData.w - imgWidth + offsetX - δ + : minWidth - (modalData.w - stageData.w) - imgWidth - δ, + heightDiff = + offsetY + modalData.h > minHeight + ? stageData.h - imgHeight + offsetY + δ + : minHeight - (modalData.h - stageData.h) - imgHeight + δ, + widthDiff2 = + -offsetX + modalData.w > minWidth + ? stageData.w - imgWidth - offsetX - δ + : minWidth - (modalData.w - stageData.w) - imgWidth - δ, + heightDiff2 = + -offsetY + modalData.h > minHeight + ? stageData.h - imgHeight - offsetY + δ + : minHeight - (modalData.h - stageData.h) - imgHeight + δ; // Get image position in dragging - var imgLeft = (widthDiff > 0 - ? imgPosLeft - : (imgPosLeft < 0 - ? imgPosLeft - : 0)) - δ, - imgTop = (heightDiff > 0 - ? imgPosTop - : (imgPosTop < 0 - ? imgPosTop - : 0)) + δ, - - imgLeft2 = (widthDiff2 > 0 - ? imgPosLeft - : (imgPosLeft < 0 - ? imgPosLeft - : 0)) - δ, - imgTop2 = (heightDiff2 > 0 - ? imgPosTop - : (imgPosTop < 0 - ? imgPosTop - : 0)) + δ; + var imgLeft = + (widthDiff > 0 ? imgPosLeft : imgPosLeft < 0 ? imgPosLeft : 0) - δ, + imgTop = (heightDiff > 0 ? imgPosTop : imgPosTop < 0 ? imgPosTop : 0) + δ, + imgLeft2 = + (widthDiff2 > 0 ? imgPosLeft : imgPosLeft < 0 ? imgPosLeft : 0) - δ, + imgTop2 = + (heightDiff2 > 0 ? imgPosTop : imgPosTop < 0 ? imgPosTop : 0) + δ; var opts = { - 'e': { - left: widthDiff >= -δ - ? ((widthDiff - δ) / 2 + 'px') - : (imgLeft > widthDiff - ? (imgLeft + 'px') - : (widthDiff + 'px')) + e: { + left: + widthDiff >= -δ + ? (widthDiff - δ) / 2 + 'px' + : imgLeft > widthDiff + ? imgLeft + 'px' + : widthDiff + 'px' }, - 's': { - top: heightDiff >= δ - ? ((heightDiff + δ) / 2 + 'px') - : (imgTop > heightDiff - ? (imgTop + 'px') - : (heightDiff + 'px')) + s: { + top: + heightDiff >= δ + ? (heightDiff + δ) / 2 + 'px' + : imgTop > heightDiff + ? imgTop + 'px' + : heightDiff + 'px' }, - 'se': { - top: heightDiff >= δ - ? ((heightDiff + δ) / 2 + 'px') - : (imgTop > heightDiff ? (imgTop + 'px') : (heightDiff + 'px')), - left: widthDiff >= -δ - ? ((widthDiff - δ) / 2 + 'px') - : (imgLeft > widthDiff ? (imgLeft + 'px') : (widthDiff + 'px')) + se: { + top: + heightDiff >= δ + ? (heightDiff + δ) / 2 + 'px' + : imgTop > heightDiff + ? imgTop + 'px' + : heightDiff + 'px', + left: + widthDiff >= -δ + ? (widthDiff - δ) / 2 + 'px' + : imgLeft > widthDiff + ? imgLeft + 'px' + : widthDiff + 'px' }, - 'w': { - left: widthDiff2 >= -δ - ? ((widthDiff2 - δ) / 2 + 'px') - : (imgLeft2 > widthDiff2 - ? (imgLeft2 + 'px') - : (widthDiff2 + 'px')) + w: { + left: + widthDiff2 >= -δ + ? (widthDiff2 - δ) / 2 + 'px' + : imgLeft2 > widthDiff2 + ? imgLeft2 + 'px' + : widthDiff2 + 'px' }, - 'n': { - top: heightDiff2 >= δ - ? ((heightDiff2 + δ) / 2 + 'px') - : (imgTop2 > heightDiff2 - ? (imgTop2 + 'px') - : (heightDiff2 + 'px')) + n: { + top: + heightDiff2 >= δ + ? (heightDiff2 + δ) / 2 + 'px' + : imgTop2 > heightDiff2 + ? imgTop2 + 'px' + : heightDiff2 + 'px' }, - 'nw': { - top: heightDiff2 >= δ - ? ((heightDiff2 + δ) / 2 + 'px') - : (imgTop2 > heightDiff2 - ? (imgTop2 + 'px') - : (heightDiff2 + 'px')), - left: widthDiff2 >= -δ - ? ((widthDiff2 - δ) / 2 + 'px') - : (imgLeft2 > widthDiff2 - ? (imgLeft2 + 'px') - : (widthDiff2 + 'px')) + nw: { + top: + heightDiff2 >= δ + ? (heightDiff2 + δ) / 2 + 'px' + : imgTop2 > heightDiff2 + ? imgTop2 + 'px' + : heightDiff2 + 'px', + left: + widthDiff2 >= -δ + ? (widthDiff2 - δ) / 2 + 'px' + : imgLeft2 > widthDiff2 + ? imgLeft2 + 'px' + : widthDiff2 + 'px' }, - 'ne': { - top: heightDiff2 >= δ - ? ((heightDiff2 + δ) / 2 + 'px') - : (imgTop2 > heightDiff2 - ? (imgTop2 + 'px') - : (heightDiff2 + 'px')), - left: widthDiff >= -δ - ? ((widthDiff - δ) / 2 + 'px') - : (imgLeft > widthDiff - ? (imgLeft + 'px') - : (widthDiff + 'px')) + ne: { + top: + heightDiff2 >= δ + ? (heightDiff2 + δ) / 2 + 'px' + : imgTop2 > heightDiff2 + ? imgTop2 + 'px' + : heightDiff2 + 'px', + left: + widthDiff >= -δ + ? (widthDiff - δ) / 2 + 'px' + : imgLeft > widthDiff + ? imgLeft + 'px' + : widthDiff + 'px' }, - 'sw': { - top: heightDiff >= δ - ? ((heightDiff + δ) / 2 + 'px') - : (imgTop > heightDiff - ? (imgTop + 'px') - : (heightDiff + 'px')), - left: widthDiff2 >= -δ - ? ((widthDiff2 - δ) / 2 + 'px') - : (imgLeft2 > widthDiff2 - ? (imgLeft2 + 'px') - : (widthDiff2 + 'px')) + sw: { + top: + heightDiff >= δ + ? (heightDiff + δ) / 2 + 'px' + : imgTop > heightDiff + ? imgTop + 'px' + : heightDiff + 'px', + left: + widthDiff2 >= -δ + ? (widthDiff2 - δ) / 2 + 'px' + : imgLeft2 > widthDiff2 + ? imgLeft2 + 'px' + : widthDiff2 + 'px' } }; return opts[dir]; }; - var dragStart = function (dir, e) { - + var dragStart = function(dir, e) { var e = e || window.event; e.preventDefault(); @@ -2079,12 +2095,14 @@ var resizable = function (modal, stage, image, minWidth, minHeight) { isDragging = true; PUBLIC_VARS['isResizing'] = true; - startX = e.type === 'touchstart' - ? e.originalEvent.targetTouches[0].pageX - : e.clientX; - startY = e.type === 'touchstart' - ? e.originalEvent.targetTouches[0].pageY - : e.clientY; + startX = + e.type === 'touchstart' + ? e.originalEvent.targetTouches[0].pageX + : e.clientX; + startY = + e.type === 'touchstart' + ? e.originalEvent.targetTouches[0].pageY + : e.clientY; // Reclac the modal data when mousedown modalData = { @@ -2116,15 +2134,18 @@ var resizable = function (modal, stage, image, minWidth, minHeight) { direction = dir; // Add resizable cursor - $('html,body,.magnify-modal,.magnify-stage,.magnify-button').css('cursor', dir + '-resize'); - - $D.on(TOUCH_MOVE_EVENT + EVENT_NS, dragMove) - .on(TOUCH_END_EVENT + EVENT_NS, dragEnd); + $('html,body,.magnify-modal,.magnify-stage,.magnify-button').css( + 'cursor', + dir + '-resize' + ); + $D.on(TOUCH_MOVE_EVENT + EVENT_NS, dragMove).on( + TOUCH_END_EVENT + EVENT_NS, + dragEnd + ); }; - var dragMove = function (e) { - + var dragMove = function(e) { var e = e || window.event; e.preventDefault(); @@ -2132,14 +2153,14 @@ var resizable = function (modal, stage, image, minWidth, minHeight) { var $image = isIE8() ? $(stage).find(image) : $(image); if (isDragging && !self.isMaximized) { - - var endX = e.type === 'touchmove' - ? e.originalEvent.targetTouches[0].pageX - : e.clientX, - endY = e.type === 'touchmove' - ? e.originalEvent.targetTouches[0].pageY - : e.clientY, - + var endX = + e.type === 'touchmove' + ? e.originalEvent.targetTouches[0].pageX + : e.clientX, + endY = + e.type === 'touchmove' + ? e.originalEvent.targetTouches[0].pageY + : e.clientY, relativeX = endX - startX, relativeY = endY - startY; @@ -2152,20 +2173,19 @@ var resizable = function (modal, stage, image, minWidth, minHeight) { $image.css(imageOpts); self.isDoResize = true; - } - }; - var dragEnd = function (e) { - - $D.off(TOUCH_MOVE_EVENT + EVENT_NS, dragMove) - .off(TOUCH_END_EVENT + EVENT_NS, dragEnd); + var dragEnd = function(e) { + $D.off(TOUCH_MOVE_EVENT + EVENT_NS, dragMove).off( + TOUCH_END_EVENT + EVENT_NS, + dragEnd + ); // Set grab cursor if (PUBLIC_VARS['isResizing']) { setGrabCursor( - { w: imgWidth, h: imgHeight }, + { w: imgWidth, h: imgHeight }, { w: $(stage).width(), h: $(stage).height() }, stage ); @@ -2175,29 +2195,27 @@ var resizable = function (modal, stage, image, minWidth, minHeight) { PUBLIC_VARS['isResizing'] = false; // Remove resizable cursor - $('html,body,.magnify-modal,.magnify-stage,.magnify-button').css('cursor', ''); - - // Update image initial data - var scale = self.getImageScaleToStage( - $(stage).width(), - $(stage).height() + $('html,body,.magnify-modal,.magnify-stage,.magnify-button').css( + 'cursor', + '' ); + // Update image initial data + var scale = self.getImageScaleToStage($(stage).width(), $(stage).height()); + $.extend(self.imageData, { initWidth: self.img.width * scale, initHeight: self.img.height * scale, initLeft: ($(stage).width() - self.img.width * scale) / 2, initTop: ($(stage).height() - self.img.height * scale) / 2 }); - }; - $.each(resizableHandles, function (dir, handle) { - handle.on(TOUCH_START_EVENT + EVENT_NS, function (e) { + $.each(resizableHandles, function(dir, handle) { + handle.on(TOUCH_START_EVENT + EVENT_NS, function(e) { dragStart(dir, e); }); }); - }; // Add to Magnify Prototype diff --git a/dist/jquery.magnify.min.css b/dist/jquery.magnify.min.css index a7b1968..fe315f4 100644 --- a/dist/jquery.magnify.min.css +++ b/dist/jquery.magnify.min.css @@ -6,7 +6,7 @@ * | | | | _ | \_/ | |\ |_| |_| | | | * |__| |__|__| |__|\____/|_|__| \__|_____|__| |__| * - * jquery.magnify - v1.4.3 + * jquery.magnify - v1.4.4 * A jQuery plugin to view images just like in windows * https://github.com/nzbin/magnify#readme * diff --git a/dist/jquery.magnify.min.js b/dist/jquery.magnify.min.js index b1e0068..e98f219 100644 --- a/dist/jquery.magnify.min.js +++ b/dist/jquery.magnify.min.js @@ -6,7 +6,7 @@ * | | | | _ | \_/ | |\ |_| |_| | | | * |__| |__|__| |__|\____/|_|__| \__|_____|__| |__| * - * jquery.magnify - v1.4.3 + * jquery.magnify - v1.4.4 * A jQuery plugin to view images just like in windows * https://github.com/nzbin/magnify#readme * @@ -14,4 +14,4 @@ * Released under the MIT License * */ -!function(t){"function"==typeof define&&define.amd?define(["jquery"],t):"object"==typeof exports?t(require("jquery")):t(jQuery)}(function(C){"use strict";function o(t){return C(t).attr("data-src")?C(t).attr("data-src"):C(t).attr("href")}function S(t,i,e,a){var s=a?t.h:t.w,o=a?t.w:t.h;(o>i.h||s>i.w)&&e.addClass("is-grab"),o<=i.h&&s<=i.w&&e.removeClass("is-grab")}function t(){return!!("ontouchstart"in window||window.DocumentTouch&&document instanceof DocumentTouch)}function D(){return"Microsoft Internet Explorer"==navigator.appName&&0 ',maximize:' ',close:' ',zoomIn:' ',zoomOut:' ',prev:' ',next:' ',fullscreen:' ',actualSize:' ',rotateLeft:' ',rotateRight:' '},i18n:{minimize:"minimize",maximize:"maximize",close:"close",zoomIn:"zoom-in(+)",zoomOut:"zoom-out(-)",prev:"prev(←)",next:"next(→)",fullscreen:"fullscreen",actualSize:"actual-size(Ctrl+Alt+0)",rotateLeft:"rotate-left(Ctrl+,)",rotateRight:"rotate-right(Ctrl+.)"},multiInstances:!0,initEvent:"click",initAnimation:!0,fixedModalPos:!1,zIndex:1090,dragHandle:!1,callbacks:{beforeOpen:C.noop,opened:C.noop,beforeClose:C.noop,closed:C.noop,beforeChange:C.noop,changed:C.noop},progressiveLoading:!0},R={isMoving:!1,isResizing:!1,zIndex:r.zIndex},l=null;a.prototype={init:function(t,i){var e=o(t);this.groupName=null;var a=C(t).attr("data-group"),s=I.find('[data-group="'+a+'"]');void 0!==a?(this.groupName=a,this.getImgGroup(s,e)):this.getImgGroup(l.not("[data-group]"),e),this.open(),this.loadImg(e),i.draggable&&this.draggable(this.$magnify,this.dragHandle,".magnify-button"),i.movable&&this.movable(this.$stage,D()?".magnify-image":this.$image),i.resizable&&this.resizable(this.$magnify,this.$stage,D()?".magnify-image":this.$image,i.modalWidth,i.modalHeight)},_createBtns:function(t,e){var a="";return C.each(t,function(t,i){a+=e[i]}),a},_createTitle:function(){return this.options.title?'
':""},render:function(){var t={minimize:'",maximize:'",close:'",zoomIn:'",zoomOut:'",prev:'",next:'",fullscreen:'",actualSize:'",rotateLeft:'",rotateRight:'"};return'
'+this._createBtns(this.options.headToolbar,t)+"
"+this._createTitle()+'
'+this._createBtns(this.options.footToolbar,t)+"
"},build:function(){var t=this.render(),i=C(t);this.$magnify=i,this.$header=i.find(".magnify-header"),this.$headToolbar=i.find(".magnify-head-toolbar"),this.$footer=i.find(".magnify-footer"),this.$footToolbar=i.find(".magnify-foot-toolbar"),this.$stage=i.find(".magnify-stage"),this.$title=i.find(".magnify-title"),this.$image=i.find(".magnify-image"),this.$close=i.find(".magnify-button-close"),this.$maximize=i.find(".magnify-button-maximize"),this.$minimize=i.find(".magnify-button-minimize"),this.$zoomIn=i.find(".magnify-button-zoom-in"),this.$zoomOut=i.find(".magnify-button-zoom-out"),this.$actualSize=i.find(".magnify-button-actual-size"),this.$fullscreen=i.find(".magnify-button-fullscreen"),this.$rotateLeft=i.find(".magnify-button-rotate-left"),this.$rotateRight=i.find(".magnify-button-rotate-right"),this.$prev=i.find(".magnify-button-prev"),this.$next=i.find(".magnify-button-next"),this.$stage.addClass("stage-ready"),this.$image.addClass("image-ready"),this.$magnify.css("z-index",R.zIndex),this.options.dragHandle&&".magnify-modal"!==this.options.dragHandle?this.dragHandle=this.$magnify.find(this.options.dragHandle):this.dragHandle=this.$magnify},open:function(){if(this.options.multiInstances||C(".magnify-modal").eq(0).remove(),!C(".magnify-modal").length&&this.options.fixedContent&&(C("html").css({overflow:"hidden"}),document.body.scrollHeight>(window.innerHeight||document.documentElement.clientHeight))){var t=function(){var t=document.createElement("div");t.style.cssText="width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px;",document.body.appendChild(t);var i=t.offsetWidth-t.clientWidth;return document.body.removeChild(t),i}();t&&C("html").css({"padding-right":t})}this.build(),this._triggerHook("beforeOpen",this.$el),C("body").append(this.$magnify),this.addEvents(),this.setModalPos(this.$magnify),this._triggerHook("opened",this.$el)},close:function(t){this._triggerHook("beforeClose",this.$el),this.$magnify.remove(),this.isOpened=!1,this.isMaximized=!1,this.isRotated=!1,this.rotateAngle=0;var i=!C(".magnify-modal").length;i&&this.options.fixedContent&&C("html").css({overflow:"","padding-right":""}),i&&this.options.multiInstances&&(R.zIndex=this.options.zIndex),C(".magnify-modal").length||(I.off(n+H),f.off(s+H)),this._triggerHook("closed",this.$el)},setModalPos:function(t){var i=f.width(),e=f.height(),a=I.scrollLeft(),s=I.scrollTop(),o=this.options.modalWidth,n=this.options.modalHeight;this.options.initMaximized?(t.addClass("magnify-maximize"),t.css({width:"100%",height:"100%",left:0,top:0}),this.isOpened=!0,this.isMaximized=!0):t.css({width:o,height:n,left:(i-o)/2+a+"px",top:(e-n)/2+s+"px"})},setModalSize:function(t){var i=this,e=f.width(),a=f.height(),s=I.scrollLeft(),o=I.scrollTop(),n={left:this.$stage.css("left"),right:this.$stage.css("right"),top:this.$stage.css("top"),bottom:this.$stage.css("bottom"),borderLeft:this.$stage.css("border-left-width"),borderRight:this.$stage.css("border-right-width"),borderTop:this.$stage.css("border-top-width"),borderBottom:this.$stage.css("border-bottom-width")},h=t.width+parseFloat(n.left)+parseFloat(n.right)+parseFloat(n.borderLeft)+parseFloat(n.borderRight),r=t.height+parseFloat(n.top)+parseFloat(n.bottom)+parseFloat(n.borderTop)+parseFloat(n.borderBottom),l=(0'),this.$stage.addClass("stage-ready"),this.$image.addClass("image-ready"),this.options.initAnimation&&!this.options.progressiveLoading&&this.$image.hide(),D()?this.$stage.html(''):this.$image.attr("src",t),function(t,i,e){var a=new Image;a.onload=function(){i(a)},a.onerror=function(){e(a)},a.src=t}(t,function(t){a.img=t,a.imageData={originalWidth:t.width,originalHeight:t.height},a.isMaximized||a.isOpened&&a.options.fixedModalPos?a.setImageSize(t):a.setModalSize(t),i&&i.call()},function(){a.$magnify.find(".magnify-loader").remove(),e&&e.call()}),this.options.title&&this.setImgTitle(t)},getImgGroup:function(t,a){var s=this;s.groupData=[],C(t).each(function(t,i){var e=o(this);s.groupData.push({src:e,caption:C(this).attr("data-caption")}),a===e&&(s.groupIndex=t)})},setImgTitle:function(t){var i=this.groupIndex,e=(e=this.groupData[i].caption)||function(t){return t.replace(/^.*?\/*([^/?]*)\.[a-z]+(\?.+|$)/gi,"$1")}(t);this.$title.html(e)},jump:function(t){this._triggerHook("beforeChange",this.groupIndex),this.groupIndex=this.groupIndex+t,this.jumpTo(this.groupIndex)},jumpTo:function(t){var i=this;0<=(t%=this.groupData.length)?t%=this.groupData.length:t<0&&(t=(this.groupData.length+t)%this.groupData.length),this.groupIndex=t,this.loadImg(this.groupData[t].src,function(){i._triggerHook("changed",t)},function(){i._triggerHook("changed",t)})},wheel:function(t){t.preventDefault();var i=1;t.originalEvent.deltaY?i=0this.options.maxRatio||t'),i=C('
'),e=C('
'),a=C('
'),s=C('
'),o=C('
'),n=C('
'),h=C('
'),g={e:t,s:e,se:s,n:a,w:i,nw:h,ne:n,sw:o};C(r).append(t,i,e,a,s,o,n,h);var m=!1,c=0,d=0,y={w:0,h:0,l:0,t:0},_={w:0,h:0,l:0,t:0},b={w:0,h:0,l:0,t:0},x=0,w=0,z=0,$="",M=function(t){(t=t||window.event).preventDefault();var i=D()?C(f).find(p):C(p);if(m&&!l.isMaximized){var e="touchmove"===t.type?t.originalEvent.targetTouches[0].pageX:t.clientX,a="touchmove"===t.type?t.originalEvent.targetTouches[0].pageY:t.clientY,s=e-c,o=a-d,n=function(t,i,e){var a=-i+y.w>u?i+y.l:y.l+y.w-u,s=-e+y.h>v?e+y.t:y.t+y.h-v;return{e:{width:Math.max(i+y.w,u)+"px"},s:{height:Math.max(e+y.h,v)+"px"},se:{width:Math.max(i+y.w,u)+"px",height:Math.max(e+y.h,v)+"px"},w:{width:Math.max(-i+y.w,u)+"px",left:a+"px"},n:{height:Math.max(-e+y.h,v)+"px",top:s+"px"},nw:{width:Math.max(-i+y.w,u)+"px",height:Math.max(-e+y.h,v)+"px",top:s+"px",left:a+"px"},ne:{width:Math.max(i+y.w,u)+"px",height:Math.max(-e+y.h,v)+"px",top:s+"px"},sw:{width:Math.max(-i+y.w,u)+"px",height:Math.max(e+y.h,v)+"px",left:a+"px"}}[t]}($,s,o);C(r).css(n);var h=function(t,i,e){var a=D()?C(f).find(p):C(p),s=D()?a.position().left+x:a.position().left,o=D()?a.position().top-x:a.position().top,n=i+y.w>u?_.w-w+i-x:u-(y.w-_.w)-w-x,h=e+y.h>v?_.h-z+e+x:v-(y.h-_.h)-z+x,r=-i+y.w>u?_.w-w-i-x:u-(y.w-_.w)-w-x,l=-e+y.h>v?_.h-z-e+x:v-(y.h-_.h)-z+x,g=(0this._parameters.duration;if(i&&!this._parameters.animatedGif)clearTimeout(this._timer);else{if(this._canvas||this._vimage||this._img){var e=this._parameters.easing(0,t-this._animateStartTime,this._animateStartAngle,this._parameters.animateTo-this._animateStartAngle,this._parameters.duration);this._rotate(~~(10*e)/10)}this._parameters.step&&this._parameters.step(this._angle);var a=this;this._timer=setTimeout(function(){a._animate.call(a)},10)}this._parameters.callback&&i&&(this._angle=this._parameters.animateTo,this._rotate(this._angle),this._parameters.callback.call(this._rootObj))},_rotate:(cf=Math.PI/180,IE?function(t){this._angle=t,this._container.style.rotation=t%360+"deg",this._vimage.style.top=-(this._rotationCenterY-this._imgHeight/2)+"px",this._vimage.style.left=-(this._rotationCenterX-this._imgWidth/2)+"px",this._container.style.top=this._rotationCenterY-this._imgHeight/2+"px",this._container.style.left=this._rotationCenterX-this._imgWidth/2+"px"}:supportedCSS?function(t){this._angle=t,this._img.style[supportedCSS]="rotate("+t%360+"deg)",this._img.style[supportedCSSOrigin]=this._parameters.center.join(" ")}:function(t){t=(this._angle=t)%360*cf,this._canvas.width=this._width,this._canvas.height=this._height,this._cnv.translate(this._imgWidth*this._aspectW,this._imgHeight*this._aspectH),this._cnv.translate(this._rotationCenterX,this._rotationCenterY),this._cnv.rotate(t),this._cnv.translate(-this._rotationCenterX,-this._rotationCenterY),this._cnv.scale(this._aspectW,this._aspectH),this._cnv.drawImage(this._img,0,0)})},IE&&(Wilq32.PhotoEffect.prototype.createVMLNode=function(){document.createStyleSheet().addRule(".rvml","behavior:url(#default#VML)");try{return document.namespaces.rvml||document.namespaces.add("rvml","urn:schemas-microsoft-com:vml"),function(t){return document.createElement("')}}catch(t){return function(t){return document.createElement("<"+t+' xmlns="urn:schemas-microsoft.com:vml" class="rvml">')}}}())}(jQuery); \ No newline at end of file +!function(t){"function"==typeof define&&define.amd?define(["jquery"],t):"object"==typeof exports?t(require("jquery")):t(jQuery)}(function(C){"use strict";function o(t){return C(t).attr("data-src")?C(t).attr("data-src"):C(t).attr("href")}function S(t,i,e,a){var s=a?t.h:t.w,o=a?t.w:t.h;(o>i.h||s>i.w)&&e.addClass("is-grab"),o<=i.h&&s<=i.w&&e.removeClass("is-grab")}function t(){return!!("ontouchstart"in window||window.DocumentTouch&&document instanceof DocumentTouch)}function D(){return"Microsoft Internet Explorer"==navigator.appName&&0 ',maximize:' ',close:' ',zoomIn:' ',zoomOut:' ',prev:' ',next:' ',fullscreen:' ',actualSize:' ',rotateLeft:' ',rotateRight:' '},i18n:{minimize:"minimize",maximize:"maximize",close:"close",zoomIn:"zoom-in(+)",zoomOut:"zoom-out(-)",prev:"prev(←)",next:"next(→)",fullscreen:"fullscreen",actualSize:"actual-size(Ctrl+Alt+0)",rotateLeft:"rotate-left(Ctrl+,)",rotateRight:"rotate-right(Ctrl+.)"},multiInstances:!0,initEvent:"click",initAnimation:!0,fixedModalPos:!1,zIndex:1090,dragHandle:!1,callbacks:{beforeOpen:C.noop,opened:C.noop,beforeClose:C.noop,closed:C.noop,beforeChange:C.noop,changed:C.noop},progressiveLoading:!0},R={isMoving:!1,isResizing:!1,zIndex:r.zIndex},l=null;a.prototype={init:function(t,i){var e=o(t);this.groupName=null;var a=C(t).attr("data-group"),s=I.find('[data-group="'+a+'"]');void 0!==a?(this.groupName=a,this.getImgGroup(s,e)):this.getImgGroup(l.not("[data-group]"),e),this.open(),this.loadImg(e),i.draggable&&this.draggable(this.$magnify,this.dragHandle,".magnify-button"),i.movable&&this.movable(this.$stage,D()?".magnify-image":this.$image),i.resizable&&this.resizable(this.$magnify,this.$stage,D()?".magnify-image":this.$image,i.modalWidth,i.modalHeight)},_createBtns:function(t,e){var a="";return C.each(t,function(t,i){a+=e[i]}),a},_createTitle:function(){return this.options.title?'
':""},render:function(){var t={minimize:'",maximize:'",close:'",zoomIn:'",zoomOut:'",prev:'",next:'",fullscreen:'",actualSize:'",rotateLeft:'",rotateRight:'"};return'
'+this._createBtns(this.options.headToolbar,t)+"
"+this._createTitle()+'
'+this._createBtns(this.options.footToolbar,t)+"
"},build:function(){var t=this.render(),i=C(t);this.$magnify=i,this.$header=i.find(".magnify-header"),this.$headToolbar=i.find(".magnify-head-toolbar"),this.$footer=i.find(".magnify-footer"),this.$footToolbar=i.find(".magnify-foot-toolbar"),this.$stage=i.find(".magnify-stage"),this.$title=i.find(".magnify-title"),this.$image=i.find(".magnify-image"),this.$close=i.find(".magnify-button-close"),this.$maximize=i.find(".magnify-button-maximize"),this.$minimize=i.find(".magnify-button-minimize"),this.$zoomIn=i.find(".magnify-button-zoom-in"),this.$zoomOut=i.find(".magnify-button-zoom-out"),this.$actualSize=i.find(".magnify-button-actual-size"),this.$fullscreen=i.find(".magnify-button-fullscreen"),this.$rotateLeft=i.find(".magnify-button-rotate-left"),this.$rotateRight=i.find(".magnify-button-rotate-right"),this.$prev=i.find(".magnify-button-prev"),this.$next=i.find(".magnify-button-next"),this.$stage.addClass("stage-ready"),this.$image.addClass("image-ready"),this.$magnify.css("z-index",R.zIndex),this.options.dragHandle&&".magnify-modal"!==this.options.dragHandle?this.dragHandle=this.$magnify.find(this.options.dragHandle):this.dragHandle=this.$magnify},open:function(){if(this.options.multiInstances||C(".magnify-modal").eq(0).remove(),!C(".magnify-modal").length&&this.options.fixedContent&&(C("html").css({overflow:"hidden"}),document.body.scrollHeight>(window.innerHeight||document.documentElement.clientHeight))){var t=function(){var t=document.createElement("div");t.style.cssText="width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px;",document.body.appendChild(t);var i=t.offsetWidth-t.clientWidth;return document.body.removeChild(t),i}();t&&C("html").css({"padding-right":t})}this.build(),this._triggerHook("beforeOpen",this.$el),C("body").append(this.$magnify),this.addEvents(),this.setModalPos(this.$magnify),this._triggerHook("opened",this.$el)},close:function(t){this._triggerHook("beforeClose",this.$el),this.$magnify.remove(),this.isOpened=!1,this.isMaximized=!1,this.isRotated=!1,this.rotateAngle=0;var i=!C(".magnify-modal").length;i&&this.options.fixedContent&&C("html").css({overflow:"","padding-right":""}),i&&this.options.multiInstances&&(R.zIndex=this.options.zIndex),C(".magnify-modal").length||(I.off(n+H),f.off(s+H)),this._triggerHook("closed",this.$el)},setModalPos:function(t){var i=f.width(),e=f.height(),a=I.scrollLeft(),s=I.scrollTop(),o=this.options.modalWidth,n=this.options.modalHeight;this.options.initMaximized?(t.addClass("magnify-maximize"),t.css({width:"100%",height:"100%",left:0,top:0}),this.isOpened=!0,this.isMaximized=!0):t.css({width:o,height:n,left:(i-o)/2+a+"px",top:(e-n)/2+s+"px"})},setModalSize:function(t){var i=this,e=f.width(),a=f.height(),s=I.scrollLeft(),o=I.scrollTop(),n={left:this.$stage.css("left"),right:this.$stage.css("right"),top:this.$stage.css("top"),bottom:this.$stage.css("bottom"),borderLeft:this.$stage.css("border-left-width"),borderRight:this.$stage.css("border-right-width"),borderTop:this.$stage.css("border-top-width"),borderBottom:this.$stage.css("border-bottom-width")},h=t.width+parseFloat(n.left)+parseFloat(n.right)+parseFloat(n.borderLeft)+parseFloat(n.borderRight),r=t.height+parseFloat(n.top)+parseFloat(n.bottom)+parseFloat(n.borderTop)+parseFloat(n.borderBottom),l=(0'),this.$stage.addClass("stage-ready"),this.$image.addClass("image-ready"),this.options.initAnimation&&!this.options.progressiveLoading&&this.$image.hide(),D()?this.$stage.html(''):this.$image.attr("src",t),function(t,i,e){var a=new Image;a.onload=function(){i(a)},a.onerror=function(){e(a)},a.src=t}(t,function(t){a.img=t,a.imageData={originalWidth:t.width,originalHeight:t.height},a.isMaximized||a.isOpened&&a.options.fixedModalPos?a.setImageSize(t):a.setModalSize(t),i&&i.call()},function(){a.$magnify.find(".magnify-loader").remove(),e&&e.call()}),this.options.title&&this.setImgTitle(t)},getImgGroup:function(t,a){var s=this;s.groupData=[],C(t).each(function(t,i){var e=o(this);s.groupData.push({src:e,caption:C(this).attr("data-caption")}),a===e&&(s.groupIndex=t)})},setImgTitle:function(t){var i=this.groupIndex,e=(e=this.groupData[i].caption)||function(t){return t.replace(/^.*?\/*([^/?]*)\.[a-z]+(\?.+|$)/gi,"$1")}(t);this.$title.html(e)},jump:function(t){this._triggerHook("beforeChange",this.groupIndex),this.groupIndex=this.groupIndex+t,this.jumpTo(this.groupIndex)},jumpTo:function(t){var i=this;0<=(t%=this.groupData.length)?t%=this.groupData.length:t<0&&(t=(this.groupData.length+t)%this.groupData.length),this.groupIndex=t,this.loadImg(this.groupData[t].src,function(){i._triggerHook("changed",t)},function(){i._triggerHook("changed",t)})},wheel:function(t){t.preventDefault();var i=1;t.originalEvent.deltaY?i=0this.options.maxRatio||t'),i=C('
'),e=C('
'),a=C('
'),s=C('
'),o=C('
'),n=C('
'),h=C('
'),g={e:t,s:e,se:s,n:a,w:i,nw:h,ne:n,sw:o};C(r).append(t,i,e,a,s,o,n,h);var m=!1,c=0,d=0,y={w:0,h:0,l:0,t:0},_={w:0,h:0,l:0,t:0},b={w:0,h:0,l:0,t:0},x=0,w=0,z=0,$="",M=function(t){(t=t||window.event).preventDefault();var i=D()?C(f).find(p):C(p);if(m&&!l.isMaximized){var e="touchmove"===t.type?t.originalEvent.targetTouches[0].pageX:t.clientX,a="touchmove"===t.type?t.originalEvent.targetTouches[0].pageY:t.clientY,s=e-c,o=a-d,n=function(t,i,e){var a=-i+y.w>u?i+y.l:y.l+y.w-u,s=-e+y.h>v?e+y.t:y.t+y.h-v;return{e:{width:Math.max(i+y.w,u)+"px"},s:{height:Math.max(e+y.h,v)+"px"},se:{width:Math.max(i+y.w,u)+"px",height:Math.max(e+y.h,v)+"px"},w:{width:Math.max(-i+y.w,u)+"px",left:a+"px"},n:{height:Math.max(-e+y.h,v)+"px",top:s+"px"},nw:{width:Math.max(-i+y.w,u)+"px",height:Math.max(-e+y.h,v)+"px",top:s+"px",left:a+"px"},ne:{width:Math.max(i+y.w,u)+"px",height:Math.max(-e+y.h,v)+"px",top:s+"px"},sw:{width:Math.max(-i+y.w,u)+"px",height:Math.max(e+y.h,v)+"px",left:a+"px"}}[t]}($,s,o);C(r).css(n);var h=function(t,i,e){var a=D()?C(f).find(p):C(p),s=D()?a.position().left+x:a.position().left,o=D()?a.position().top-x:a.position().top,n=i+y.w>u?_.w-w+i-x:u-(y.w-_.w)-w-x,h=e+y.h>v?_.h-z+e+x:v-(y.h-_.h)-z+x,r=-i+y.w>u?_.w-w-i-x:u-(y.w-_.w)-w-x,l=-e+y.h>v?_.h-z-e+x:v-(y.h-_.h)-z+x,g=(0this._parameters.duration;if(i&&!this._parameters.animatedGif)clearTimeout(this._timer);else{if(this._canvas||this._vimage||this._img){var e=this._parameters.easing(0,t-this._animateStartTime,this._animateStartAngle,this._parameters.animateTo-this._animateStartAngle,this._parameters.duration);this._rotate(~~(10*e)/10)}this._parameters.step&&this._parameters.step(this._angle);var a=this;this._timer=setTimeout(function(){a._animate.call(a)},10)}this._parameters.callback&&i&&(this._angle=this._parameters.animateTo,this._rotate(this._angle),this._parameters.callback.call(this._rootObj))},_rotate:(cf=Math.PI/180,IE?function(t){this._angle=t,this._container.style.rotation=t%360+"deg",this._vimage.style.top=-(this._rotationCenterY-this._imgHeight/2)+"px",this._vimage.style.left=-(this._rotationCenterX-this._imgWidth/2)+"px",this._container.style.top=this._rotationCenterY-this._imgHeight/2+"px",this._container.style.left=this._rotationCenterX-this._imgWidth/2+"px"}:supportedCSS?function(t){this._angle=t,this._img.style[supportedCSS]="rotate("+t%360+"deg)",this._img.style[supportedCSSOrigin]=this._parameters.center.join(" ")}:function(t){t=(this._angle=t)%360*cf,this._canvas.width=this._width,this._canvas.height=this._height,this._cnv.translate(this._imgWidth*this._aspectW,this._imgHeight*this._aspectH),this._cnv.translate(this._rotationCenterX,this._rotationCenterY),this._cnv.rotate(t),this._cnv.translate(-this._rotationCenterX,-this._rotationCenterY),this._cnv.scale(this._aspectW,this._aspectH),this._cnv.drawImage(this._img,0,0)})},IE&&(Wilq32.PhotoEffect.prototype.createVMLNode=function(){document.createStyleSheet().addRule(".rvml","behavior:url(#default#VML)");try{return document.namespaces.rvml||document.namespaces.add("rvml","urn:schemas-microsoft-com:vml"),function(t){return document.createElement("')}}catch(t){return function(t){return document.createElement("<"+t+' xmlns="urn:schemas-microsoft.com:vml" class="rvml">')}}}())}(jQuery); \ No newline at end of file diff --git a/docs/css/jquery.magnify.css b/docs/css/jquery.magnify.css index 3b411d0..db44fb6 100644 --- a/docs/css/jquery.magnify.css +++ b/docs/css/jquery.magnify.css @@ -6,7 +6,7 @@ * | | | | _ | \_/ | |\ |_| |_| | | | * |__| |__|__| |__|\____/|_|__| \__|_____|__| |__| * - * jquery.magnify - v1.4.3 + * jquery.magnify - v1.4.4 * A jQuery plugin to view images just like in windows * https://github.com/nzbin/magnify#readme * diff --git a/docs/js/jquery.magnify.js b/docs/js/jquery.magnify.js index 52d8943..8ff9885 100644 --- a/docs/js/jquery.magnify.js +++ b/docs/js/jquery.magnify.js @@ -6,7 +6,7 @@ * | | | | _ | \_/ | |\ |_| |_| | | | * |__| |__|__| |__|\____/|_|__| \__|_____|__| |__| * - * jquery.magnify - v1.4.3 + * jquery.magnify - v1.4.4 * A jQuery plugin to view images just like in windows * https://github.com/nzbin/magnify#readme * @@ -35,8 +35,8 @@ */ /** - * [getImgSrc] - * @param {[Object]} el [description] + * Get image src from `data-src` + * @param {Object} el - image */ function getImgSrc(el) { // Get data-src as image src at first @@ -47,53 +47,49 @@ function getImgSrc(el) { } /** - * [throttle] - * @param {Function} fn [description] - * @param {[Number]} delay [description] - * @return {Function} [description] + * Throttle function + * @param {Function} fn - The function will be triggered + * @param {Number} delay - The throttle delay time + * @return {Function} */ function throttle(fn, delay) { - var timer = null; - return function () { + return function() { var context = this, args = arguments; clearTimeout(timer); - timer = setTimeout(function () { + timer = setTimeout(function() { fn.apply(context, args); }, delay); }; - } /** - * [preloadImg] - * @param {[String]} src [image src] - * @param {Function} success [callbacks] - * @param {Function} error [callbacks] + * Preload a image + * @param {String} src - The image src + * @param {Function} success - The callback of success + * @param {Function} error - The callback of error */ function preloadImg(src, success, error) { - var img = new Image(); - img.onload = function () { + img.onload = function() { success(img); }; - img.onerror = function () { + img.onerror = function() { error(img); }; img.src = src; - } /** - * [requestFullscreen] - * @param {[type]} element [description] + * Request fullscreen + * @param {type} element */ function requestFullscreen(element) { if (element.requestFullscreen) { @@ -108,7 +104,7 @@ function requestFullscreen(element) { } /** - * [exitFullscreen] + * Exit fullscreen */ function exitFullscreen() { if (document.exitFullscreen) { @@ -121,49 +117,50 @@ function exitFullscreen() { } /** - * [getImageNameFromUrl] - * @param {[String]} url [description] - * @return {[String]} [description] + * Get the image name from its url + * @param {String} url- The image src + * @return {String} */ function getImageNameFromUrl(url) { - var reg = /^.*?\/*([^/?]*)\.[a-z]+(\?.+|$)/ig, + var reg = /^.*?\/*([^/?]*)\.[a-z]+(\?.+|$)/gi, txt = url.replace(reg, '$1'); return txt; } /** - * [hasScrollbar] - * @return {[Boolean]} [description] + * Check if the document has a scrollbar + * @return {Boolean} */ function hasScrollbar() { - return document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight); + return ( + document.body.scrollHeight > + (window.innerHeight || document.documentElement.clientHeight) + ); } /** - * [getScrollbarWidth] - * @return {[Number]} [description] + * Get the scrollbar width + * @return {Number} */ function getScrollbarWidth() { - var scrollDiv = document.createElement('div'); - scrollDiv.style.cssText = 'width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px;'; + scrollDiv.style.cssText = + 'width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px;'; document.body.appendChild(scrollDiv); var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth; document.body.removeChild(scrollDiv); return scrollbarWidth; - } /** - * [setGrabCursor] - * @param {[Object]} imageData [description] - * @param {[Object]} stageData [description] - * @param {[Object]} stage [description] - * @param {[Boolean]} isRotate [description] + * Set grab cursor when move image + * @param {Object} imageData - The image data + * @param {Object} stageData - The stage data + * @param {Object} stage - The stage element + * @param {Boolean} isRotate - The image rotated flag */ function setGrabCursor(imageData, stageData, stage, isRotated) { - var imageWidth = !isRotated ? imageData.w : imageData.h, imageHeight = !isRotated ? imageData.h : imageData.w; @@ -176,29 +173,35 @@ function setGrabCursor(imageData, stageData, stage, isRotated) { } /** - * [supportTouch] - * @return {[Boolean]} [description] + * Check if browser support touch event + * @return {Boolean} */ function supportTouch() { - return !!(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch); + return !!( + 'ontouchstart' in window || + (window.DocumentTouch && document instanceof DocumentTouch) + ); } /** - * [isIE8] - * @return {[Boolean]} [description] + * Check if the browser is IE8 + * @return {Boolean} */ function isIE8() { - return (navigator.appName == 'Microsoft Internet Explorer' && navigator.appVersion.indexOf('MSIE 8.0') > 0) || - (navigator.appName == 'Microsoft Internet Explorer' && navigator.appVersion.indexOf('MSIE 7.0') > 0); + return ( + (navigator.appName == 'Microsoft Internet Explorer' && + navigator.appVersion.indexOf('MSIE 8.0') > 0) || + (navigator.appName == 'Microsoft Internet Explorer' && + navigator.appVersion.indexOf('MSIE 7.0') > 0) + ); } /** - * Private Static Constants + * Private static constants */ var $W = $(window), $D = $(document), - CLICK_EVENT = 'click', RESIZE_EVENT = 'resize', KEYDOWN_EVENT = 'keydown', @@ -206,11 +209,9 @@ var $W = $(window), TOUCH_START_EVENT = supportTouch() ? 'touchstart' : 'mousedown', TOUCH_MOVE_EVENT = supportTouch() ? 'touchmove' : 'mousemove', TOUCH_END_EVENT = supportTouch() ? 'touchend' : 'mouseup', - NS = 'magnify', EVENT_NS = '.' + NS, - - // plugin default options + // Plugin default options DEFAULTS = { // Enable modal to drag draggable: true, @@ -255,10 +256,7 @@ var $W = $(window), maxRatio: 16, // Toolbar options in header - headToolbar: [ - 'maximize', - 'close' - ], + headToolbar: ['maximize', 'close'], // Toolbar options in footer footToolbar: [ @@ -273,20 +271,23 @@ var $W = $(window), // Customize button icon icons: { - minimize: '\ + minimize: + '\ \ ', - maximize: '\ + maximize: + '\ \ ', - close: '\ + close: + '\ \ ', - zoomIn: '\ + zoomIn: + '\ \ ', - zoomOut: '\ + zoomOut: + '\ \ ', - prev: '\ + prev: + '\ \ ', - next: '\ + next: + '\ \ ', - fullscreen: '\ + fullscreen: + '\ \ ', - actualSize: '\ + actualSize: + '\ \ ', - rotateLeft: '\ + rotateLeft: + '\ \ ', - rotateRight: '\ + rotateRight: + '\ ' : ''); + _createTitle: function() { + return this.options.title ? '
' : ''; }, - render: function () { - + render: function() { var btnsTpl = { - minimize: '', - maximize: '', - close: '', - zoomIn: '', - zoomOut: '', - prev: '', - next: '', - fullscreen: '', - actualSize: '', - rotateLeft: '', - rotateRight: '' }; - // magnify base HTML + // Magnify base HTML var magnifyHTML = '
\
\
' + - this._createBtns(this.options.headToolbar, btnsTpl) + '\ + this._createBtns(this.options.headToolbar, btnsTpl) + + '\
' + - this._createTitle() + '\ + this._createTitle() + + '\
\
\ \
\
\
' + - this._createBtns(this.options.footToolbar, btnsTpl) + '\ + this._createBtns(this.options.footToolbar, btnsTpl) + + '\
\
\
'; return magnifyHTML; - }, - build: function () { - + build: function() { // Create magnify HTML string var magnifyHTML = this.render(); @@ -688,23 +708,25 @@ Magnify.prototype = { this.$magnify.css('z-index', PUBLIC_VARS['zIndex']); // Set handle element of draggable - if (!this.options.dragHandle || this.options.dragHandle === '.magnify-modal') { + if ( + !this.options.dragHandle || + this.options.dragHandle === '.magnify-modal' + ) { this.dragHandle = this.$magnify; } else { this.dragHandle = this.$magnify.find(this.options.dragHandle); } - }, - open: function () { - + open: function() { if (!this.options.multiInstances) { - $('.magnify-modal').eq(0).remove(); + $('.magnify-modal') + .eq(0) + .remove(); } // Fixed modal position bug if (!$('.magnify-modal').length && this.options.fixedContent) { - - $('html').css({ 'overflow': 'hidden' }); + $('html').css({ overflow: 'hidden' }); if (hasScrollbar()) { var scrollbarWidth = getScrollbarWidth(); @@ -712,7 +734,6 @@ Magnify.prototype = { $('html').css({ 'padding-right': scrollbarWidth }); } } - } this.build(); @@ -727,10 +748,8 @@ Magnify.prototype = { this.setModalPos(this.$magnify); this._triggerHook('opened', this.$el); - }, - close: function (el) { - + close: function(el) { this._triggerHook('beforeClose', this.$el); // Remove instance @@ -745,7 +764,7 @@ Magnify.prototype = { // Fixed modal position bug if (zeroModal && this.options.fixedContent) { - $('html').css({ 'overflow': '', 'padding-right': '' }); + $('html').css({ overflow: '', 'padding-right': '' }); } // Reset zIndex after close @@ -760,10 +779,8 @@ Magnify.prototype = { } this._triggerHook('closed', this.$el); - }, - setModalPos: function (modal) { - + setModalPos: function(modal) { var winWidth = $W.width(), winHeight = $W.height(), scrollLeft = $D.scrollLeft(), @@ -774,7 +791,6 @@ Magnify.prototype = { // Set modal maximized when init if (this.options.initMaximized) { - modal.addClass('magnify-maximize'); modal.css({ @@ -786,9 +802,7 @@ Magnify.prototype = { this.isOpened = true; this.isMaximized = true; - } else { - // Make the modal in windows center modal.css({ width: modalWidth, @@ -796,19 +810,16 @@ Magnify.prototype = { left: (winWidth - modalWidth) / 2 + scrollLeft + 'px', top: (winHeight - modalHeight) / 2 + scrollTop + 'px' }); - } - }, - setModalSize: function (img) { - + setModalSize: function(img) { var self = this, winWidth = $W.width(), winHeight = $W.height(), scrollLeft = $D.scrollLeft(), scrollTop = $D.scrollTop(); - // stage css value + // Stage css value var stageCSS = { left: this.$stage.css('left'), right: this.$stage.css('right'), @@ -821,19 +832,22 @@ Magnify.prototype = { }; // Modal size should calc with stage css value - var modalWidth = img.width + - parseFloat(stageCSS.left) + - parseFloat(stageCSS.right) + - parseFloat(stageCSS.borderLeft) + - parseFloat(stageCSS.borderRight), - modalHeight = img.height + + var modalWidth = + img.width + + parseFloat(stageCSS.left) + + parseFloat(stageCSS.right) + + parseFloat(stageCSS.borderLeft) + + parseFloat(stageCSS.borderRight), + modalHeight = + img.height + parseFloat(stageCSS.top) + parseFloat(stageCSS.bottom) + parseFloat(stageCSS.borderTop) + parseFloat(stageCSS.borderBottom); - var gapThreshold = (this.options.gapThreshold > 0 ? this.options.gapThreshold : 0) + 1, - // modal scale to window + var gapThreshold = + (this.options.gapThreshold > 0 ? this.options.gapThreshold : 0) + 1, + // Modal scale to window scale = Math.min( winWidth / (modalWidth * gapThreshold), winHeight / (modalHeight * gapThreshold), @@ -843,8 +857,12 @@ Magnify.prototype = { var minWidth = Math.max(modalWidth * scale, this.options.modalWidth), minHeight = Math.max(modalHeight * scale, this.options.modalHeight); - minWidth = this.options.fixedModalSize ? this.options.modalWidth : Math.round(minWidth); - minHeight = this.options.fixedModalSize ? this.options.modalHeight : Math.round(minHeight); + minWidth = this.options.fixedModalSize + ? this.options.modalWidth + : Math.round(minWidth); + minHeight = this.options.fixedModalSize + ? this.options.modalHeight + : Math.round(minHeight); var modalCSSObj = { width: minWidth + 'px', @@ -855,35 +873,36 @@ Magnify.prototype = { // Add modal init animation if (this.options.initAnimation) { - - this.$magnify.animate(modalCSSObj, function () { + this.$magnify.animate(modalCSSObj, function() { self.setImageSize(img); }); - } else { - this.$magnify.css(modalCSSObj); this.setImageSize(img); - } this.isOpened = true; - }, getImageScaleToStage: function(stageWidth, stageHeight) { - var scale = 1; if (!this.isRotated) { - scale = Math.min(stageWidth / this.img.width, stageHeight / this.img.height, 1); + scale = Math.min( + stageWidth / this.img.width, + stageHeight / this.img.height, + 1 + ); } else { - scale = Math.min(stageWidth / this.img.height, stageHeight / this.img.width, 1); + scale = Math.min( + stageWidth / this.img.height, + stageHeight / this.img.width, + 1 + ); } return scale; }, - setImageSize: function (img) { - + setImageSize: function(img) { var $image = isIE8() ? this.$stage.find('.magnify-image') : this.$image; var stageData = { @@ -891,10 +910,7 @@ Magnify.prototype = { h: this.$stage.height() }; - var scale = this.getImageScaleToStage( - stageData.w, - stageData.h - ); + var scale = this.getImageScaleToStage(stageData.w, stageData.h); $image.css({ width: Math.ceil(img.width * scale) + 'px', @@ -931,14 +947,14 @@ Magnify.prototype = { ); // Just execute before image loaded - if(!this.imgLoaded){ + if (!this.imgLoaded) { // loader end this.$magnify.find('.magnify-loader').remove(); // Remove class must when image setting end this.$stage.removeClass('stage-ready'); this.$image.removeClass('image-ready'); - + // Add image init animation if (this.options.initAnimation && !this.options.progressiveLoading) { $image.fadeIn(); @@ -946,10 +962,8 @@ Magnify.prototype = { this.imgLoaded = true; } - }, - loadImg: function (imgSrc, fn, err) { - + loadImg: function(imgSrc, fn, err) { var self = this; // Reset image @@ -959,7 +973,7 @@ Magnify.prototype = { this.imgLoaded = false; - // loader start + // Loader start this.$magnify.append('
'); // Add class before image loaded @@ -971,55 +985,59 @@ Magnify.prototype = { } if (isIE8()) { - this.$stage.html(''); + this.$stage.html( + '' + ); } else { this.$image.attr('src', imgSrc); } - preloadImg(imgSrc, function (img) { - // Store HTMLImageElement - self.img = img; + preloadImg( + imgSrc, + function(img) { + // Store HTMLImageElement + self.img = img; - // Store original data - self.imageData = { - originalWidth: img.width, - originalHeight: img.height - }; - - if (self.isMaximized || (self.isOpened && self.options.fixedModalPos)) { - self.setImageSize(img); - } else { - self.setModalSize(img); - } + // Store original data + self.imageData = { + originalWidth: img.width, + originalHeight: img.height + }; - // callback of image loaded successfully - if(fn){ - fn.call(); - } + if (self.isMaximized || (self.isOpened && self.options.fixedModalPos)) { + self.setImageSize(img); + } else { + self.setModalSize(img); + } - }, function () { - // loader end - self.$magnify.find('.magnify-loader').remove(); + // Callback of image loaded successfully + if (fn) { + fn.call(); + } + }, + function() { + // Loader end + self.$magnify.find('.magnify-loader').remove(); - // callback of image loading failed - if(err){ - err.call(); + // Callback of image loading failed + if (err) { + err.call(); + } } - }); + ); if (this.options.title) { this.setImgTitle(imgSrc); } - }, - getImgGroup: function (list, imgSrc) { - + getImgGroup: function(list, imgSrc) { var self = this; self.groupData = []; - $(list).each(function (index, item) { - + $(list).each(function(index, item) { var src = getImgSrc(this); self.groupData.push({ @@ -1030,30 +1048,23 @@ Magnify.prototype = { if (imgSrc === src) { self.groupIndex = index; } - }); - }, - setImgTitle: function (url) { - + setImgTitle: function(url) { var index = this.groupIndex, caption = this.groupData[index].caption, caption = caption ? caption : getImageNameFromUrl(url); this.$title.html(caption); - }, - jump: function (step) { - + jump: function(step) { this._triggerHook('beforeChange', this.groupIndex); this.groupIndex = this.groupIndex + step; this.jumpTo(this.groupIndex); - }, - jumpTo: function (index) { - + jumpTo: function(index) { var self = this; index = index % this.groupData.length; @@ -1066,15 +1077,17 @@ Magnify.prototype = { this.groupIndex = index; - this.loadImg(this.groupData[index].src, function () { - self._triggerHook('changed', index); - }, function () { - self._triggerHook('changed', index); - }); - + this.loadImg( + this.groupData[index].src, + function() { + self._triggerHook('changed', index); + }, + function() { + self._triggerHook('changed', index); + } + ); }, - wheel: function (e) { - + wheel: function(e) { e.preventDefault(); var delta = 1; @@ -1087,27 +1100,25 @@ Magnify.prototype = { delta = e.originalEvent.detail > 0 ? 1 : -1; } - // ratio threshold + // Ratio threshold var ratio = -delta * this.options.ratioThreshold; - // mouse point position relative to stage + // Mouse point position relative to stage var pointer = { x: e.originalEvent.clientX - this.$stage.offset().left + $D.scrollLeft(), y: e.originalEvent.clientY - this.$stage.offset().top + $D.scrollTop() }; this.zoom(ratio, pointer, e); - }, - zoom: function (ratio, origin, e) { - + zoom: function(ratio, origin, e) { this.$image = isIE8() ? this.$stage.find('.magnify-image') : this.$image; - // zoom out ratio & zoom in ratio - ratio = ratio < 0 ? (1 / (1 - ratio)) : (1 + ratio); + // Zoom out ratio & Zoom in ratio + ratio = ratio < 0 ? 1 / (1 - ratio) : 1 + ratio; - // image ratio - ratio = this.$image.width() / this.imageData.originalWidth * ratio; + // Image ratio + ratio = (this.$image.width() / this.imageData.originalWidth) * ratio; // Fixed digital error // if (ratio > 0.95 && ratio < 1.05) { @@ -1119,10 +1130,8 @@ Magnify.prototype = { } this.zoomTo(ratio, origin, e); - }, - zoomTo: function (ratio, origin, e) { - + zoomTo: function(ratio, origin, e) { var $image = isIE8() ? this.$stage.find('.magnify-image') : this.$image, $stage = this.$stage, imgData = { @@ -1132,7 +1141,7 @@ Magnify.prototype = { y: this.imageData.top }; - // image stage position + // Image stage position // We will use it to calc the relative position of image var stageData = { w: $stage.width(), @@ -1144,8 +1153,8 @@ Magnify.prototype = { var newWidth = this.imageData.originalWidth * ratio, newHeight = this.imageData.originalHeight * ratio, // Think about it for a while - newLeft = origin.x - (origin.x - imgData.x) / imgData.w * newWidth, - newTop = origin.y - (origin.y - imgData.y) / imgData.h * newHeight; + newLeft = origin.x - ((origin.x - imgData.x) / imgData.w) * newWidth, + newTop = origin.y - ((origin.y - imgData.y) / imgData.h) * newHeight; // δ is the difference between image new width and new height var δ = !this.isRotated ? 0 : (newWidth - newHeight) / 2, @@ -1155,31 +1164,27 @@ Magnify.prototype = { var offsetX = stageData.w - newWidth, offsetY = stageData.h - newHeight; - // zoom out & zoom in condition + // Zoom out & Zoom in condition // It's important and it takes me a lot of time to get it // The conditions with image rotate 90 degree drive me crazy alomst! if (imgNewHeight <= stageData.h) { newTop = (stageData.h - newHeight) / 2; } else { - newTop = newTop > δ - ? δ - : (newTop > (offsetY - δ) - ? newTop - : (offsetY - δ)); + newTop = newTop > δ ? δ : newTop > offsetY - δ ? newTop : offsetY - δ; } if (imgNewWidth <= stageData.w) { newLeft = (stageData.w - newWidth) / 2; } else { - newLeft = newLeft > -δ - ? -δ - : (newLeft > (offsetX + δ) - ? newLeft - : (offsetX + δ)); + newLeft = + newLeft > -δ ? -δ : newLeft > offsetX + δ ? newLeft : offsetX + δ; } - // if the image scale get to the critical point - if (Math.abs(this.imageData.initWidth - newWidth) < this.imageData.initWidth * 0.05) { + // If the image scale get to the critical point + if ( + Math.abs(this.imageData.initWidth - newWidth) < + this.imageData.initWidth * 0.05 + ) { this.setImageSize(this.img); } else { $image.css({ @@ -1211,10 +1216,8 @@ Magnify.prototype = { left: newLeft, top: newTop }); - }, - rotate: function (angle) { - + rotate: function(angle) { this.rotateAngle = this.rotateAngle + angle; if ((this.rotateAngle / 90) % 2 === 0) { @@ -1224,14 +1227,12 @@ Magnify.prototype = { } this.rotateTo(this.rotateAngle); - }, - rotateTo: function (angle) { - + rotateTo: function(angle) { var self = this, $image = isIE8() ? this.$stage.find('.magnify-image') : this.$image; - // depend on jQueryRotate.js + // Depend on jQueryRotate.js $image.rotate({ angle: angle }); @@ -1243,16 +1244,12 @@ Magnify.prototype = { // Remove grab cursor when rotate this.$stage.removeClass('is-grab'); - }, - resize: function () { - + resize: function() { var self = this; - var resizeHandler = throttle(function () { - + var resizeHandler = throttle(function() { if (self.isOpened) { - if (self.isMaximized) { self.setImageSize({ width: self.imageData.originalWidth, @@ -1264,16 +1261,12 @@ Magnify.prototype = { height: self.imageData.originalHeight }); } - } - }, 500); return resizeHandler; - }, - maximize: function () { - + maximize: function() { var self = this; if (!this.isMaximized) { @@ -1295,9 +1288,7 @@ Magnify.prototype = { }); this.isMaximized = true; - } else { - this.$magnify.removeClass('magnify-maximize'); this.$magnify.css({ @@ -1322,15 +1313,11 @@ Magnify.prototype = { width: this.imageData.originalWidth, height: this.imageData.originalHeight }); - }, - fullscreen: function () { - + fullscreen: function() { requestFullscreen(this.$magnify[0]); - }, - keydown: function (e) { - + keydown: function(e) { var self = this; if (!this.options.keyboard) { @@ -1342,140 +1329,163 @@ Magnify.prototype = { altKey = e.altKey || e.metaKey; switch (keyCode) { - // ← - case 37: - self.jump(-1); - break; + // ← + case 37: + self.jump(-1); + break; // → - case 39: - self.jump(1); - break; + case 39: + self.jump(1); + break; // + - case 187: - self.zoom( - self.options.ratioThreshold * 3, - { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, - e - ); - break; + case 187: + self.zoom( + self.options.ratioThreshold * 3, + { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, + e + ); + break; // - - case 189: - self.zoom( - -self.options.ratioThreshold * 3, - { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, - e - ); - break; + case 189: + self.zoom( + -self.options.ratioThreshold * 3, + { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, + e + ); + break; // + Firefox - case 61: - self.zoom( - self.options.ratioThreshold * 3, - { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, - e - ); - break; + case 61: + self.zoom( + self.options.ratioThreshold * 3, + { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, + e + ); + break; // - Firefox - case 173: - self.zoom( - -self.options.ratioThreshold * 3, - { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, - e - ); - break; - // ctrl + alt + 0 - case 48: - if (ctrlKey && altKey) { - self.zoomTo( - 1, + case 173: + self.zoom( + -self.options.ratioThreshold * 3, { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, e ); - } - break; - // ctrl + , - case 188: - if (ctrlKey) { - self.rotate(-90); - } - break; - // ctrl + . - case 190: - if (ctrlKey) { - self.rotate(90); - } - break; - default: + break; + // Ctrl + Alt + 0 + case 48: + if (ctrlKey && altKey) { + self.zoomTo( + 1, + { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, + e + ); + } + break; + // Ctrl + , + case 188: + if (ctrlKey) { + self.rotate(-90); + } + break; + // Ctrl + . + case 190: + if (ctrlKey) { + self.rotate(90); + } + break; + // Q + case 81: + this.close(); + break; + default: } - }, - addEvents: function () { - + addEvents: function() { var self = this; - this.$close.off(CLICK_EVENT + EVENT_NS).on(CLICK_EVENT + EVENT_NS, function (e) { - self.close(); - }); + this.$close + .off(CLICK_EVENT + EVENT_NS) + .on(CLICK_EVENT + EVENT_NS, function(e) { + self.close(); + }); - this.$stage.off(WHEEL_EVENT + EVENT_NS).on(WHEEL_EVENT + EVENT_NS, function (e) { - self.wheel(e); - }); + this.$stage + .off(WHEEL_EVENT + EVENT_NS) + .on(WHEEL_EVENT + EVENT_NS, function(e) { + self.wheel(e); + }); - this.$zoomIn.off(CLICK_EVENT + EVENT_NS).on(CLICK_EVENT + EVENT_NS, function (e) { - self.zoom( - self.options.ratioThreshold * 3, - { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, - e - ); - }); + this.$zoomIn + .off(CLICK_EVENT + EVENT_NS) + .on(CLICK_EVENT + EVENT_NS, function(e) { + self.zoom( + self.options.ratioThreshold * 3, + { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, + e + ); + }); - this.$zoomOut.off(CLICK_EVENT + EVENT_NS).on(CLICK_EVENT + EVENT_NS, function (e) { - self.zoom( - -self.options.ratioThreshold * 3, - { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, - e - ); - }); + this.$zoomOut + .off(CLICK_EVENT + EVENT_NS) + .on(CLICK_EVENT + EVENT_NS, function(e) { + self.zoom( + -self.options.ratioThreshold * 3, + { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, + e + ); + }); - this.$actualSize.off(CLICK_EVENT + EVENT_NS).on(CLICK_EVENT + EVENT_NS, function (e) { - self.zoomTo( - 1, - { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, - e - ); - }); + this.$actualSize + .off(CLICK_EVENT + EVENT_NS) + .on(CLICK_EVENT + EVENT_NS, function(e) { + self.zoomTo( + 1, + { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, + e + ); + }); - this.$prev.off(CLICK_EVENT + EVENT_NS).on(CLICK_EVENT + EVENT_NS, function () { - self.jump(-1); - }); + this.$prev + .off(CLICK_EVENT + EVENT_NS) + .on(CLICK_EVENT + EVENT_NS, function() { + self.jump(-1); + }); - this.$fullscreen.off(CLICK_EVENT + EVENT_NS).on(CLICK_EVENT + EVENT_NS, function () { - self.fullscreen(); - }); + this.$fullscreen + .off(CLICK_EVENT + EVENT_NS) + .on(CLICK_EVENT + EVENT_NS, function() { + self.fullscreen(); + }); - this.$next.off(CLICK_EVENT + EVENT_NS).on(CLICK_EVENT + EVENT_NS, function () { - self.jump(1); - }); + this.$next + .off(CLICK_EVENT + EVENT_NS) + .on(CLICK_EVENT + EVENT_NS, function() { + self.jump(1); + }); - this.$rotateLeft.off(CLICK_EVENT + EVENT_NS).on(CLICK_EVENT + EVENT_NS, function () { - self.rotate(-90); - }); + this.$rotateLeft + .off(CLICK_EVENT + EVENT_NS) + .on(CLICK_EVENT + EVENT_NS, function() { + self.rotate(-90); + }); - this.$rotateRight.off(CLICK_EVENT + EVENT_NS).on(CLICK_EVENT + EVENT_NS, function () { - self.rotate(90); - }); + this.$rotateRight + .off(CLICK_EVENT + EVENT_NS) + .on(CLICK_EVENT + EVENT_NS, function() { + self.rotate(90); + }); - this.$maximize.off(CLICK_EVENT + EVENT_NS).on(CLICK_EVENT + EVENT_NS, function () { - self.maximize(); - }); + this.$maximize + .off(CLICK_EVENT + EVENT_NS) + .on(CLICK_EVENT + EVENT_NS, function() { + self.maximize(); + }); - $D.off(KEYDOWN_EVENT + EVENT_NS).on(KEYDOWN_EVENT + EVENT_NS, function (e) { + $D.off(KEYDOWN_EVENT + EVENT_NS).on(KEYDOWN_EVENT + EVENT_NS, function(e) { self.keydown(e); }); $W.on(RESIZE_EVENT + EVENT_NS, self.resize()); - }, - _triggerHook: function (e, data) { + _triggerHook: function(e, data) { if (this.options.callbacks[e]) { this.options.callbacks[e].apply(this, $.isArray(data) ? data : [data]); } @@ -1486,13 +1496,12 @@ Magnify.prototype = { * jQuery plugin */ -$.fn.magnify = function (options) { - +$.fn.magnify = function(options) { jqEl = $(this); // Convert a numeric string into a number for (var key in options) { - if (typeof (options[key]) === 'string' && !isNaN(options[key])) { + if (typeof options[key] === 'string' && !isNaN(options[key])) { options[key] = parseFloat(options[key]); } } @@ -1504,82 +1513,64 @@ $.fn.magnify = function (options) { PUBLIC_VARS['zIndex'] = opts.zIndex; if (typeof options === 'string') { - // $(this).data('magnify')[options](); - } else { - if (opts.initEvent === 'dblclick') { - - jqEl.off('click' + EVENT_NS).on('click' + EVENT_NS, function (e) { - + jqEl.off('click' + EVENT_NS).on('click' + EVENT_NS, function(e) { e.preventDefault(); // This will stop triggering data-api event e.stopPropagation(); - }); - } - jqEl.off(opts.initEvent + EVENT_NS).on(opts.initEvent + EVENT_NS, function (e) { - - e.preventDefault(); - // This will stop triggering data-api event - e.stopPropagation(); - - $(this).data('magnify', new Magnify(this, options)); - - }); + jqEl + .off(opts.initEvent + EVENT_NS) + .on(opts.initEvent + EVENT_NS, function(e) { + e.preventDefault(); + // This will stop triggering data-api event + e.stopPropagation(); + $(this).data('magnify', new Magnify(this, options)); + }); } return jqEl; - }; /** * MAGNIFY DATA-API */ -$D.on(CLICK_EVENT + EVENT_NS, '[data-magnify]', function (e) { - +$D.on(CLICK_EVENT + EVENT_NS, '[data-magnify]', function(e) { jqEl = $('[data-magnify]'); e.preventDefault(); $(this).data('magnify', new Magnify(this, DEFAULTS)); - }); /** - * [draggable] - * @param {[Object]} modal [the modal element] - * @param {[Object]} dragHandle [the handle element when dragging] - * @param {[Object]} dragCancel [the cancel element when dragging] + * Draggable + * @param {Object} modal - The modal element + * @param {Object} dragHandle - The handle element when dragging + * @param {Object} dragCancel - The cancel element when dragging */ -var draggable = function (modal, dragHandle, dragCancel) { - +var draggable = function(modal, dragHandle, dragCancel) { var self = this; var isDragging = false; var startX = 0, startY = 0, - left = 0, top = 0; - var dragStart = function (e) { - + var dragStart = function(e) { var e = e || window.event; // Must be removed // e.preventDefault(); - if (self.options.multiInstances) { - modal.css('z-index', ++PUBLIC_VARS['zIndex']); - } - // Get clicked button var elemCancel = $(e.target).closest(dragCancel); // Stop modal moving when click buttons @@ -1587,38 +1578,49 @@ var draggable = function (modal, dragHandle, dragCancel) { return true; } + if (self.options.multiInstances) { + modal.css('z-index', ++PUBLIC_VARS['zIndex']); + } + isDragging = true; - startX = e.type === 'touchstart' - ? e.originalEvent.targetTouches[0].pageX - : e.clientX; - startY = e.type === 'touchstart' - ? e.originalEvent.targetTouches[0].pageY - : e.clientY; + startX = + e.type === 'touchstart' + ? e.originalEvent.targetTouches[0].pageX + : e.clientX; + startY = + e.type === 'touchstart' + ? e.originalEvent.targetTouches[0].pageY + : e.clientY; left = $(modal).offset().left; top = $(modal).offset().top; - $D.on(TOUCH_MOVE_EVENT + EVENT_NS, dragMove) - .on(TOUCH_END_EVENT + EVENT_NS, dragEnd); - + $D.on(TOUCH_MOVE_EVENT + EVENT_NS, dragMove).on( + TOUCH_END_EVENT + EVENT_NS, + dragEnd + ); }; - var dragMove = function (e) { - + var dragMove = function(e) { var e = e || window.event; e.preventDefault(); - if (isDragging && !PUBLIC_VARS['isMoving'] && !PUBLIC_VARS['isResizing'] && !self.isMaximized) { - - var endX = e.type === 'touchmove' - ? e.originalEvent.targetTouches[0].pageX - : e.clientX, - endY = e.type === 'touchmove' - ? e.originalEvent.targetTouches[0].pageY - : e.clientY, - + if ( + isDragging && + !PUBLIC_VARS['isMoving'] && + !PUBLIC_VARS['isResizing'] && + !self.isMaximized + ) { + var endX = + e.type === 'touchmove' + ? e.originalEvent.targetTouches[0].pageX + : e.clientX, + endY = + e.type === 'touchmove' + ? e.originalEvent.targetTouches[0].pageY + : e.clientY, relativeX = endX - startX, relativeY = endY - startY; @@ -1626,22 +1628,19 @@ var draggable = function (modal, dragHandle, dragCancel) { left: relativeX + left + 'px', top: relativeY + top + 'px' }); - } - }; - var dragEnd = function (e) { - - $D.off(TOUCH_MOVE_EVENT + EVENT_NS, dragMove) - .off(TOUCH_END_EVENT + EVENT_NS, dragEnd); + var dragEnd = function(e) { + $D.off(TOUCH_MOVE_EVENT + EVENT_NS, dragMove).off( + TOUCH_END_EVENT + EVENT_NS, + dragEnd + ); isDragging = false; - }; $(dragHandle).on(TOUCH_START_EVENT + EVENT_NS, dragStart); - }; // Add to Magnify Prototype @@ -1650,37 +1649,32 @@ $.extend(Magnify.prototype, { }); /** - * -------------------------------------- - * 1.no movable - * 2.vertical movable - * 3.horizontal movable - * 4.vertical & horizontal movable - * -------------------------------------- + * -------------------------------------------------------------------------- + * 1. No movable + * 2. Vertical movable + * 3. Horizontal movable + * 4. Vertical & Horizontal movable + * -------------------------------------------------------------------------- * - * [image movable] - * @param {[Object]} stage [the stage element] - * @param {[Object]} image [the image element] + * Image movable + * @param {Object} stage - The stage element + * @param {Object} image - The image element */ -var movable = function (stage, image) { - +var movable = function(stage, image) { var self = this; var isDragging = false; var startX = 0, startY = 0, - left = 0, top = 0, - widthDiff = 0, heightDiff = 0, - δ = 0; - var dragStart = function (e) { - + var dragStart = function(e) { var e = e || window.event; e.preventDefault(); @@ -1692,27 +1686,29 @@ var movable = function (stage, image) { stageWidth = $(stage).width(), stageHeight = $(stage).height(); - startX = e.type === 'touchstart' - ? e.originalEvent.targetTouches[0].pageX - : e.clientX; - startY = e.type === 'touchstart' - ? e.originalEvent.targetTouches[0].pageY - : e.clientY; + startX = + e.type === 'touchstart' + ? e.originalEvent.targetTouches[0].pageX + : e.clientX; + startY = + e.type === 'touchstart' + ? e.originalEvent.targetTouches[0].pageY + : e.clientY; // δ is the difference between image width and height δ = !self.isRotated ? 0 : (imageWidth - imageHeight) / 2; // Width or height difference can be use to limit image right or top position widthDiff = !self.isRotated - ? (imageWidth - stageWidth) - : (imageHeight - stageWidth); + ? imageWidth - stageWidth + : imageHeight - stageWidth; heightDiff = !self.isRotated - ? (imageHeight - stageHeight) - : (imageWidth - stageHeight); + ? imageHeight - stageHeight + : imageWidth - stageHeight; // Modal can be dragging if image is smaller to stage - isDragging = (widthDiff > 0 || heightDiff > 0) ? true : false; - PUBLIC_VARS['isMoving'] = (widthDiff > 0 || heightDiff > 0) ? true : false; + isDragging = widthDiff > 0 || heightDiff > 0 ? true : false; + PUBLIC_VARS['isMoving'] = widthDiff > 0 || heightDiff > 0 ? true : false; // Reclac the element position when mousedown // Fixed the issue of stage with a border @@ -1721,16 +1717,18 @@ var movable = function (stage, image) { // Add grabbing cursor if (stage.hasClass('is-grab')) { - $('html,body,.magnify-modal,.magnify-stage,.magnify-button,.magnify-resizable-handle').addClass('is-grabbing'); + $( + 'html,body,.magnify-modal,.magnify-stage,.magnify-button,.magnify-resizable-handle' + ).addClass('is-grabbing'); } - $D.on(TOUCH_MOVE_EVENT + EVENT_NS, dragMove) - .on(TOUCH_END_EVENT + EVENT_NS, dragEnd); - + $D.on(TOUCH_MOVE_EVENT + EVENT_NS, dragMove).on( + TOUCH_END_EVENT + EVENT_NS, + dragEnd + ); }; - var dragMove = function (e) { - + var dragMove = function(e) { var e = e || window.event; e.preventDefault(); @@ -1738,41 +1736,36 @@ var movable = function (stage, image) { var $image = isIE8() ? $(stage).find(image) : $(image); if (isDragging) { - - var endX = e.type === 'touchmove' - ? e.originalEvent.targetTouches[0].pageX - : e.clientX, - endY = e.type === 'touchmove' - ? e.originalEvent.targetTouches[0].pageY - : e.clientY, - + var endX = + e.type === 'touchmove' + ? e.originalEvent.targetTouches[0].pageX + : e.clientX, + endY = + e.type === 'touchmove' + ? e.originalEvent.targetTouches[0].pageY + : e.clientY, relativeX = endX - startX, relativeY = endY - startY, - newLeft = relativeX + left, newTop = relativeY + top; - // vertical limit + // Vertical limit if (heightDiff > 0) { - - if ((relativeY + top) > δ) { + if (relativeY + top > δ) { newTop = δ; - } else if ((relativeY + top) < -heightDiff + δ) { + } else if (relativeY + top < -heightDiff + δ) { newTop = -heightDiff + δ; } - } else { newTop = top; } - // horizontal limit + // Horizontal limit if (widthDiff > 0) { - - if ((relativeX + left) > -δ) { + if (relativeX + left > -δ) { newLeft = -δ; - } else if ((relativeX + left) < -widthDiff - δ) { + } else if (relativeX + left < -widthDiff - δ) { newLeft = -widthDiff - δ; } - } else { newLeft = left; } @@ -1787,26 +1780,25 @@ var movable = function (stage, image) { left: newLeft, top: newTop }); - } - }; - var dragEnd = function (e) { - - $D.off(TOUCH_MOVE_EVENT + EVENT_NS, dragMove) - .off(TOUCH_END_EVENT + EVENT_NS, dragEnd); + var dragEnd = function(e) { + $D.off(TOUCH_MOVE_EVENT + EVENT_NS, dragMove).off( + TOUCH_END_EVENT + EVENT_NS, + dragEnd + ); isDragging = false; PUBLIC_VARS['isMoving'] = false; // Remove grabbing cursor - $('html,body,.magnify-modal,.magnify-stage,.magnify-button,.magnify-resizable-handle').removeClass('is-grabbing'); - + $( + 'html,body,.magnify-modal,.magnify-stage,.magnify-button,.magnify-resizable-handle' + ).removeClass('is-grabbing'); }; $(stage).on(TOUCH_START_EVENT + EVENT_NS, dragStart); - }; // Add to Magnify Prototype @@ -1815,54 +1807,74 @@ $.extend(Magnify.prototype, { }); /** - * ------------------------------ - * 1.modal resizable - * 2.keep image in stage center - * 3.other image limitations - * ------------------------------ + * -------------------------------------------------------------------------- + * 1. Modal resizable + * 2. Keep image in stage center + * 3. Other image limitations + * -------------------------------------------------------------------------- * - * [resizable] - * @param {[Object]} modal [the modal element] - * @param {[Object]} stage [the stage element] - * @param {[Object]} image [the image element] - * @param {[Number]} minWidth [the option of modalWidth] - * @param {[Number]} minHeight [the option of modalHeight] + * Resizable + * @param {Object} modal - The modal element + * @param {Object} stage - The stage element + * @param {Object} image - The image element + * @param {Number} minWidth - The option of modalWidth + * @param {Number} minHeight - The option of modalHeight */ -var resizable = function (modal, stage, image, minWidth, minHeight) { - +var resizable = function(modal, stage, image, minWidth, minHeight) { var self = this; - var resizableHandleE = $('
'), - resizableHandleW = $('
'), - resizableHandleS = $('
'), - resizableHandleN = $('
'), - resizableHandleSE = $('
'), - resizableHandleSW = $('
'), - resizableHandleNE = $('
'), - resizableHandleNW = $('
'); + var resizableHandleE = $( + '
' + ), + resizableHandleW = $( + '
' + ), + resizableHandleS = $( + '
' + ), + resizableHandleN = $( + '
' + ), + resizableHandleSE = $( + '
' + ), + resizableHandleSW = $( + '
' + ), + resizableHandleNE = $( + '
' + ), + resizableHandleNW = $( + '
' + ); var resizableHandles = { - 'e': resizableHandleE, - 's': resizableHandleS, - 'se': resizableHandleSE, - 'n': resizableHandleN, - 'w': resizableHandleW, - 'nw': resizableHandleNW, - 'ne': resizableHandleNE, - 'sw': resizableHandleSW + e: resizableHandleE, + s: resizableHandleS, + se: resizableHandleSE, + n: resizableHandleN, + w: resizableHandleW, + nw: resizableHandleNW, + ne: resizableHandleNE, + sw: resizableHandleSW }; $(modal).append( - resizableHandleE, resizableHandleW, resizableHandleS, resizableHandleN, - resizableHandleSE, resizableHandleSW, resizableHandleNE, resizableHandleNW + resizableHandleE, + resizableHandleW, + resizableHandleS, + resizableHandleN, + resizableHandleSE, + resizableHandleSW, + resizableHandleNE, + resizableHandleNW ); var isDragging = false; var startX = 0, startY = 0, - modalData = { w: 0, h: 0, @@ -1881,58 +1893,57 @@ var resizable = function (modal, stage, image, minWidth, minHeight) { l: 0, t: 0 }, - // δ is the difference between image width and height δ = 0, imgWidth = 0, imgHeight = 0, - direction = ''; - // modal CSS options - var getModalOpts = function (dir, offsetX, offsetY) { - + // Modal CSS options + var getModalOpts = function(dir, offsetX, offsetY) { // Modal should not move when its width to the minwidth - var modalLeft = (-offsetX + modalData.w) > minWidth - ? (offsetX + modalData.l) - : (modalData.l + modalData.w - minWidth), - modalTop = (-offsetY + modalData.h) > minHeight - ? (offsetY + modalData.t) - : (modalData.t + modalData.h - minHeight); + var modalLeft = + -offsetX + modalData.w > minWidth + ? offsetX + modalData.l + : modalData.l + modalData.w - minWidth, + modalTop = + -offsetY + modalData.h > minHeight + ? offsetY + modalData.t + : modalData.t + modalData.h - minHeight; var opts = { - 'e': { - width: Math.max((offsetX + modalData.w), minWidth) + 'px' + e: { + width: Math.max(offsetX + modalData.w, minWidth) + 'px' }, - 's': { - height: Math.max((offsetY + modalData.h), minHeight) + 'px' + s: { + height: Math.max(offsetY + modalData.h, minHeight) + 'px' }, - 'se': { - width: Math.max((offsetX + modalData.w), minWidth) + 'px', - height: Math.max((offsetY + modalData.h), minHeight) + 'px' + se: { + width: Math.max(offsetX + modalData.w, minWidth) + 'px', + height: Math.max(offsetY + modalData.h, minHeight) + 'px' }, - 'w': { - width: Math.max((-offsetX + modalData.w), minWidth) + 'px', + w: { + width: Math.max(-offsetX + modalData.w, minWidth) + 'px', left: modalLeft + 'px' }, - 'n': { - height: Math.max((-offsetY + modalData.h), minHeight) + 'px', + n: { + height: Math.max(-offsetY + modalData.h, minHeight) + 'px', top: modalTop + 'px' }, - 'nw': { - width: Math.max((-offsetX + modalData.w), minWidth) + 'px', - height: Math.max((-offsetY + modalData.h), minHeight) + 'px', + nw: { + width: Math.max(-offsetX + modalData.w, minWidth) + 'px', + height: Math.max(-offsetY + modalData.h, minHeight) + 'px', top: modalTop + 'px', left: modalLeft + 'px' }, - 'ne': { - width: Math.max((offsetX + modalData.w), minWidth) + 'px', - height: Math.max((-offsetY + modalData.h), minHeight) + 'px', + ne: { + width: Math.max(offsetX + modalData.w, minWidth) + 'px', + height: Math.max(-offsetY + modalData.h, minHeight) + 'px', top: modalTop + 'px' }, - 'sw': { - width: Math.max((-offsetX + modalData.w), minWidth) + 'px', - height: Math.max((offsetY + modalData.h), minHeight) + 'px', + sw: { + width: Math.max(-offsetX + modalData.w, minWidth) + 'px', + height: Math.max(offsetY + modalData.h, minHeight) + 'px', left: modalLeft + 'px' } }; @@ -1940,136 +1951,141 @@ var resizable = function (modal, stage, image, minWidth, minHeight) { return opts[dir]; }; - // image CSS options - var getImageOpts = function (dir, offsetX, offsetY) { - + // Image CSS options + var getImageOpts = function(dir, offsetX, offsetY) { var $image = isIE8() ? $(stage).find(image) : $(image); // In modern browser, the width and height of image won't change after rotated. // But its position top and left will get values from the image rotated. // In IE8 browser, due to the type of rotating, all the value will be the same. - var imgPosLeft = isIE8() ? ($image.position().left + δ) : $image.position().left, - imgPosTop = isIE8() ? ($image.position().top - δ) : $image.position().top; + var imgPosLeft = isIE8() + ? $image.position().left + δ + : $image.position().left, + imgPosTop = isIE8() ? $image.position().top - δ : $image.position().top; // Image should not move when modal width to the min width // The minwidth is modal width, so we should clac the stage minwidth - var widthDiff = (offsetX + modalData.w) > minWidth - ? (stageData.w - imgWidth + offsetX - δ) - : (minWidth - (modalData.w - stageData.w) - imgWidth - δ), - heightDiff = (offsetY + modalData.h) > minHeight - ? (stageData.h - imgHeight + offsetY + δ) - : (minHeight - (modalData.h - stageData.h) - imgHeight + δ), - - widthDiff2 = (-offsetX + modalData.w) > minWidth - ? (stageData.w - imgWidth - offsetX - δ) - : (minWidth - (modalData.w - stageData.w) - imgWidth - δ), - heightDiff2 = (-offsetY + modalData.h) > minHeight - ? (stageData.h - imgHeight - offsetY + δ) - : (minHeight - (modalData.h - stageData.h) - imgHeight + δ); + var widthDiff = + offsetX + modalData.w > minWidth + ? stageData.w - imgWidth + offsetX - δ + : minWidth - (modalData.w - stageData.w) - imgWidth - δ, + heightDiff = + offsetY + modalData.h > minHeight + ? stageData.h - imgHeight + offsetY + δ + : minHeight - (modalData.h - stageData.h) - imgHeight + δ, + widthDiff2 = + -offsetX + modalData.w > minWidth + ? stageData.w - imgWidth - offsetX - δ + : minWidth - (modalData.w - stageData.w) - imgWidth - δ, + heightDiff2 = + -offsetY + modalData.h > minHeight + ? stageData.h - imgHeight - offsetY + δ + : minHeight - (modalData.h - stageData.h) - imgHeight + δ; // Get image position in dragging - var imgLeft = (widthDiff > 0 - ? imgPosLeft - : (imgPosLeft < 0 - ? imgPosLeft - : 0)) - δ, - imgTop = (heightDiff > 0 - ? imgPosTop - : (imgPosTop < 0 - ? imgPosTop - : 0)) + δ, - - imgLeft2 = (widthDiff2 > 0 - ? imgPosLeft - : (imgPosLeft < 0 - ? imgPosLeft - : 0)) - δ, - imgTop2 = (heightDiff2 > 0 - ? imgPosTop - : (imgPosTop < 0 - ? imgPosTop - : 0)) + δ; + var imgLeft = + (widthDiff > 0 ? imgPosLeft : imgPosLeft < 0 ? imgPosLeft : 0) - δ, + imgTop = (heightDiff > 0 ? imgPosTop : imgPosTop < 0 ? imgPosTop : 0) + δ, + imgLeft2 = + (widthDiff2 > 0 ? imgPosLeft : imgPosLeft < 0 ? imgPosLeft : 0) - δ, + imgTop2 = + (heightDiff2 > 0 ? imgPosTop : imgPosTop < 0 ? imgPosTop : 0) + δ; var opts = { - 'e': { - left: widthDiff >= -δ - ? ((widthDiff - δ) / 2 + 'px') - : (imgLeft > widthDiff - ? (imgLeft + 'px') - : (widthDiff + 'px')) + e: { + left: + widthDiff >= -δ + ? (widthDiff - δ) / 2 + 'px' + : imgLeft > widthDiff + ? imgLeft + 'px' + : widthDiff + 'px' }, - 's': { - top: heightDiff >= δ - ? ((heightDiff + δ) / 2 + 'px') - : (imgTop > heightDiff - ? (imgTop + 'px') - : (heightDiff + 'px')) + s: { + top: + heightDiff >= δ + ? (heightDiff + δ) / 2 + 'px' + : imgTop > heightDiff + ? imgTop + 'px' + : heightDiff + 'px' }, - 'se': { - top: heightDiff >= δ - ? ((heightDiff + δ) / 2 + 'px') - : (imgTop > heightDiff ? (imgTop + 'px') : (heightDiff + 'px')), - left: widthDiff >= -δ - ? ((widthDiff - δ) / 2 + 'px') - : (imgLeft > widthDiff ? (imgLeft + 'px') : (widthDiff + 'px')) + se: { + top: + heightDiff >= δ + ? (heightDiff + δ) / 2 + 'px' + : imgTop > heightDiff + ? imgTop + 'px' + : heightDiff + 'px', + left: + widthDiff >= -δ + ? (widthDiff - δ) / 2 + 'px' + : imgLeft > widthDiff + ? imgLeft + 'px' + : widthDiff + 'px' }, - 'w': { - left: widthDiff2 >= -δ - ? ((widthDiff2 - δ) / 2 + 'px') - : (imgLeft2 > widthDiff2 - ? (imgLeft2 + 'px') - : (widthDiff2 + 'px')) + w: { + left: + widthDiff2 >= -δ + ? (widthDiff2 - δ) / 2 + 'px' + : imgLeft2 > widthDiff2 + ? imgLeft2 + 'px' + : widthDiff2 + 'px' }, - 'n': { - top: heightDiff2 >= δ - ? ((heightDiff2 + δ) / 2 + 'px') - : (imgTop2 > heightDiff2 - ? (imgTop2 + 'px') - : (heightDiff2 + 'px')) + n: { + top: + heightDiff2 >= δ + ? (heightDiff2 + δ) / 2 + 'px' + : imgTop2 > heightDiff2 + ? imgTop2 + 'px' + : heightDiff2 + 'px' }, - 'nw': { - top: heightDiff2 >= δ - ? ((heightDiff2 + δ) / 2 + 'px') - : (imgTop2 > heightDiff2 - ? (imgTop2 + 'px') - : (heightDiff2 + 'px')), - left: widthDiff2 >= -δ - ? ((widthDiff2 - δ) / 2 + 'px') - : (imgLeft2 > widthDiff2 - ? (imgLeft2 + 'px') - : (widthDiff2 + 'px')) + nw: { + top: + heightDiff2 >= δ + ? (heightDiff2 + δ) / 2 + 'px' + : imgTop2 > heightDiff2 + ? imgTop2 + 'px' + : heightDiff2 + 'px', + left: + widthDiff2 >= -δ + ? (widthDiff2 - δ) / 2 + 'px' + : imgLeft2 > widthDiff2 + ? imgLeft2 + 'px' + : widthDiff2 + 'px' }, - 'ne': { - top: heightDiff2 >= δ - ? ((heightDiff2 + δ) / 2 + 'px') - : (imgTop2 > heightDiff2 - ? (imgTop2 + 'px') - : (heightDiff2 + 'px')), - left: widthDiff >= -δ - ? ((widthDiff - δ) / 2 + 'px') - : (imgLeft > widthDiff - ? (imgLeft + 'px') - : (widthDiff + 'px')) + ne: { + top: + heightDiff2 >= δ + ? (heightDiff2 + δ) / 2 + 'px' + : imgTop2 > heightDiff2 + ? imgTop2 + 'px' + : heightDiff2 + 'px', + left: + widthDiff >= -δ + ? (widthDiff - δ) / 2 + 'px' + : imgLeft > widthDiff + ? imgLeft + 'px' + : widthDiff + 'px' }, - 'sw': { - top: heightDiff >= δ - ? ((heightDiff + δ) / 2 + 'px') - : (imgTop > heightDiff - ? (imgTop + 'px') - : (heightDiff + 'px')), - left: widthDiff2 >= -δ - ? ((widthDiff2 - δ) / 2 + 'px') - : (imgLeft2 > widthDiff2 - ? (imgLeft2 + 'px') - : (widthDiff2 + 'px')) + sw: { + top: + heightDiff >= δ + ? (heightDiff + δ) / 2 + 'px' + : imgTop > heightDiff + ? imgTop + 'px' + : heightDiff + 'px', + left: + widthDiff2 >= -δ + ? (widthDiff2 - δ) / 2 + 'px' + : imgLeft2 > widthDiff2 + ? imgLeft2 + 'px' + : widthDiff2 + 'px' } }; return opts[dir]; }; - var dragStart = function (dir, e) { - + var dragStart = function(dir, e) { var e = e || window.event; e.preventDefault(); @@ -2079,12 +2095,14 @@ var resizable = function (modal, stage, image, minWidth, minHeight) { isDragging = true; PUBLIC_VARS['isResizing'] = true; - startX = e.type === 'touchstart' - ? e.originalEvent.targetTouches[0].pageX - : e.clientX; - startY = e.type === 'touchstart' - ? e.originalEvent.targetTouches[0].pageY - : e.clientY; + startX = + e.type === 'touchstart' + ? e.originalEvent.targetTouches[0].pageX + : e.clientX; + startY = + e.type === 'touchstart' + ? e.originalEvent.targetTouches[0].pageY + : e.clientY; // Reclac the modal data when mousedown modalData = { @@ -2116,15 +2134,18 @@ var resizable = function (modal, stage, image, minWidth, minHeight) { direction = dir; // Add resizable cursor - $('html,body,.magnify-modal,.magnify-stage,.magnify-button').css('cursor', dir + '-resize'); - - $D.on(TOUCH_MOVE_EVENT + EVENT_NS, dragMove) - .on(TOUCH_END_EVENT + EVENT_NS, dragEnd); + $('html,body,.magnify-modal,.magnify-stage,.magnify-button').css( + 'cursor', + dir + '-resize' + ); + $D.on(TOUCH_MOVE_EVENT + EVENT_NS, dragMove).on( + TOUCH_END_EVENT + EVENT_NS, + dragEnd + ); }; - var dragMove = function (e) { - + var dragMove = function(e) { var e = e || window.event; e.preventDefault(); @@ -2132,14 +2153,14 @@ var resizable = function (modal, stage, image, minWidth, minHeight) { var $image = isIE8() ? $(stage).find(image) : $(image); if (isDragging && !self.isMaximized) { - - var endX = e.type === 'touchmove' - ? e.originalEvent.targetTouches[0].pageX - : e.clientX, - endY = e.type === 'touchmove' - ? e.originalEvent.targetTouches[0].pageY - : e.clientY, - + var endX = + e.type === 'touchmove' + ? e.originalEvent.targetTouches[0].pageX + : e.clientX, + endY = + e.type === 'touchmove' + ? e.originalEvent.targetTouches[0].pageY + : e.clientY, relativeX = endX - startX, relativeY = endY - startY; @@ -2152,20 +2173,19 @@ var resizable = function (modal, stage, image, minWidth, minHeight) { $image.css(imageOpts); self.isDoResize = true; - } - }; - var dragEnd = function (e) { - - $D.off(TOUCH_MOVE_EVENT + EVENT_NS, dragMove) - .off(TOUCH_END_EVENT + EVENT_NS, dragEnd); + var dragEnd = function(e) { + $D.off(TOUCH_MOVE_EVENT + EVENT_NS, dragMove).off( + TOUCH_END_EVENT + EVENT_NS, + dragEnd + ); // Set grab cursor if (PUBLIC_VARS['isResizing']) { setGrabCursor( - { w: imgWidth, h: imgHeight }, + { w: imgWidth, h: imgHeight }, { w: $(stage).width(), h: $(stage).height() }, stage ); @@ -2175,29 +2195,27 @@ var resizable = function (modal, stage, image, minWidth, minHeight) { PUBLIC_VARS['isResizing'] = false; // Remove resizable cursor - $('html,body,.magnify-modal,.magnify-stage,.magnify-button').css('cursor', ''); - - // Update image initial data - var scale = self.getImageScaleToStage( - $(stage).width(), - $(stage).height() + $('html,body,.magnify-modal,.magnify-stage,.magnify-button').css( + 'cursor', + '' ); + // Update image initial data + var scale = self.getImageScaleToStage($(stage).width(), $(stage).height()); + $.extend(self.imageData, { initWidth: self.img.width * scale, initHeight: self.img.height * scale, initLeft: ($(stage).width() - self.img.width * scale) / 2, initTop: ($(stage).height() - self.img.height * scale) / 2 }); - }; - $.each(resizableHandles, function (dir, handle) { - handle.on(TOUCH_START_EVENT + EVENT_NS, function (e) { + $.each(resizableHandles, function(dir, handle) { + handle.on(TOUCH_START_EVENT + EVENT_NS, function(e) { dragStart(dir, e); }); }); - }; // Add to Magnify Prototype diff --git a/package.json b/package.json index 3ea4e80..7e56464 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "jquery.magnify", - "version": "1.4.3", + "version": "1.4.4", "description": "A jQuery plugin to view images just like in Windows", "main": "dist/jquery.magnify.js", "files": [ diff --git a/src/js/intro.js b/src/js/intro.js index a070341..535d8ec 100644 --- a/src/js/intro.js +++ b/src/js/intro.js @@ -6,7 +6,7 @@ * | | | | _ | \_/ | |\ |_| |_| | | | * |__| |__|__| |__|\____/|_|__| \__|_____|__| |__| * - * jquery.magnify - v1.4.3 + * jquery.magnify - v1.4.4 * A jQuery plugin to view images just like in windows * https://github.com/nzbin/magnify#readme * diff --git a/src/sass/magnify.scss b/src/sass/magnify.scss index cb853d7..dfb6698 100644 --- a/src/sass/magnify.scss +++ b/src/sass/magnify.scss @@ -6,7 +6,7 @@ * | | | | _ | \_/ | |\ |_| |_| | | | * |__| |__|__| |__|\____/|_|__| \__|_____|__| |__| * - * jquery.magnify - v1.4.3 + * jquery.magnify - v1.4.4 * A jQuery plugin to view images just like in windows * https://github.com/nzbin/magnify#readme *