New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
jquery.magnify
Advanced tools
jquery.magnify - npm Package Compare versions
Comparing version 1.1.0 to 1.2.0
@@ -9,3 +9,3 @@ /*! | ||
| * | ||
| * jquery.magnify - v1.1.0 | ||
| * jquery.magnify - v1.2.0 | ||
| * A jQuery plugin to view images just like in windows | ||
@@ -67,3 +67,3 @@ * https://github.com/nzbin/magnify#readme | ||
| }, delay); | ||
| }; | ||
| } | ||
@@ -84,7 +84,7 @@ } | ||
| success(img); | ||
| }; | ||
| } | ||
| img.onerror = function () { | ||
| error(img); | ||
| }; | ||
| } | ||
@@ -200,2 +200,11 @@ img.src = src; | ||
| /** | ||
| * [isIE8] | ||
| * @return {[Boolean]} [description] | ||
| */ | ||
| 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) | ||
| } | ||
| /** | ||
| * Private Static Constants | ||
@@ -344,3 +353,3 @@ */ | ||
| // modal z-index setting | ||
| zIndex: DEFAULTS.zIndex, | ||
| zIndex: DEFAULTS.zIndex | ||
| }; | ||
@@ -355,3 +364,3 @@ | ||
| */ | ||
| var Magnify = function(el, options) { | ||
| var Magnify = function (el, options) { | ||
@@ -397,3 +406,3 @@ var self = this; | ||
| }; | ||
| } | ||
@@ -405,3 +414,3 @@ /** | ||
| init: function(el, opts) { | ||
| init: function (el, opts) { | ||
@@ -437,14 +446,14 @@ // Get image src | ||
| if (opts.movable) { | ||
| this.movable(this.$stage, this.$image); | ||
| this.movable(this.$stage, isIE8() ? '.magnify-image' : this.$image); | ||
| } | ||
| if (opts.resizable) { | ||
| this.resizable(this.$magnify, this.$stage, this.$image, opts.modalWidth, opts.modalHeight); | ||
| this.resizable(this.$magnify, this.$stage, isIE8() ? '.magnify-image' : this.$image, opts.modalWidth, opts.modalHeight); | ||
| } | ||
| }, | ||
| _creatBtns: function(toolbar, btns) { | ||
| _creatBtns: function (toolbar, btns) { | ||
| var btnsStr = ''; | ||
| $.each(toolbar, function(index, item) { | ||
| $.each(toolbar, function (index, item) { | ||
| btnsStr += btns[item]; | ||
@@ -456,6 +465,6 @@ }); | ||
| }, | ||
| _creatTitle: function() { | ||
| _creatTitle: function () { | ||
| return (this.options.title ? '<div class="magnify-title"></div>' : ''); | ||
| }, | ||
| creatDOM: function() { | ||
| creatDOM: function () { | ||
@@ -501,6 +510,3 @@ var btnsTpl = { | ||
| <div class="magnify-header">\ | ||
| <div class="magnify-toolbar magnify-head-toolbar">' + | ||
| this._creatBtns(this.options.headToolbar, btnsTpl) + '\ | ||
| </div>' + | ||
| this._creatTitle() + '\ | ||
| <div class="magnify-toolbar magnify-head-toolbar">' + this._creatBtns(this.options.headToolbar, btnsTpl) + '</div>' + this._creatTitle() + '\ | ||
| </div>\ | ||
@@ -511,5 +517,3 @@ <div class="magnify-stage">\ | ||
| <div class="magnify-footer">\ | ||
| <div class="magnify-toolbar magnify-foot-toolbar">' + | ||
| this._creatBtns(this.options.footToolbar, btnsTpl) + '\ | ||
| </div>\ | ||
| <div class="magnify-toolbar magnify-foot-toolbar">' + this._creatBtns(this.options.footToolbar, btnsTpl) + '</div>\ | ||
| </div>\ | ||
@@ -521,3 +525,3 @@ </div>'; | ||
| }, | ||
| build: function() { | ||
| build: function () { | ||
@@ -566,3 +570,3 @@ // Create magnify HTML string | ||
| }, | ||
| open: function() { | ||
| open: function () { | ||
@@ -601,3 +605,3 @@ if (!this.options.multiInstances) { | ||
| }, | ||
| close: function(el) { | ||
| close: function (el) { | ||
@@ -635,3 +639,3 @@ this._triggerHook('beforeClose', this.$el); | ||
| }, | ||
| setModalPos: function(modal) { | ||
| setModalPos: function (modal) { | ||
@@ -674,3 +678,3 @@ var winWidth = $W.width(), | ||
| }, | ||
| setModalSize: function(img) { | ||
| setModalSize: function (img) { | ||
@@ -699,3 +703,3 @@ var self = this, | ||
| modalHeight = img.height + getNumFromCSSValue(stageCSS.top) + getNumFromCSSValue(stageCSS.bottom) + | ||
| getNumFromCSSValue(stageCSS.borderTop) + getNumFromCSSValue(stageCSS.borderBottom); | ||
| getNumFromCSSValue(stageCSS.borderTop) + getNumFromCSSValue(stageCSS.borderBottom); | ||
@@ -722,3 +726,3 @@ var gapThreshold = (this.options.gapThreshold > 0 ? this.options.gapThreshold : 0) + 1, | ||
| this.$magnify.animate(modalCSSObj, function() { | ||
| this.$magnify.animate(modalCSSObj, function () { | ||
| self.setImageSize(img); | ||
@@ -737,4 +741,6 @@ }); | ||
| }, | ||
| setImageSize: function(img) { | ||
| setImageSize: function (img) { | ||
| var $image = isIE8() ? this.$stage.find('.magnify-image') : this.$image; | ||
| var stageData = { | ||
@@ -754,3 +760,3 @@ w: this.$stage.width(), | ||
| this.$image.css({ | ||
| $image.css({ | ||
| width: Math.ceil(img.width * scale) + 'px', | ||
@@ -762,2 +768,9 @@ height: Math.ceil(img.height * scale) + 'px', | ||
| if (isIE8()) { | ||
| $image.find('group').css({ | ||
| width: Math.floor(img.width * scale) + 'px', | ||
| height: Math.floor(img.height * scale) + 'px' | ||
| }); | ||
| } | ||
| // Store image initial data | ||
@@ -772,3 +785,3 @@ $.extend(this.imageData, { | ||
| // Set grab cursor | ||
| setGrabCursor({ w: this.$image.width(), h: this.$image.height() }, { w: this.$stage.width(), h: this.$stage.height() }, | ||
| setGrabCursor({ w: $image.width(), h: $image.height() }, { w: this.$stage.width(), h: this.$stage.height() }, | ||
| this.$stage, | ||
@@ -783,7 +796,7 @@ this.isRotated | ||
| if (this.options.initAnimation) { | ||
| this.$image.fadeIn(); | ||
| $image.fadeIn(); | ||
| } | ||
| }, | ||
| loadImg: function(imgSrc) { | ||
| loadImg: function (imgSrc) { | ||
@@ -801,5 +814,9 @@ var self = this; | ||
| this.$image.attr('src', imgSrc); | ||
| if (isIE8()) { | ||
| this.$stage.html('<img class="magnify-image" id="magnify-image" src="' + imgSrc + '" alt="" />') | ||
| } else { | ||
| this.$image.attr('src', imgSrc); | ||
| } | ||
| preloadImg(imgSrc, function(img) { | ||
| preloadImg(imgSrc, function (img) { | ||
@@ -810,3 +827,3 @@ // Store original data | ||
| originalHeight: img.height | ||
| }; | ||
| } | ||
@@ -822,3 +839,3 @@ if (self.isMaximized || (self.isOpened && self.options.fixedModalPos)) { | ||
| }, function() { | ||
| }, function () { | ||
| // loader end | ||
@@ -833,3 +850,3 @@ self.$magnify.find('.magnify-loader').remove(); | ||
| }, | ||
| getImgGroup: function(list, imgSrc) { | ||
| getImgGroup: function (list, imgSrc) { | ||
@@ -840,3 +857,3 @@ var self = this; | ||
| $(list).each(function(index, item) { | ||
| $(list).each(function (index, item) { | ||
@@ -857,3 +874,3 @@ var src = getImgSrc(this); | ||
| }, | ||
| setImgTitle: function(url) { | ||
| setImgTitle: function (url) { | ||
@@ -867,3 +884,3 @@ var index = this.groupIndex, | ||
| }, | ||
| jump: function(index) { | ||
| jump: function (index) { | ||
@@ -875,3 +892,3 @@ this.groupIndex = this.groupIndex + index; | ||
| }, | ||
| jumpTo: function(index) { | ||
| jumpTo: function (index) { | ||
@@ -895,3 +912,3 @@ index = index % this.groupData.length; | ||
| }, | ||
| wheel: function(e) { | ||
| wheel: function (e) { | ||
@@ -922,4 +939,6 @@ e.preventDefault(); | ||
| }, | ||
| zoom: function(ratio, origin, e) { | ||
| zoom: function (ratio, origin, e) { | ||
| this.$image = isIE8() ? this.$stage.find('.magnify-image') : this.$image; | ||
| // zoom out & zoom in | ||
@@ -942,5 +961,5 @@ ratio = ratio < 0 ? (1 / (1 - ratio)) : (1 + ratio); | ||
| }, | ||
| zoomTo: function(ratio, origin, e) { | ||
| zoomTo: function (ratio, origin, e) { | ||
| var $image = this.$image, | ||
| var $image = isIE8() ? this.$stage.find('.magnify-image') : this.$image, | ||
| $stage = this.$stage, | ||
@@ -961,3 +980,3 @@ imgData = { | ||
| y: $stage.offset().top | ||
| }; | ||
| } | ||
@@ -1000,2 +1019,9 @@ var newWidth = this.imageData.originalWidth * ratio, | ||
| if (isIE8()) { | ||
| $image.find('group').css({ | ||
| width: Math.ceil(newWidth) + 'px', | ||
| height: Math.ceil(newHeight) + 'px' | ||
| }); | ||
| } | ||
| // Update image initial data | ||
@@ -1015,3 +1041,3 @@ $.extend(this.imageData, { | ||
| }, | ||
| rotate: function(angle) { | ||
| rotate: function (angle) { | ||
@@ -1029,8 +1055,10 @@ this.rotateAngle = this.rotateAngle + angle; | ||
| }, | ||
| rotateTo: function(angle) { | ||
| rotateTo: function (angle) { | ||
| var self = this; | ||
| var self = this, | ||
| $image = isIE8() ? this.$stage.find('.magnify-image') : this.$image; | ||
| this.$image.css({ | ||
| transform: 'rotate(' + angle + 'deg)' | ||
| // depend on jQueryRotate.js | ||
| $image.rotate({ | ||
| angle: angle | ||
| }); | ||
@@ -1044,7 +1072,7 @@ | ||
| }, | ||
| resize: function() { | ||
| resize: function () { | ||
| var self = this; | ||
| var resizeHandler = throttle(function() { | ||
| var resizeHandler = throttle(function () { | ||
@@ -1066,3 +1094,3 @@ if (self.isOpened) { | ||
| }, | ||
| maximize: function() { | ||
| maximize: function () { | ||
@@ -1108,3 +1136,3 @@ var self = this; | ||
| }, | ||
| fullscreen: function() { | ||
| fullscreen: function () { | ||
@@ -1114,3 +1142,3 @@ requestFullscreen(this.$magnify[0]); | ||
| }, | ||
| keydown: function(e) { | ||
| keydown: function (e) { | ||
@@ -1132,23 +1160,23 @@ var self = this; | ||
| 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 189: | ||
| self.zoom(-self.options.ratioThreshold * 3, { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, e); | ||
| break; | ||
| // + Firefox | ||
| // + Firefox | ||
| case 61: | ||
| self.zoom(self.options.ratioThreshold * 3, { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, e); | ||
| break; | ||
| // - Firefox | ||
| // - Firefox | ||
| case 173: | ||
| self.zoom(-self.options.ratioThreshold * 3, { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, e); | ||
| break; | ||
| // ctrl + alt + 0 | ||
| // ctrl + alt + 0 | ||
| case 48: | ||
@@ -1159,3 +1187,3 @@ if (ctrlKey && altKey) { | ||
| break; | ||
| // ctrl + , | ||
| // ctrl + , | ||
| case 188: | ||
@@ -1166,3 +1194,3 @@ if (ctrlKey) { | ||
| break; | ||
| // ctrl + . | ||
| // ctrl + . | ||
| case 190: | ||
@@ -1177,51 +1205,51 @@ if (ctrlKey) { | ||
| }, | ||
| addEvents: function() { | ||
| addEvents: function () { | ||
| var self = this; | ||
| this.$close.off(CLICK_EVENT + EVENT_NS).on(CLICK_EVENT + EVENT_NS, function(e) { | ||
| 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) { | ||
| 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) { | ||
| 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) { | ||
| 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) { | ||
| 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() { | ||
| 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() { | ||
| 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() { | ||
| 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() { | ||
| 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() { | ||
| 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() { | ||
| 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); | ||
@@ -1233,3 +1261,3 @@ }); | ||
| }, | ||
| _triggerHook: function(e, data) { | ||
| _triggerHook: function (e, data) { | ||
| if (this.options.callbacks[e]) { | ||
@@ -1239,3 +1267,3 @@ this.options.callbacks[e].apply(this, $.isArray(data) ? data : [data]); | ||
| } | ||
| }; | ||
| } | ||
@@ -1246,3 +1274,3 @@ /** | ||
| $.fn.magnify = function(options) { | ||
| $.fn.magnify = function (options) { | ||
@@ -1253,3 +1281,3 @@ jqEl = $(this); | ||
| 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]) | ||
@@ -1273,3 +1301,3 @@ } | ||
| jqEl.off('click' + EVENT_NS).on('click' + EVENT_NS, function(e) { | ||
| jqEl.off('click' + EVENT_NS).on('click' + EVENT_NS, function (e) { | ||
@@ -1284,3 +1312,3 @@ e.preventDefault(); | ||
| jqEl.off(opts.initEvent + EVENT_NS).on(opts.initEvent + EVENT_NS, function(e) { | ||
| jqEl.off(opts.initEvent + EVENT_NS).on(opts.initEvent + EVENT_NS, function (e) { | ||
@@ -1299,3 +1327,3 @@ e.preventDefault(); | ||
| }; | ||
| } | ||
@@ -1305,3 +1333,3 @@ /** | ||
| */ | ||
| $D.on(CLICK_EVENT + EVENT_NS, '[data-magnify]', function(e) { | ||
| $D.on(CLICK_EVENT + EVENT_NS, '[data-magnify]', function (e) { | ||
@@ -1364,3 +1392,3 @@ jqEl = $('[data-magnify]'); | ||
| }; | ||
| } | ||
@@ -1388,3 +1416,3 @@ var dragMove = function (e) { | ||
| }; | ||
| } | ||
@@ -1398,7 +1426,7 @@ var dragEnd = function (e) { | ||
| }; | ||
| } | ||
| $(dragHandle).on(TOUCH_START_EVENT + EVENT_NS, dragStart); | ||
| }; | ||
| } | ||
@@ -1446,4 +1474,6 @@ // Add to Magnify Prototype | ||
| var imageWidth = $(image).width(), | ||
| imageHeight = $(image).height(), | ||
| var $image = isIE8() ? $(stage).find(image) : $(image); | ||
| var imageWidth = $image.width(), | ||
| imageHeight = $image.height(), | ||
| stageWidth = $(stage).width(), | ||
@@ -1468,4 +1498,4 @@ stageHeight = $(stage).height(); | ||
| // Fixed the issue of stage with a border | ||
| left = $(image).position().left - δ; | ||
| top = $(image).position().top + δ; | ||
| left = $image.position().left - (isIE8() ? 0 : δ); | ||
| top = $image.position().top + (isIE8() ? 0 : δ); | ||
@@ -1480,3 +1510,3 @@ // Add grabbing cursor | ||
| }; | ||
| } | ||
@@ -1489,2 +1519,4 @@ var dragMove = function (e) { | ||
| var $image = isIE8() ? $(stage).find(image) : $(image); | ||
| if (isDragging) { | ||
@@ -1526,3 +1558,3 @@ | ||
| $(image).css({ | ||
| $image.css({ | ||
| left: newLeft + 'px', | ||
@@ -1540,3 +1572,3 @@ top: newTop + 'px' | ||
| }; | ||
| } | ||
@@ -1554,7 +1586,7 @@ var dragEnd = function (e) { | ||
| }; | ||
| } | ||
| $(stage).on(TOUCH_START_EVENT + EVENT_NS, dragStart); | ||
| }; | ||
| } | ||
@@ -1603,3 +1635,3 @@ // Add to Magnify Prototype | ||
| 'sw': resizableHandleSW | ||
| }; | ||
| } | ||
@@ -1687,3 +1719,3 @@ $(modal).append( | ||
| return opts[dir]; | ||
| }; | ||
| } | ||
@@ -1693,2 +1725,10 @@ // image CSS options | ||
| 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; | ||
| // Image should not move when modal width to the min width | ||
@@ -1703,7 +1743,7 @@ // The minwidth is modal width, so we should clac the stage minwidth | ||
| // Get image position in dragging | ||
| var imgLeft = (widthDiff > 0 ? $(image).position().left : ($(image).position().left < 0 ? $(image).position().left : 0)) - δ, | ||
| imgTop = (heightDiff > 0 ? $(image).position().top : ($(image).position().top < 0 ? $(image).position().top : 0)) + δ, | ||
| var imgLeft = (widthDiff > 0 ? imgPosLeft : (imgPosLeft < 0 ? imgPosLeft : 0)) - δ, | ||
| imgTop = (heightDiff > 0 ? imgPosTop : (imgPosTop < 0 ? imgPosTop : 0)) + δ, | ||
| imgLeft2 = (widthDiff2 > 0 ? $(image).position().left : ($(image).position().left < 0 ? $(image).position().left : 0)) - δ, | ||
| imgTop2 = (heightDiff2 > 0 ? $(image).position().top : ($(image).position().top < 0 ? $(image).position().top : 0)) + δ; | ||
| imgLeft2 = (widthDiff2 > 0 ? imgPosLeft : (imgPosLeft < 0 ? imgPosLeft : 0)) - δ, | ||
| imgTop2 = (heightDiff2 > 0 ? imgPosTop : (imgPosTop < 0 ? imgPosTop : 0)) + δ; | ||
@@ -1742,3 +1782,3 @@ var opts = { | ||
| return opts[dir]; | ||
| }; | ||
| } | ||
@@ -1751,2 +1791,4 @@ var dragStart = function(dir, e) { | ||
| var $image = isIE8() ? $(stage).find(image) : $(image); | ||
| isDragging = true; | ||
@@ -1764,3 +1806,3 @@ PUBLIC_VARS['isResizing'] = true; | ||
| t: $(modal).offset().top | ||
| }; | ||
| } | ||
@@ -1772,10 +1814,10 @@ stageData = { | ||
| t: $(stage).offset().top | ||
| }; | ||
| } | ||
| imageData = { | ||
| w: $(image).width(), | ||
| h: $(image).height(), | ||
| l: $(image).position().left, | ||
| t: $(image).position().top | ||
| }; | ||
| w: $image.width(), | ||
| h: $image.height(), | ||
| l: $image.position().left, | ||
| t: $image.position().top | ||
| } | ||
@@ -1795,3 +1837,3 @@ // δ is the difference between image width and height | ||
| }; | ||
| } | ||
@@ -1804,2 +1846,4 @@ var dragMove = function(e) { | ||
| var $image = isIE8() ? $(stage).find(image) : $(image); | ||
| if (isDragging && !self.isMaximized) { | ||
@@ -1819,7 +1863,7 @@ | ||
| $(image).css(imageOpts); | ||
| $image.css(imageOpts); | ||
| } | ||
| }; | ||
| } | ||
@@ -1852,3 +1896,3 @@ var dragEnd = function(e) { | ||
| }; | ||
| } | ||
@@ -1861,1 +1905,326 @@ // Add to Magnify Prototype | ||
| }); | ||
| // VERSION: 2.3 LAST UPDATE: 11.07.2013 | ||
| /* | ||
| * Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php | ||
| * | ||
| * Made by Wilq32, wilq32@gmail.com, Wroclaw, Poland, 01.2009 | ||
| * Website: http://jqueryrotate.com | ||
| */ | ||
| (function($) { | ||
| var supportedCSS, supportedCSSOrigin, styles = document.getElementsByTagName("head")[0].style, | ||
| toCheck = "transformProperty WebkitTransform OTransform msTransform MozTransform".split(" "); | ||
| for (var a = 0; a < toCheck.length; a++) | ||
| if (styles[toCheck[a]] !== undefined) { supportedCSS = toCheck[a]; } | ||
| if (supportedCSS) { | ||
| supportedCSSOrigin = supportedCSS.replace(/[tT]ransform/, "TransformOrigin"); | ||
| if (supportedCSSOrigin[0] == "T") supportedCSSOrigin[0] = "t"; | ||
| } | ||
| // Bad eval to preven google closure to remove it from code o_O | ||
| eval('IE = "v"=="\v"'); | ||
| jQuery.fn.extend({ | ||
| rotate: function(parameters) { | ||
| if (this.length === 0 || typeof parameters == "undefined") return; | ||
| if (typeof parameters == "number") parameters = { angle: parameters }; | ||
| var returned = []; | ||
| for (var i = 0, i0 = this.length; i < i0; i++) { | ||
| var element = this.get(i); | ||
| if (!element.Wilq32 || !element.Wilq32.PhotoEffect) { | ||
| var paramClone = $.extend(true, {}, parameters); | ||
| var newRotObject = new Wilq32.PhotoEffect(element, paramClone)._rootObj; | ||
| returned.push($(newRotObject)); | ||
| } else { | ||
| element.Wilq32.PhotoEffect._handleRotation(parameters); | ||
| } | ||
| } | ||
| return returned; | ||
| }, | ||
| getRotateAngle: function() { | ||
| var ret = [0]; | ||
| for (var i = 0, i0 = this.length; i < i0; i++) { | ||
| var element = this.get(i); | ||
| if (element.Wilq32 && element.Wilq32.PhotoEffect) { | ||
| ret[i] = element.Wilq32.PhotoEffect._angle; | ||
| } | ||
| } | ||
| return ret; | ||
| }, | ||
| stopRotate: function() { | ||
| for (var i = 0, i0 = this.length; i < i0; i++) { | ||
| var element = this.get(i); | ||
| if (element.Wilq32 && element.Wilq32.PhotoEffect) { | ||
| clearTimeout(element.Wilq32.PhotoEffect._timer); | ||
| } | ||
| } | ||
| } | ||
| }); | ||
| // Library agnostic interface | ||
| Wilq32 = window.Wilq32 || {}; | ||
| Wilq32.PhotoEffect = (function() { | ||
| if (supportedCSS) { | ||
| return function(img, parameters) { | ||
| img.Wilq32 = { | ||
| PhotoEffect: this | ||
| }; | ||
| this._img = this._rootObj = this._eventObj = img; | ||
| this._handleRotation(parameters); | ||
| } | ||
| } else { | ||
| return function(img, parameters) { | ||
| this._img = img; | ||
| this._onLoadDelegate = [parameters]; | ||
| this._rootObj = document.createElement('span'); | ||
| this._rootObj.style.display = "inline-block"; | ||
| this._rootObj.Wilq32 = { | ||
| PhotoEffect: this | ||
| }; | ||
| img.parentNode.insertBefore(this._rootObj, img); | ||
| if (img.complete) { | ||
| this._Loader(); | ||
| } else { | ||
| var self = this; | ||
| // TODO: Remove jQuery dependency | ||
| jQuery(this._img).bind("load", function() { self._Loader(); }); | ||
| } | ||
| } | ||
| } | ||
| })(); | ||
| Wilq32.PhotoEffect.prototype = { | ||
| _setupParameters: function(parameters) { | ||
| this._parameters = this._parameters || {}; | ||
| if (typeof this._angle !== "number") { this._angle = 0; } | ||
| if (typeof parameters.angle === "number") { this._angle = parameters.angle; } | ||
| this._parameters.animateTo = (typeof parameters.animateTo === "number") ? (parameters.animateTo) : (this._angle); | ||
| this._parameters.step = parameters.step || this._parameters.step || null; | ||
| this._parameters.easing = parameters.easing || this._parameters.easing || this._defaultEasing; | ||
| this._parameters.duration = 'duration' in parameters ? parameters.duration : parameters.duration || this._parameters.duration || 1000; | ||
| this._parameters.callback = parameters.callback || this._parameters.callback || this._emptyFunction; | ||
| this._parameters.center = parameters.center || this._parameters.center || ["50%", "50%"]; | ||
| if (typeof this._parameters.center[0] == "string") { | ||
| this._rotationCenterX = (parseInt(this._parameters.center[0], 10) / 100) * this._imgWidth * this._aspectW; | ||
| } else { | ||
| this._rotationCenterX = this._parameters.center[0]; | ||
| } | ||
| if (typeof this._parameters.center[1] == "string") { | ||
| this._rotationCenterY = (parseInt(this._parameters.center[1], 10) / 100) * this._imgHeight * this._aspectH; | ||
| } else { | ||
| this._rotationCenterY = this._parameters.center[1]; | ||
| } | ||
| if (parameters.bind && parameters.bind != this._parameters.bind) { this._BindEvents(parameters.bind); } | ||
| }, | ||
| _emptyFunction: function() {}, | ||
| _defaultEasing: function(x, t, b, c, d) { return -c * ((t = t / d - 1) * t * t * t - 1) + b }, | ||
| _handleRotation: function(parameters, dontcheck) { | ||
| if (!supportedCSS && !this._img.complete && !dontcheck) { | ||
| this._onLoadDelegate.push(parameters); | ||
| return; | ||
| } | ||
| this._setupParameters(parameters); | ||
| if (this._angle == this._parameters.animateTo) { | ||
| this._rotate(this._angle); | ||
| } else { | ||
| this._animateStart(); | ||
| } | ||
| }, | ||
| _BindEvents: function(events) { | ||
| if (events && this._eventObj) { | ||
| // Unbinding previous Events | ||
| if (this._parameters.bind) { | ||
| var oldEvents = this._parameters.bind; | ||
| for (var a in oldEvents) | ||
| if (oldEvents.hasOwnProperty(a)) | ||
| // TODO: Remove jQuery dependency | ||
| jQuery(this._eventObj).unbind(a, oldEvents[a]); | ||
| } | ||
| this._parameters.bind = events; | ||
| for (var a in events) | ||
| if (events.hasOwnProperty(a)) | ||
| // TODO: Remove jQuery dependency | ||
| jQuery(this._eventObj).bind(a, events[a]); | ||
| } | ||
| }, | ||
| _Loader: (function() { | ||
| if (IE) | ||
| return function() { | ||
| var width = this._img.width; | ||
| var height = this._img.height; | ||
| this._imgWidth = width; | ||
| this._imgHeight = height; | ||
| this._img.parentNode.removeChild(this._img); | ||
| this._vimage = this.createVMLNode('image'); | ||
| this._vimage.src = this._img.src; | ||
| this._vimage.style.height = height + "px"; | ||
| this._vimage.style.width = width + "px"; | ||
| this._vimage.style.position = "absolute"; // FIXES IE PROBLEM - its only rendered if its on absolute position! | ||
| this._vimage.style.top = "0px"; | ||
| this._vimage.style.left = "0px"; | ||
| this._aspectW = this._aspectH = 1; | ||
| /* Group minifying a small 1px precision problem when rotating object */ | ||
| this._container = this.createVMLNode('group'); | ||
| this._container.style.width = width; | ||
| this._container.style.height = height; | ||
| this._container.style.position = "absolute"; | ||
| this._container.style.top = "0px"; | ||
| this._container.style.left = "0px"; | ||
| this._container.setAttribute('coordsize', width - 1 + ',' + (height - 1)); // This -1, -1 trying to fix ugly problem with small displacement on IE | ||
| this._container.appendChild(this._vimage); | ||
| this._rootObj.appendChild(this._container); | ||
| this._rootObj.style.position = "relative"; // FIXES IE PROBLEM | ||
| this._rootObj.style.width = width + "px"; | ||
| this._rootObj.style.height = height + "px"; | ||
| this._rootObj.setAttribute('id', this._img.getAttribute('id')); | ||
| this._rootObj.className = this._img.className; | ||
| this._eventObj = this._rootObj; | ||
| var parameters; | ||
| while (parameters = this._onLoadDelegate.shift()) { | ||
| this._handleRotation(parameters, true); | ||
| } | ||
| } | ||
| else return function() { | ||
| this._rootObj.setAttribute('id', this._img.getAttribute('id')); | ||
| this._rootObj.className = this._img.className; | ||
| this._imgWidth = this._img.naturalWidth; | ||
| this._imgHeight = this._img.naturalHeight; | ||
| var _widthMax = Math.sqrt((this._imgHeight) * (this._imgHeight) + (this._imgWidth) * (this._imgWidth)); | ||
| this._width = _widthMax * 3; | ||
| this._height = _widthMax * 3; | ||
| this._aspectW = this._img.offsetWidth / this._img.naturalWidth; | ||
| this._aspectH = this._img.offsetHeight / this._img.naturalHeight; | ||
| this._img.parentNode.removeChild(this._img); | ||
| this._canvas = document.createElement('canvas'); | ||
| this._canvas.setAttribute('width', this._width); | ||
| this._canvas.style.position = "relative"; | ||
| this._canvas.style.left = -this._img.height * this._aspectW + "px"; | ||
| this._canvas.style.top = -this._img.width * this._aspectH + "px"; | ||
| this._canvas.Wilq32 = this._rootObj.Wilq32; | ||
| this._rootObj.appendChild(this._canvas); | ||
| this._rootObj.style.width = this._img.width * this._aspectW + "px"; | ||
| this._rootObj.style.height = this._img.height * this._aspectH + "px"; | ||
| this._eventObj = this._canvas; | ||
| this._cnv = this._canvas.getContext('2d'); | ||
| var parameters; | ||
| while (parameters = this._onLoadDelegate.shift()) { | ||
| this._handleRotation(parameters, true); | ||
| } | ||
| } | ||
| })(), | ||
| _animateStart: function() { | ||
| if (this._timer) { | ||
| clearTimeout(this._timer); | ||
| } | ||
| this._animateStartTime = +new Date; | ||
| this._animateStartAngle = this._angle; | ||
| this._animate(); | ||
| }, | ||
| _animate: function() { | ||
| var actualTime = +new Date; | ||
| var checkEnd = actualTime - this._animateStartTime > this._parameters.duration; | ||
| // TODO: Bug for animatedGif for static rotation ? (to test) | ||
| if (checkEnd && !this._parameters.animatedGif) { | ||
| clearTimeout(this._timer); | ||
| } else { | ||
| if (this._canvas || this._vimage || this._img) { | ||
| var angle = this._parameters.easing(0, actualTime - this._animateStartTime, this._animateStartAngle, this._parameters.animateTo - this._animateStartAngle, this._parameters.duration); | ||
| this._rotate((~~(angle * 10)) / 10); | ||
| } | ||
| if (this._parameters.step) { | ||
| this._parameters.step(this._angle); | ||
| } | ||
| var self = this; | ||
| this._timer = setTimeout(function() { | ||
| self._animate.call(self); | ||
| }, 10); | ||
| } | ||
| // To fix Bug that prevents using recursive function in callback I moved this function to back | ||
| if (this._parameters.callback && checkEnd) { | ||
| this._angle = this._parameters.animateTo; | ||
| this._rotate(this._angle); | ||
| this._parameters.callback.call(this._rootObj); | ||
| } | ||
| }, | ||
| _rotate: (function() { | ||
| var rad = Math.PI / 180; | ||
| if (IE) | ||
| return function(angle) { | ||
| this._angle = angle; | ||
| this._container.style.rotation = (angle % 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"; | ||
| } | ||
| else if (supportedCSS) | ||
| return function(angle) { | ||
| this._angle = angle; | ||
| this._img.style[supportedCSS] = "rotate(" + (angle % 360) + "deg)"; | ||
| this._img.style[supportedCSSOrigin] = this._parameters.center.join(" "); | ||
| } | ||
| else | ||
| return function(angle) { | ||
| this._angle = angle; | ||
| angle = (angle % 360) * rad; | ||
| // clear canvas | ||
| this._canvas.width = this._width; //+this._widthAdd; | ||
| this._canvas.height = this._height; //+this._heightAdd; | ||
| // REMEMBER: all drawings are read from backwards.. so first function is translate, then rotate, then translate, translate.. | ||
| this._cnv.translate(this._imgWidth * this._aspectW, this._imgHeight * this._aspectH); // at least center image on screen | ||
| this._cnv.translate(this._rotationCenterX, this._rotationCenterY); // we move image back to its orginal | ||
| this._cnv.rotate(angle); // rotate image | ||
| this._cnv.translate(-this._rotationCenterX, -this._rotationCenterY); // move image to its center, so we can rotate around its center | ||
| this._cnv.scale(this._aspectW, this._aspectH); // SCALE - if needed ;) | ||
| this._cnv.drawImage(this._img, 0, 0); // First - we draw image | ||
| } | ||
| })() | ||
| } | ||
| if (IE) { | ||
| Wilq32.PhotoEffect.prototype.createVMLNode = (function() { | ||
| document.createStyleSheet().addRule(".rvml", "behavior:url(#default#VML)"); | ||
| try { | ||
| !document.namespaces.rvml && document.namespaces.add("rvml", "urn:schemas-microsoft-com:vml"); | ||
| return function(tagName) { | ||
| return document.createElement('<rvml:' + tagName + ' class="rvml">'); | ||
| }; | ||
| } catch (e) { | ||
| return function(tagName) { | ||
| return document.createElement('<' + tagName + ' xmlns="urn:schemas-microsoft.com:vml" class="rvml">'); | ||
| }; | ||
| } | ||
| })(); | ||
| } | ||
| })(jQuery); |
@@ -9,3 +9,3 @@ /*! | ||
| * | ||
| * jquery.magnify - v1.1.0 | ||
| * jquery.magnify - v1.2.0 | ||
| * A jQuery plugin to view images just like in windows | ||
@@ -18,4 +18,5 @@ * https://github.com/nzbin/magnify#readme | ||
| */ | ||
| !function(t){"function"==typeof define&&define.amd?define(["jquery"],t):t("object"==typeof exports?require("jquery"):jQuery)}(function(t){"use strict";function i(i){return t(i).attr("data-src")?t(i).attr("data-src"):t(i).attr("href")}function e(t){var i=t.match(/\d+/g);return parseFloat(i[0])}function o(t,i,e,o){var a=o?t.h:t.w,n=o?t.w:t.h;(n>i.h||a>i.w)&&e.addClass("is-grab"),n<=i.h&&a<=i.w&&e.removeClass("is-grab")}function a(){return!!("ontouchstart"in window||window.DocumentTouch&&document instanceof DocumentTouch)}var n=t(window),s=t(document),h=a()?"touchstart":"mousedown",l=a()?"touchmove":"mousemove",r=a()?"touchend":"mouseup",g=".magnify",f={draggable:!0,resizable:!0,movable:!0,keyboard:!0,title:!0,modalWidth:320,modalHeight:320,fixedContent:!0,fixedModalSize:!1,initMaximized:!1,gapThreshold:.02,ratioThreshold:.1,minRatio:.1,maxRatio:16,headToolbar:["maximize","close"],footToolbar:["zoomIn","zoomOut","prev","fullscreen","next","actualSize","rotateRight"],icons:{minimize:"fa fa-window-minimize",maximize:"fa fa-window-maximize",close:"fa fa-close",zoomIn:"fa fa-search-plus",zoomOut:"fa fa-search-minus",prev:"fa fa-arrow-left",next:"fa fa-arrow-right",fullscreen:"fa fa-photo",actualSize:"fa fa-arrows-alt",rotateLeft:"fa fa-rotate-left",rotateRight:"fa fa-rotate-right"},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:t.noop,opened:t.noop,beforeClose:t.noop,closed:t.noop,beforeChange:t.noop,changed:t.noop}},d={isMoving:!1,isResizing:!1,zIndex:f.zIndex},m=null,c=function(i,e){this.options=t.extend(!0,{},f,e),e&&t.isArray(e.footToolbar)&&(this.options.footToolbar=e.footToolbar),e&&t.isArray(e.headToolbar)&&(this.options.headToolbar=e.headToolbar),this.$el=t(i),this.isOpened=!1,this.isMaximized=!1,this.isRotated=!1,this.rotateAngle=0,this.imageData={},this.modalData={width:null,height:null,left:null,top:null},this.init(i,this.options)};c.prototype={init:function(e,o){var a=i(e);this.groupName=null;var n=t(e).attr("data-group"),h=s.find('[data-group="'+n+'"]');void 0!==n?(this.groupName=n,this.getImgGroup(h,a)):this.getImgGroup(m.not("[data-group]"),a),this.open(),this.loadImg(a),o.draggable&&this.draggable(this.$magnify,this.dragHandle,".magnify-button"),o.movable&&this.movable(this.$stage,this.$image),o.resizable&&this.resizable(this.$magnify,this.$stage,this.$image,o.modalWidth,o.modalHeight)},_creatBtns:function(i,e){var o="";return t.each(i,function(t,i){o+=e[i]}),o},_creatTitle:function(){return this.options.title?'<div class="magnify-title"></div>':""},creatDOM:function(){var t={minimize:'<button class="magnify-button magnify-button-minimize" title="'+this.options.i18n.minimize+'"> <i class="'+this.options.icons.minimize+'" aria-hidden="true"></i> </button>',maximize:'<button class="magnify-button magnify-button-maximize" title="'+this.options.i18n.maximize+'"> <i class="'+this.options.icons.maximize+'" aria-hidden="true"></i> </button>',close:'<button class="magnify-button magnify-button-close" title="'+this.options.i18n.close+'"> <i class="'+this.options.icons.close+'" aria-hidden="true"></i> </button>',zoomIn:'<button class="magnify-button magnify-button-zoom-in" title="'+this.options.i18n.zoomIn+'"> <i class="'+this.options.icons.zoomIn+'" aria-hidden="true"></i> </button>',zoomOut:'<button class="magnify-button magnify-button-zoom-out" title="'+this.options.i18n.zoomOut+'"> <i class="'+this.options.icons.zoomOut+'" aria-hidden="true"></i> </button>',prev:'<button class="magnify-button magnify-button-prev" title="'+this.options.i18n.prev+'"> <i class="'+this.options.icons.prev+'" aria-hidden="true"></i> </button>',next:'<button class="magnify-button magnify-button-next" title="'+this.options.i18n.next+'"> <i class="'+this.options.icons.next+'" aria-hidden="true"></i> </button>',fullscreen:'<button class="magnify-button magnify-button-fullscreen" title="'+this.options.i18n.fullscreen+'"> <i class="'+this.options.icons.fullscreen+'" aria-hidden="true"></i> </button>',actualSize:'<button class="magnify-button magnify-button-actual-size" title="'+this.options.i18n.actualSize+'"> <i class="'+this.options.icons.actualSize+'" aria-hidden="true"></i> </button>',rotateLeft:'<button class="magnify-button magnify-button-rotate-left" title="'+this.options.i18n.rotateLeft+'"> <i class="'+this.options.icons.rotateLeft+'" aria-hidden="true"></i> </button>',rotateRight:'<button class="magnify-button magnify-button-rotate-right" title="'+this.options.i18n.rotateRight+'"> <i class="'+this.options.icons.rotateRight+'" aria-hidden="true"></i> </button>'};return'<div class="magnify-modal"> <div class="magnify-header"> <div class="magnify-toolbar magnify-head-toolbar">'+this._creatBtns(this.options.headToolbar,t)+" </div>"+this._creatTitle()+' </div> <div class="magnify-stage"> <img class="magnify-image" src="" alt="" /> </div> <div class="magnify-footer"> <div class="magnify-toolbar magnify-foot-toolbar">'+this._creatBtns(this.options.footToolbar,t)+" </div> </div> </div>"},build:function(){var i=this.creatDOM(),e=t(i);this.$magnify=e,this.$header=e.find(".magnify-header"),this.$headToolbar=e.find(".magnify-head-toolbar"),this.$footer=e.find(".magnify-footer"),this.$footToolbar=e.find(".magnify-foot-toolbar"),this.$stage=e.find(".magnify-stage"),this.$title=e.find(".magnify-title"),this.$image=e.find(".magnify-image"),this.$close=e.find(".magnify-button-close"),this.$maximize=e.find(".magnify-button-maximize"),this.$minimize=e.find(".magnify-button-minimize"),this.$zoomIn=e.find(".magnify-button-zoom-in"),this.$zoomOut=e.find(".magnify-button-zoom-out"),this.$actualSize=e.find(".magnify-button-actual-size"),this.$fullscreen=e.find(".magnify-button-fullscreen"),this.$rotateLeft=e.find(".magnify-button-rotate-left"),this.$rotateRight=e.find(".magnify-button-rotate-right"),this.$prev=e.find(".magnify-button-prev"),this.$next=e.find(".magnify-button-next"),this.$stage.addClass("stage-ready"),this.$image.addClass("image-ready"),this.$magnify.css("z-index",d.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||t(".magnify-modal").eq(0).remove(),!t(".magnify-modal").length&&this.options.fixedContent&&(t("html").css({overflow:"hidden"}),document.body.scrollHeight>(window.innerHeight||document.documentElement.clientHeight))){var i=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}();i&&t("html").css({"padding-right":i})}this.build(),this._triggerHook("beforeOpen",this.$el),t("body").append(this.$magnify),this.addEvents(),this.setModalPos(this.$magnify),this._triggerHook("opened",this.$el)},close:function(i){this._triggerHook("beforeClose",this.$el),this.$magnify.remove(),this.isOpened=!1,this.isMaximized=!1,this.isRotated=!1,this.rotateAngle=0;var e=!t(".magnify-modal").length;e&&this.options.fixedContent&&t("html").css({overflow:"","padding-right":""}),e&&this.options.multiInstances&&(d.zIndex=this.options.zIndex),t(".magnify-modal").length||(s.off("keydown.magnify"),n.off("resize.magnify")),this._triggerHook("closed",this.$el)},setModalPos:function(t){var i=n.width(),e=n.height(),o=s.scrollLeft(),a=s.scrollTop(),h=this.options.modalWidth,l=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:h,height:l,left:(i-h)/2+o+"px",top:(e-l)/2+a+"px"})},setModalSize:function(t){var i=this,o=n.width(),a=n.height(),h=s.scrollLeft(),l=s.scrollTop(),r={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")},g=t.width+e(r.left)+e(r.right)+e(r.borderLeft)+e(r.borderRight),f=t.height+e(r.top)+e(r.bottom)+e(r.borderTop)+e(r.borderBottom),d=(this.options.gapThreshold>0?this.options.gapThreshold:0)+1,m=Math.min(o/(g*d),a/(f*d),1),c=Math.max(g*m,this.options.modalWidth),p=Math.max(f*m,this.options.modalHeight),u={width:(c=this.options.fixedModalSize?this.options.modalWidth:Math.round(c))+"px",height:(p=this.options.fixedModalSize?this.options.modalHeight:Math.round(p))+"px",left:(o-c)/2+h+"px",top:(a-p)/2+l+"px"};this.options.initAnimation?this.$magnify.animate(u,function(){i.setImageSize(t)}):(this.$magnify.css(u),this.setImageSize(t)),this.isOpened=!0},setImageSize:function(i){var e={w:this.$stage.width(),h:this.$stage.height()},a=1;a=this.isRotated?Math.min(e.w/i.height,e.h/i.width,1):Math.min(e.w/i.width,e.h/i.height,1),this.$image.css({width:Math.ceil(i.width*a)+"px",height:Math.ceil(i.height*a)+"px",left:(e.w-Math.ceil(i.width*a))/2+"px",top:(e.h-Math.ceil(i.height*a))/2+"px"}),t.extend(this.imageData,{width:i.width*a,height:i.height*a,left:(e.w-i.width*a)/2,top:(e.h-i.height*a)/2}),o({w:this.$image.width(),h:this.$image.height()},{w:this.$stage.width(),h:this.$stage.height()},this.$stage,this.isRotated),this.$magnify.find(".magnify-loader").remove(),this.options.initAnimation&&this.$image.fadeIn()},loadImg:function(t){var i=this;this.$magnify.append('<div class="magnify-loader"></div>'),this.options.initAnimation&&this.$image.hide(),this.$image.attr("src",t),function(t,i,e){var o=new Image;o.onload=function(){i(o)},o.onerror=function(){e(o)},o.src=t}(t,function(t){i.imageData={originalWidth:t.width,originalHeight:t.height},i.isMaximized||i.isOpened&&i.options.fixedModalPos?i.setImageSize(t):i.setModalSize(t),i.$stage.removeClass("stage-ready"),i.$image.removeClass("image-ready")},function(){i.$magnify.find(".magnify-loader").remove()}),this.options.title&&this.setImgTitle(t)},getImgGroup:function(e,o){var a=this;a.groupData=[],t(e).each(function(e,n){var s=i(this);a.groupData.push({src:s,caption:t(this).attr("data-caption")}),o===s&&(a.groupIndex=e)})},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.groupIndex=this.groupIndex+t,this.jumpTo(this.groupIndex)},jumpTo:function(t){(t%=this.groupData.length)>=0?t%=this.groupData.length:t<0&&(t=(this.groupData.length+t)%this.groupData.length),this.groupIndex=t,this._triggerHook("beforeChange",t),this.loadImg(this.groupData[t].src),this._triggerHook("changed",t)},wheel:function(t){t.preventDefault();var i=1;t.originalEvent.deltaY?i=t.originalEvent.deltaY>0?1:-1:t.originalEvent.wheelDelta?i=-t.originalEvent.wheelDelta/120:t.originalEvent.detail&&(i=t.originalEvent.detail>0?1:-1);var e=-i*this.options.ratioThreshold,o={x:t.originalEvent.clientX-this.$stage.offset().left+s.scrollLeft(),y:t.originalEvent.clientY-this.$stage.offset().top+s.scrollTop()};this.zoom(e,o,t)},zoom:function(t,i,e){(t=t<0?1/(1-t):1+t)>.95&&t<1.05&&(t=1),t=this.$image.width()/this.imageData.originalWidth*t,t=Math.max(t,this.options.minRatio),t=Math.min(t,this.options.maxRatio),this.zoomTo(t,i,e)},zoomTo:function(i,e,a){var n=this.$image,s=this.$stage,h={w:this.imageData.width,h:this.imageData.height,x:this.imageData.left,y:this.imageData.top},l={w:s.width(),h:s.height(),x:s.offset().left,y:s.offset().top},r=this.imageData.originalWidth*i,g=this.imageData.originalHeight*i,f=e.x-(e.x-h.x)/h.w*r,d=e.y-(e.y-h.y)/h.h*g,m=this.isRotated?(r-g)/2:0,c=this.isRotated?g:r,p=this.isRotated?r:g,u=l.w-r,y=l.h-g; | ||
| !function(t){"function"==typeof define&&define.amd?define(["jquery"],t):t("object"==typeof exports?require("jquery"):jQuery)}(function(t){"use strict";function i(i){return t(i).attr("data-src")?t(i).attr("data-src"):t(i).attr("href")}function e(t){var i=t.match(/\d+/g);return parseFloat(i[0])}function a(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 s(){return!!("ontouchstart"in window||window.DocumentTouch&&document instanceof DocumentTouch)}function o(){return"Microsoft Internet Explorer"==navigator.appName&&navigator.appVersion.indexOf("MSIE 8.0")>0||"Microsoft Internet Explorer"==navigator.appName&&navigator.appVersion.indexOf("MSIE 7.0")>0}var n=t(window),h=t(document),r=s()?"touchstart":"mousedown",l=s()?"touchmove":"mousemove",g=s()?"touchend":"mouseup",m=".magnify",f={draggable:!0,resizable:!0,movable:!0,keyboard:!0,title:!0,modalWidth:320,modalHeight:320,fixedContent:!0,fixedModalSize:!1,initMaximized:!1,gapThreshold:.02,ratioThreshold:.1,minRatio:.1,maxRatio:16,headToolbar:["maximize","close"],footToolbar:["zoomIn","zoomOut","prev","fullscreen","next","actualSize","rotateRight"],icons:{minimize:"fa fa-window-minimize",maximize:"fa fa-window-maximize",close:"fa fa-close",zoomIn:"fa fa-search-plus",zoomOut:"fa fa-search-minus",prev:"fa fa-arrow-left",next:"fa fa-arrow-right",fullscreen:"fa fa-photo",actualSize:"fa fa-arrows-alt",rotateLeft:"fa fa-rotate-left",rotateRight:"fa fa-rotate-right"},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:t.noop,opened:t.noop,beforeClose:t.noop,closed:t.noop,beforeChange:t.noop,changed:t.noop}},d={isMoving:!1,isResizing:!1,zIndex:f.zIndex},c=null,p=function(i,e){this.options=t.extend(!0,{},f,e),e&&t.isArray(e.footToolbar)&&(this.options.footToolbar=e.footToolbar),e&&t.isArray(e.headToolbar)&&(this.options.headToolbar=e.headToolbar),this.$el=t(i),this.isOpened=!1,this.isMaximized=!1,this.isRotated=!1,this.rotateAngle=0,this.imageData={},this.modalData={width:null,height:null,left:null,top:null},this.init(i,this.options)};p.prototype={init:function(e,a){var s=i(e);this.groupName=null;var n=t(e).attr("data-group"),r=h.find('[data-group="'+n+'"]');void 0!==n?(this.groupName=n,this.getImgGroup(r,s)):this.getImgGroup(c.not("[data-group]"),s),this.open(),this.loadImg(s),a.draggable&&this.draggable(this.$magnify,this.dragHandle,".magnify-button"),a.movable&&this.movable(this.$stage,o()?".magnify-image":this.$image),a.resizable&&this.resizable(this.$magnify,this.$stage,o()?".magnify-image":this.$image,a.modalWidth,a.modalHeight)},_creatBtns:function(i,e){var a="";return t.each(i,function(t,i){a+=e[i]}),a},_creatTitle:function(){return this.options.title?'<div class="magnify-title"></div>':""},creatDOM:function(){var t={minimize:'<button class="magnify-button magnify-button-minimize" title="'+this.options.i18n.minimize+'"> <i class="'+this.options.icons.minimize+'" aria-hidden="true"></i> </button>',maximize:'<button class="magnify-button magnify-button-maximize" title="'+this.options.i18n.maximize+'"> <i class="'+this.options.icons.maximize+'" aria-hidden="true"></i> </button>',close:'<button class="magnify-button magnify-button-close" title="'+this.options.i18n.close+'"> <i class="'+this.options.icons.close+'" aria-hidden="true"></i> </button>',zoomIn:'<button class="magnify-button magnify-button-zoom-in" title="'+this.options.i18n.zoomIn+'"> <i class="'+this.options.icons.zoomIn+'" aria-hidden="true"></i> </button>',zoomOut:'<button class="magnify-button magnify-button-zoom-out" title="'+this.options.i18n.zoomOut+'"> <i class="'+this.options.icons.zoomOut+'" aria-hidden="true"></i> </button>',prev:'<button class="magnify-button magnify-button-prev" title="'+this.options.i18n.prev+'"> <i class="'+this.options.icons.prev+'" aria-hidden="true"></i> </button>',next:'<button class="magnify-button magnify-button-next" title="'+this.options.i18n.next+'"> <i class="'+this.options.icons.next+'" aria-hidden="true"></i> </button>',fullscreen:'<button class="magnify-button magnify-button-fullscreen" title="'+this.options.i18n.fullscreen+'"> <i class="'+this.options.icons.fullscreen+'" aria-hidden="true"></i> </button>',actualSize:'<button class="magnify-button magnify-button-actual-size" title="'+this.options.i18n.actualSize+'"> <i class="'+this.options.icons.actualSize+'" aria-hidden="true"></i> </button>',rotateLeft:'<button class="magnify-button magnify-button-rotate-left" title="'+this.options.i18n.rotateLeft+'"> <i class="'+this.options.icons.rotateLeft+'" aria-hidden="true"></i> </button>',rotateRight:'<button class="magnify-button magnify-button-rotate-right" title="'+this.options.i18n.rotateRight+'"> <i class="'+this.options.icons.rotateRight+'" aria-hidden="true"></i> </button>'};return'<div class="magnify-modal"> <div class="magnify-header"> <div class="magnify-toolbar magnify-head-toolbar">'+this._creatBtns(this.options.headToolbar,t)+"</div>"+this._creatTitle()+' </div> <div class="magnify-stage"> <img class="magnify-image" src="" alt="" /> </div> <div class="magnify-footer"> <div class="magnify-toolbar magnify-foot-toolbar">'+this._creatBtns(this.options.footToolbar,t)+"</div> </div> </div>"},build:function(){var i=this.creatDOM(),e=t(i);this.$magnify=e,this.$header=e.find(".magnify-header"),this.$headToolbar=e.find(".magnify-head-toolbar"),this.$footer=e.find(".magnify-footer"),this.$footToolbar=e.find(".magnify-foot-toolbar"),this.$stage=e.find(".magnify-stage"),this.$title=e.find(".magnify-title"),this.$image=e.find(".magnify-image"),this.$close=e.find(".magnify-button-close"),this.$maximize=e.find(".magnify-button-maximize"),this.$minimize=e.find(".magnify-button-minimize"),this.$zoomIn=e.find(".magnify-button-zoom-in"),this.$zoomOut=e.find(".magnify-button-zoom-out"),this.$actualSize=e.find(".magnify-button-actual-size"),this.$fullscreen=e.find(".magnify-button-fullscreen"),this.$rotateLeft=e.find(".magnify-button-rotate-left"),this.$rotateRight=e.find(".magnify-button-rotate-right"),this.$prev=e.find(".magnify-button-prev"),this.$next=e.find(".magnify-button-next"),this.$stage.addClass("stage-ready"),this.$image.addClass("image-ready"),this.$magnify.css("z-index",d.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||t(".magnify-modal").eq(0).remove(),!t(".magnify-modal").length&&this.options.fixedContent&&(t("html").css({overflow:"hidden"}),document.body.scrollHeight>(window.innerHeight||document.documentElement.clientHeight))){var i=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}();i&&t("html").css({"padding-right":i})}this.build(),this._triggerHook("beforeOpen",this.$el),t("body").append(this.$magnify),this.addEvents(),this.setModalPos(this.$magnify),this._triggerHook("opened",this.$el)},close:function(i){this._triggerHook("beforeClose",this.$el),this.$magnify.remove(),this.isOpened=!1,this.isMaximized=!1,this.isRotated=!1,this.rotateAngle=0;var e=!t(".magnify-modal").length;e&&this.options.fixedContent&&t("html").css({overflow:"","padding-right":""}),e&&this.options.multiInstances&&(d.zIndex=this.options.zIndex),t(".magnify-modal").length||(h.off("keydown.magnify"),n.off("resize.magnify")),this._triggerHook("closed",this.$el)},setModalPos:function(t){var i=n.width(),e=n.height(),a=h.scrollLeft(),s=h.scrollTop(),o=this.options.modalWidth,r=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:r,left:(i-o)/2+a+"px",top:(e-r)/2+s+"px"})},setModalSize:function(t){var i=this,a=n.width(),s=n.height(),o=h.scrollLeft(),r=h.scrollTop(),l={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")},g=t.width+e(l.left)+e(l.right)+e(l.borderLeft)+e(l.borderRight),m=t.height+e(l.top)+e(l.bottom)+e(l.borderTop)+e(l.borderBottom),f=(this.options.gapThreshold>0?this.options.gapThreshold:0)+1,d=Math.min(a/(g*f),s/(m*f),1),c=Math.max(g*d,this.options.modalWidth),p=Math.max(m*d,this.options.modalHeight),u={width:(c=this.options.fixedModalSize?this.options.modalWidth:Math.round(c))+"px",height:(p=this.options.fixedModalSize?this.options.modalHeight:Math.round(p))+"px",left:(a-c)/2+o+"px",top:(s-p)/2+r+"px"};this.options.initAnimation?this.$magnify.animate(u,function(){i.setImageSize(t)}):(this.$magnify.css(u),this.setImageSize(t)),this.isOpened=!0},setImageSize:function(i){var e=o()?this.$stage.find(".magnify-image"):this.$image,s={w:this.$stage.width(),h:this.$stage.height()},n=1;n=this.isRotated?Math.min(s.w/i.height,s.h/i.width,1):Math.min(s.w/i.width,s.h/i.height,1),e.css({width:Math.ceil(i.width*n)+"px",height:Math.ceil(i.height*n)+"px",left:(s.w-Math.ceil(i.width*n))/2+"px",top:(s.h-Math.ceil(i.height*n))/2+"px"}),o()&&e.find("group").css({width:Math.floor(i.width*n)+"px",height:Math.floor(i.height*n)+"px"}),t.extend(this.imageData,{width:i.width*n,height:i.height*n,left:(s.w-i.width*n)/2,top:(s.h-i.height*n)/2}),a({w:e.width(),h:e.height()},{w:this.$stage.width(),h:this.$stage.height()},this.$stage,this.isRotated),this.$magnify.find(".magnify-loader").remove(),this.options.initAnimation&&e.fadeIn()},loadImg:function(t){var i=this;this.$magnify.append('<div class="magnify-loader"></div>'),this.options.initAnimation&&this.$image.hide(),o()?this.$stage.html('<img class="magnify-image" id="magnify-image" src="'+t+'" alt="" />'):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){i.imageData={originalWidth:t.width,originalHeight:t.height},i.isMaximized||i.isOpened&&i.options.fixedModalPos?i.setImageSize(t):i.setModalSize(t),i.$stage.removeClass("stage-ready"),i.$image.removeClass("image-ready")},function(){i.$magnify.find(".magnify-loader").remove()}),this.options.title&&this.setImgTitle(t)},getImgGroup:function(e,a){var s=this;s.groupData=[],t(e).each(function(e,o){var n=i(this);s.groupData.push({src:n,caption:t(this).attr("data-caption")}),a===n&&(s.groupIndex=e)})},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.groupIndex=this.groupIndex+t,this.jumpTo(this.groupIndex)},jumpTo:function(t){(t%=this.groupData.length)>=0?t%=this.groupData.length:t<0&&(t=(this.groupData.length+t)%this.groupData.length),this.groupIndex=t,this._triggerHook("beforeChange",t),this.loadImg(this.groupData[t].src),this._triggerHook("changed",t)},wheel:function(t){t.preventDefault();var i=1;t.originalEvent.deltaY?i=t.originalEvent.deltaY>0?1:-1:t.originalEvent.wheelDelta?i=-t.originalEvent.wheelDelta/120:t.originalEvent.detail&&(i=t.originalEvent.detail>0?1:-1);var e=-i*this.options.ratioThreshold,a={x:t.originalEvent.clientX-this.$stage.offset().left+h.scrollLeft(),y:t.originalEvent.clientY-this.$stage.offset().top+h.scrollTop()};this.zoom(e,a,t)},zoom:function(t,i,e){this.$image=o()?this.$stage.find(".magnify-image"):this.$image,(t=t<0?1/(1-t):1+t)>.95&&t<1.05&&(t=1),t=this.$image.width()/this.imageData.originalWidth*t,t=Math.max(t,this.options.minRatio),t=Math.min(t,this.options.maxRatio),this.zoomTo(t,i,e)},zoomTo:function(i,e,s){var n=o()?this.$stage.find(".magnify-image"):this.$image,h=this.$stage,r={w:this.imageData.width,h:this.imageData.height,x:this.imageData.left,y:this.imageData.top},l={w:h.width(),h:h.height(),x:h.offset().left,y:h.offset().top},g=this.imageData.originalWidth*i,m=this.imageData.originalHeight*i,f=e.x-(e.x-r.x)/r.w*g,d=e.y-(e.y-r.y)/r.h*m,c=this.isRotated?(g-m)/2:0,p=this.isRotated?m:g,u=this.isRotated?g:m,y=l.w-g,_=l.h-m; | ||
| // The conditions with image rotate 90 degree drive me crazy alomst! | ||
| d=p<=l.h?(l.h-g)/2:d>m?m:d>y-m?d:y-m,f=c<=l.w?(l.w-r)/2:f>-m?-m:f>u+m?f:u+m,n.css({width:Math.round(r)+"px",height:Math.round(g)+"px",left:Math.round(f)+"px",top:Math.round(d)+"px"}),t.extend(this.imageData,{width:r,height:g,left:f,top:d}),o({w:Math.round(c),h:Math.round(p)},{w:l.w,h:l.h},this.$stage)},rotate:function(t){this.rotateAngle=this.rotateAngle+t,this.rotateAngle/90%2==0?this.isRotated=!1:this.isRotated=!0,this.rotateTo(this.rotateAngle)},rotateTo:function(t){this.$image.css({transform:"rotate("+t+"deg)"}),this.setImageSize({width:this.imageData.originalWidth,height:this.imageData.originalHeight}),this.$stage.removeClass("is-grab")},resize:function(){var t=this;return function(t,i){var e=null;return function(){var o=this,a=arguments;clearTimeout(e),e=setTimeout(function(){t.apply(o,a)},i)}}(function(){t.isOpened&&(t.isMaximized?t.setImageSize({width:t.imageData.originalWidth,height:t.imageData.originalHeight}):t.setModalSize({width:t.imageData.originalWidth,height:t.imageData.originalHeight}))},500)},maximize:function(){this.isMaximized?(this.$magnify.removeClass("magnify-maximize"),this.$magnify.css({width:this.modalData.width?this.modalData.width:this.options.modalWidth,height:this.modalData.height?this.modalData.height:this.options.modalHeight,left:this.modalData.left?this.modalData.left:(n.width()-this.options.modalWidth)/2+s.scrollLeft(),top:this.modalData.top?this.modalData.top:(n.height()-this.options.modalHeight)/2+s.scrollTop()}),this.isMaximized=!1):(this.modalData={width:this.$magnify.width(),height:this.$magnify.height(),left:this.$magnify.offset().left,top:this.$magnify.offset().top},this.$magnify.addClass("magnify-maximize"),this.$magnify.css({width:"100%",height:"100%",left:0,top:0}),this.isMaximized=!0),this.setImageSize({width:this.imageData.originalWidth,height:this.imageData.originalHeight})},fullscreen:function(){!function(t){t.requestFullscreen?t.requestFullscreen():t.mozRequestFullScreen?t.mozRequestFullScreen():t.webkitRequestFullscreen?t.webkitRequestFullscreen():t.msRequestFullscreen&&t.msRequestFullscreen()}(this.$magnify[0])},keydown:function(t){if(!this.options.keyboard)return!1;var i=t.keyCode||t.which||t.charCode,e=t.ctrlKey||t.metaKey,o=t.altKey||t.metaKey;switch(i){case 37:this.jump(-1);break;case 39:this.jump(1);break;case 187:this.zoom(3*this.options.ratioThreshold,{x:this.$stage.width()/2,y:this.$stage.height()/2},t);break;case 189:this.zoom(3*-this.options.ratioThreshold,{x:this.$stage.width()/2,y:this.$stage.height()/2},t);break;case 61:this.zoom(3*this.options.ratioThreshold,{x:this.$stage.width()/2,y:this.$stage.height()/2},t);break;case 173:this.zoom(3*-this.options.ratioThreshold,{x:this.$stage.width()/2,y:this.$stage.height()/2},t);break;case 48:e&&o&&this.zoomTo(1,{x:this.$stage.width()/2,y:this.$stage.height()/2},t);break;case 188:e&&this.rotate(-90);break;case 190:e&&this.rotate(90)}},addEvents:function(){var t=this;this.$close.off("click.magnify").on("click.magnify",function(i){t.close()}),this.$stage.off("wheel mousewheel DOMMouseScroll.magnify").on("wheel mousewheel DOMMouseScroll.magnify",function(i){t.wheel(i)}),this.$zoomIn.off("click.magnify").on("click.magnify",function(i){t.zoom(3*t.options.ratioThreshold,{x:t.$stage.width()/2,y:t.$stage.height()/2},i)}),this.$zoomOut.off("click.magnify").on("click.magnify",function(i){t.zoom(3*-t.options.ratioThreshold,{x:t.$stage.width()/2,y:t.$stage.height()/2},i)}),this.$actualSize.off("click.magnify").on("click.magnify",function(i){t.zoomTo(1,{x:t.$stage.width()/2,y:t.$stage.height()/2},i)}),this.$prev.off("click.magnify").on("click.magnify",function(){t.jump(-1)}),this.$fullscreen.off("click.magnify").on("click.magnify",function(){t.fullscreen()}),this.$next.off("click.magnify").on("click.magnify",function(){t.jump(1)}),this.$rotateLeft.off("click.magnify").on("click.magnify",function(){t.rotate(-90)}),this.$rotateRight.off("click.magnify").on("click.magnify",function(){t.rotate(90)}),this.$maximize.off("click.magnify").on("click.magnify",function(){t.maximize()}),s.off("keydown.magnify").on("keydown.magnify",function(i){t.keydown(i)}),n.on("resize.magnify",t.resize())},_triggerHook:function(i,e){this.options.callbacks[i]&&this.options.callbacks[i].apply(this,t.isArray(e)?e:[e])}},t.fn.magnify=function(i){m=t(this);for(var e in i)"string"!=typeof i[e]||isNaN(i[e])||(i[e]=parseFloat(i[e]));var o=t.extend(!0,{},f,i);return d.zIndex=o.zIndex,"string"==typeof i||("dblclick"===o.initEvent&&m.off("click.magnify").on("click.magnify",function(t){t.preventDefault(),t.stopPropagation()}),m.off(o.initEvent+g).on(o.initEvent+g,function(e){e.preventDefault(),e.stopPropagation(),t(this).data("magnify",new c(this,i))})),m},s.on("click.magnify","[data-magnify]",function(i){m=t("[data-magnify]"),i.preventDefault(),t(this).data("magnify",new c(this,f))});t.extend(c.prototype,{draggable:function(i,e,o){var a=this,n=!1,f=0,m=0,c=0,p=0,u=function(e){if((e=e||window.event).preventDefault(),n&&!d.isMoving&&!d.isResizing&&!a.isMaximized){var o="touchmove"===e.type?e.originalEvent.targetTouches[0].pageX:e.clientX,s="touchmove"===e.type?e.originalEvent.targetTouches[0].pageY:e.clientY,h=o-f,l=s-m;t(i).css({left:h+c+"px",top:l+p+"px"})}},y=function(t){s.off(l+g,u).off(r+g,y),n=!1};t(e).on(h+g,function(e){if(e=e||window.event,a.options.multiInstances&&i.css("z-index",++d.zIndex),t(e.target).closest(o).length)return!0;n=!0,f="touchstart"===e.type?e.originalEvent.targetTouches[0].pageX:e.clientX,m="touchstart"===e.type?e.originalEvent.targetTouches[0].pageY:e.clientY,c=t(i).offset().left,p=t(i).offset().top,s.on(l+g,u).on(r+g,y)})}});t.extend(c.prototype,{movable:function(i,e){var o=this,a=!1,n=0,f=0,m=0,c=0,p=0,u=0,y=0,x=function(i){if((i=i||window.event).preventDefault(),a){var s="touchmove"===i.type?i.originalEvent.targetTouches[0].pageX:i.clientX,h="touchmove"===i.type?i.originalEvent.targetTouches[0].pageY:i.clientY,l=s-n,r=h-f,g=l+m,d=r+c;u>0?r+c>y?d=y:r+c<-u+y&&(d=-u+y):d=c,p>0?l+m>-y?g=-y:l+m<-p-y&&(g=-p-y):g=m,t(e).css({left:g+"px",top:d+"px"}),t.extend(o.imageData,{left:g,top:d})}},w=function(i){s.off(l+g,x).off(r+g,w),a=!1,d.isMoving=!1,t("html,body,.magnify-modal,.magnify-stage,.magnify-button,.magnify-resizable-handle").removeClass("is-grabbing")};t(i).on(h+g,function(h){(h=h||window.event).preventDefault();var b=t(e).width(),v=t(e).height(),z=t(i).width(),$=t(i).height();n="touchstart"===h.type?h.originalEvent.targetTouches[0].pageX:h.clientX,f="touchstart"===h.type?h.originalEvent.targetTouches[0].pageY:h.clientY,y=o.isRotated?(b-v)/2:0,p=o.isRotated?v-z:b-z,u=o.isRotated?b-$:v-$,a=p>0||u>0,d.isMoving=p>0||u>0,m=t(e).position().left-y,c=t(e).position().top+y,i.hasClass("is-grab")&&t("html,body,.magnify-modal,.magnify-stage,.magnify-button,.magnify-resizable-handle").addClass("is-grabbing"),s.on(l+g,x).on(r+g,w)})}});t.extend(c.prototype,{resizable:function(i,e,a,n,f){var m=this,c=t('<div class="magnify-resizable-handle magnify-resizable-handle-e"></div>'),p=t('<div class="magnify-resizable-handle magnify-resizable-handle-w"></div>'),u=t('<div class="magnify-resizable-handle magnify-resizable-handle-s"></div>'),y=t('<div class="magnify-resizable-handle magnify-resizable-handle-n"></div>'),x=t('<div class="magnify-resizable-handle magnify-resizable-handle-se"></div>'),w=t('<div class="magnify-resizable-handle magnify-resizable-handle-sw"></div>'),b=t('<div class="magnify-resizable-handle magnify-resizable-handle-ne"></div>'),v=t('<div class="magnify-resizable-handle magnify-resizable-handle-nw"></div>'),z={e:c,s:u,se:x,n:y,w:p,nw:v,ne:b,sw:w};t(i).append(c,p,u,y,x,w,b,v);var $=!1,M=0,T=0,D={w:0,h:0,l:0,t:0},k={w:0,h:0,l:0,t:0},I={w:0,h:0,l:0,t:0},R=0,H=0,E=0,C="",S=function(o,n){(n=n||window.event).preventDefault(),$=!0,d.isResizing=!0,M="touchstart"===n.type?n.originalEvent.targetTouches[0].pageX:n.clientX,T="touchstart"===n.type?n.originalEvent.targetTouches[0].pageY:n.clientY,D={w:t(i).width(),h:t(i).height(),l:t(i).offset().left,t:t(i).offset().top},k={w:t(e).width(),h:t(e).height(),l:t(e).offset().left,t:t(e).offset().top},I={w:t(a).width(),h:t(a).height(),l:t(a).position().left,t:t(a).position().top},R=m.isRotated?(I.w-I.h)/2:0,H=m.isRotated?I.h:I.w,E=m.isRotated?I.w:I.h,C=o,t("html,body,.magnify-modal,.magnify-stage,.magnify-button").css("cursor",o+"-resize"),s.on(l+g,O).on(r+g,W)},O=function(e){if((e=e||window.event).preventDefault(),$&&!m.isMaximized){var o="touchmove"===e.type?e.originalEvent.targetTouches[0].pageX:e.clientX,s="touchmove"===e.type?e.originalEvent.targetTouches[0].pageY:e.clientY,h=o-M,l=s-T,r=function(t,i,e){var o=-i+D.w>n?i+D.l:D.l+D.w-n,a=-e+D.h>f?e+D.t:D.t+D.h-f;return{e:{width:Math.max(i+D.w,n)+"px"},s:{height:Math.max(e+D.h,f)+"px"},se:{width:Math.max(i+D.w,n)+"px",height:Math.max(e+D.h,f)+"px"},w:{width:Math.max(-i+D.w,n)+"px",left:o+"px"},n:{height:Math.max(-e+D.h,f)+"px",top:a+"px"},nw:{width:Math.max(-i+D.w,n)+"px",height:Math.max(-e+D.h,f)+"px",top:a+"px",left:o+"px"},ne:{width:Math.max(i+D.w,n)+"px",height:Math.max(-e+D.h,f)+"px",top:a+"px"},sw:{width:Math.max(-i+D.w,n)+"px",height:Math.max(e+D.h,f)+"px",left:o+"px"}}[t]}(C,h,l);t(i).css(r);var g=function(i,e,o){var s=e+D.w>n?k.w-H+e-R:n-(D.w-k.w)-H-R,h=o+D.h>f?k.h-E+o+R:f-(D.h-k.h)-E+R,l=-e+D.w>n?k.w-H-e-R:n-(D.w-k.w)-H-R,r=-o+D.h>f?k.h-E-o+R:f-(D.h-k.h)-E+R,g=(s>0?t(a).position().left:t(a).position().left<0?t(a).position().left:0)-R,d=(h>0?t(a).position().top:t(a).position().top<0?t(a).position().top:0)+R,m=(l>0?t(a).position().left:t(a).position().left<0?t(a).position().left:0)-R,c=(r>0?t(a).position().top:t(a).position().top<0?t(a).position().top:0)+R;return{e:{left:s>=-R?(s-R)/2+"px":g>s?g+"px":s+"px"},s:{top:h>=R?(h+R)/2+"px":d>h?d+"px":h+"px"},se:{top:h>=R?(h+R)/2+"px":d>h?d+"px":h+"px",left:s>=-R?(s-R)/2+"px":g>s?g+"px":s+"px"},w:{left:l>=-R?(l-R)/2+"px":m>l?m+"px":l+"px"},n:{top:r>=R?(r+R)/2+"px":c>r?c+"px":r+"px"},nw:{top:r>=R?(r+R)/2+"px":c>r?c+"px":r+"px",left:l>=-R?(l-R)/2+"px":m>l?m+"px":l+"px"},ne:{top:r>=R?(r+R)/2+"px":c>r?c+"px":r+"px",left:s>=-R?(s-R)/2+"px":g>s?g+"px":s+"px"},sw:{top:h>=R?(h+R)/2+"px":d>h?d+"px":h+"px",left:l>=-R?(l-R)/2+"px":m>l?m+"px":l+"px"}}[i]}(C,h,l);t(a).css(g)}},W=function(i){s.off(l+g,O).off(r+g,W),d.isResizing&&o({w:H,h:E},{w:t(e).width(),h:t(e).height()},e),$=!1,d.isResizing=!1,t("html,body,.magnify-modal,.magnify-stage,.magnify-button").css("cursor","")};t.each(z,function(t,i){i.on(h+g,function(i){S(t,i)})})}})}); | ||
| d=u<=l.h?(l.h-m)/2:d>c?c:d>_-c?d:_-c,f=p<=l.w?(l.w-g)/2:f>-c?-c:f>y+c?f:y+c,n.css({width:Math.round(g)+"px",height:Math.round(m)+"px",left:Math.round(f)+"px",top:Math.round(d)+"px"}),o()&&n.find("group").css({width:Math.ceil(g)+"px",height:Math.ceil(m)+"px"}),t.extend(this.imageData,{width:g,height:m,left:f,top:d}),a({w:Math.round(p),h:Math.round(u)},{w:l.w,h:l.h},this.$stage)},rotate:function(t){this.rotateAngle=this.rotateAngle+t,this.rotateAngle/90%2==0?this.isRotated=!1:this.isRotated=!0,this.rotateTo(this.rotateAngle)},rotateTo:function(t){(o()?this.$stage.find(".magnify-image"):this.$image).rotate({angle:t}),this.setImageSize({width:this.imageData.originalWidth,height:this.imageData.originalHeight}),this.$stage.removeClass("is-grab")},resize:function(){var t=this;return function(t,i){var e=null;return function(){var a=this,s=arguments;clearTimeout(e),e=setTimeout(function(){t.apply(a,s)},i)}}(function(){t.isOpened&&(t.isMaximized?t.setImageSize({width:t.imageData.originalWidth,height:t.imageData.originalHeight}):t.setModalSize({width:t.imageData.originalWidth,height:t.imageData.originalHeight}))},500)},maximize:function(){this.isMaximized?(this.$magnify.removeClass("magnify-maximize"),this.$magnify.css({width:this.modalData.width?this.modalData.width:this.options.modalWidth,height:this.modalData.height?this.modalData.height:this.options.modalHeight,left:this.modalData.left?this.modalData.left:(n.width()-this.options.modalWidth)/2+h.scrollLeft(),top:this.modalData.top?this.modalData.top:(n.height()-this.options.modalHeight)/2+h.scrollTop()}),this.isMaximized=!1):(this.modalData={width:this.$magnify.width(),height:this.$magnify.height(),left:this.$magnify.offset().left,top:this.$magnify.offset().top},this.$magnify.addClass("magnify-maximize"),this.$magnify.css({width:"100%",height:"100%",left:0,top:0}),this.isMaximized=!0),this.setImageSize({width:this.imageData.originalWidth,height:this.imageData.originalHeight})},fullscreen:function(){!function(t){t.requestFullscreen?t.requestFullscreen():t.mozRequestFullScreen?t.mozRequestFullScreen():t.webkitRequestFullscreen?t.webkitRequestFullscreen():t.msRequestFullscreen&&t.msRequestFullscreen()}(this.$magnify[0])},keydown:function(t){if(!this.options.keyboard)return!1;var i=t.keyCode||t.which||t.charCode,e=t.ctrlKey||t.metaKey,a=t.altKey||t.metaKey;switch(i){case 37:this.jump(-1);break;case 39:this.jump(1);break;case 187:this.zoom(3*this.options.ratioThreshold,{x:this.$stage.width()/2,y:this.$stage.height()/2},t);break;case 189:this.zoom(3*-this.options.ratioThreshold,{x:this.$stage.width()/2,y:this.$stage.height()/2},t);break;case 61:this.zoom(3*this.options.ratioThreshold,{x:this.$stage.width()/2,y:this.$stage.height()/2},t);break;case 173:this.zoom(3*-this.options.ratioThreshold,{x:this.$stage.width()/2,y:this.$stage.height()/2},t);break;case 48:e&&a&&this.zoomTo(1,{x:this.$stage.width()/2,y:this.$stage.height()/2},t);break;case 188:e&&this.rotate(-90);break;case 190:e&&this.rotate(90)}},addEvents:function(){var t=this;this.$close.off("click.magnify").on("click.magnify",function(i){t.close()}),this.$stage.off("wheel mousewheel DOMMouseScroll.magnify").on("wheel mousewheel DOMMouseScroll.magnify",function(i){t.wheel(i)}),this.$zoomIn.off("click.magnify").on("click.magnify",function(i){t.zoom(3*t.options.ratioThreshold,{x:t.$stage.width()/2,y:t.$stage.height()/2},i)}),this.$zoomOut.off("click.magnify").on("click.magnify",function(i){t.zoom(3*-t.options.ratioThreshold,{x:t.$stage.width()/2,y:t.$stage.height()/2},i)}),this.$actualSize.off("click.magnify").on("click.magnify",function(i){t.zoomTo(1,{x:t.$stage.width()/2,y:t.$stage.height()/2},i)}),this.$prev.off("click.magnify").on("click.magnify",function(){t.jump(-1)}),this.$fullscreen.off("click.magnify").on("click.magnify",function(){t.fullscreen()}),this.$next.off("click.magnify").on("click.magnify",function(){t.jump(1)}),this.$rotateLeft.off("click.magnify").on("click.magnify",function(){t.rotate(-90)}),this.$rotateRight.off("click.magnify").on("click.magnify",function(){t.rotate(90)}),this.$maximize.off("click.magnify").on("click.magnify",function(){t.maximize()}),h.off("keydown.magnify").on("keydown.magnify",function(i){t.keydown(i)}),n.on("resize.magnify",t.resize())},_triggerHook:function(i,e){this.options.callbacks[i]&&this.options.callbacks[i].apply(this,t.isArray(e)?e:[e])}},t.fn.magnify=function(i){c=t(this);for(var e in i)"string"!=typeof i[e]||isNaN(i[e])||(i[e]=parseFloat(i[e]));var a=t.extend(!0,{},f,i);return d.zIndex=a.zIndex,"string"==typeof i||("dblclick"===a.initEvent&&c.off("click.magnify").on("click.magnify",function(t){t.preventDefault(),t.stopPropagation()}),c.off(a.initEvent+m).on(a.initEvent+m,function(e){e.preventDefault(),e.stopPropagation(),t(this).data("magnify",new p(this,i))})),c},h.on("click.magnify","[data-magnify]",function(i){c=t("[data-magnify]"),i.preventDefault(),t(this).data("magnify",new p(this,f))});t.extend(p.prototype,{draggable:function(i,e,a){var s=this,o=!1,n=0,f=0,c=0,p=0,u=function(e){if((e=e||window.event).preventDefault(),o&&!d.isMoving&&!d.isResizing&&!s.isMaximized){var a="touchmove"===e.type?e.originalEvent.targetTouches[0].pageX:e.clientX,h="touchmove"===e.type?e.originalEvent.targetTouches[0].pageY:e.clientY,r=a-n,l=h-f;t(i).css({left:r+c+"px",top:l+p+"px"})}},y=function(t){h.off(l+m,u).off(g+m,y),o=!1};t(e).on(r+m,function(e){if(e=e||window.event,s.options.multiInstances&&i.css("z-index",++d.zIndex),t(e.target).closest(a).length)return!0;o=!0,n="touchstart"===e.type?e.originalEvent.targetTouches[0].pageX:e.clientX,f="touchstart"===e.type?e.originalEvent.targetTouches[0].pageY:e.clientY,c=t(i).offset().left,p=t(i).offset().top,h.on(l+m,u).on(g+m,y)})}});t.extend(p.prototype,{movable:function(i,e){var a=this,s=!1,n=0,f=0,c=0,p=0,u=0,y=0,_=0,v=function(h){(h=h||window.event).preventDefault();var r=o()?t(i).find(e):t(e);if(s){var l="touchmove"===h.type?h.originalEvent.targetTouches[0].pageX:h.clientX,g="touchmove"===h.type?h.originalEvent.targetTouches[0].pageY:h.clientY,m=l-n,d=g-f,v=m+c,b=d+p;y>0?d+p>_?b=_:d+p<-y+_&&(b=-y+_):b=p,u>0?m+c>-_?v=-_:m+c<-u-_&&(v=-u-_):v=c,r.css({left:v+"px",top:b+"px"}),t.extend(a.imageData,{left:v,top:b})}},b=function(i){h.off(l+m,v).off(g+m,b),s=!1,d.isMoving=!1,t("html,body,.magnify-modal,.magnify-stage,.magnify-button,.magnify-resizable-handle").removeClass("is-grabbing")};t(i).on(r+m,function(r){(r=r||window.event).preventDefault();var x=o()?t(i).find(e):t(e),w=x.width(),z=x.height(),$=t(i).width(),T=t(i).height();n="touchstart"===r.type?r.originalEvent.targetTouches[0].pageX:r.clientX,f="touchstart"===r.type?r.originalEvent.targetTouches[0].pageY:r.clientY,_=a.isRotated?(w-z)/2:0,u=a.isRotated?z-$:w-$,y=a.isRotated?w-T:z-T,s=u>0||y>0,d.isMoving=u>0||y>0,c=x.position().left-(o()?0:_),p=x.position().top+(o()?0:_),i.hasClass("is-grab")&&t("html,body,.magnify-modal,.magnify-stage,.magnify-button,.magnify-resizable-handle").addClass("is-grabbing"),h.on(l+m,v).on(g+m,b)})}});t.extend(p.prototype,{resizable:function(i,e,s,n,f){var c=this,p=t('<div class="magnify-resizable-handle magnify-resizable-handle-e"></div>'),u=t('<div class="magnify-resizable-handle magnify-resizable-handle-w"></div>'),y=t('<div class="magnify-resizable-handle magnify-resizable-handle-s"></div>'),_=t('<div class="magnify-resizable-handle magnify-resizable-handle-n"></div>'),v=t('<div class="magnify-resizable-handle magnify-resizable-handle-se"></div>'),b=t('<div class="magnify-resizable-handle magnify-resizable-handle-sw"></div>'),x=t('<div class="magnify-resizable-handle magnify-resizable-handle-ne"></div>'),w=t('<div class="magnify-resizable-handle magnify-resizable-handle-nw"></div>'),z={e:p,s:y,se:v,n:_,w:u,nw:w,ne:x,sw:b};t(i).append(p,u,y,_,v,b,x,w);var $=!1,T=0,M=0,k={w:0,h:0,l:0,t:0},C={w:0,h:0,l:0,t:0},D={w:0,h:0,l:0,t:0},S=0,E=0,I=0,O="",W=function(a,n){(n=n||window.event).preventDefault();var r=o()?t(e).find(s):t(s);$=!0,d.isResizing=!0,T="touchstart"===n.type?n.originalEvent.targetTouches[0].pageX:n.clientX,M="touchstart"===n.type?n.originalEvent.targetTouches[0].pageY:n.clientY,k={w:t(i).width(),h:t(i).height(),l:t(i).offset().left,t:t(i).offset().top},C={w:t(e).width(),h:t(e).height(),l:t(e).offset().left,t:t(e).offset().top},D={w:r.width(),h:r.height(),l:r.position().left,t:r.position().top},S=c.isRotated?(D.w-D.h)/2:0,E=c.isRotated?D.h:D.w,I=c.isRotated?D.w:D.h,O=a,t("html,body,.magnify-modal,.magnify-stage,.magnify-button").css("cursor",a+"-resize"),h.on(l+m,H).on(g+m,R)},H=function(a){(a=a||window.event).preventDefault();var h=o()?t(e).find(s):t(s);if($&&!c.isMaximized){var r="touchmove"===a.type?a.originalEvent.targetTouches[0].pageX:a.clientX,l="touchmove"===a.type?a.originalEvent.targetTouches[0].pageY:a.clientY,g=r-T,m=l-M,d=function(t,i,e){var a=-i+k.w>n?i+k.l:k.l+k.w-n,s=-e+k.h>f?e+k.t:k.t+k.h-f;return{e:{width:Math.max(i+k.w,n)+"px"},s:{height:Math.max(e+k.h,f)+"px"},se:{width:Math.max(i+k.w,n)+"px",height:Math.max(e+k.h,f)+"px"},w:{width:Math.max(-i+k.w,n)+"px",left:a+"px"},n:{height:Math.max(-e+k.h,f)+"px",top:s+"px"},nw:{width:Math.max(-i+k.w,n)+"px",height:Math.max(-e+k.h,f)+"px",top:s+"px",left:a+"px"},ne:{width:Math.max(i+k.w,n)+"px",height:Math.max(-e+k.h,f)+"px",top:s+"px"},sw:{width:Math.max(-i+k.w,n)+"px",height:Math.max(e+k.h,f)+"px",left:a+"px"}}[t]}(O,g,m);t(i).css(d);var p=function(i,a,h){var r=o()?t(e).find(s):t(s),l=o()?r.position().left+S:r.position().left,g=o()?r.position().top-S:r.position().top,m=a+k.w>n?C.w-E+a-S:n-(k.w-C.w)-E-S,d=h+k.h>f?C.h-I+h+S:f-(k.h-C.h)-I+S,c=-a+k.w>n?C.w-E-a-S:n-(k.w-C.w)-E-S,p=-h+k.h>f?C.h-I-h+S:f-(k.h-C.h)-I+S,u=(m>0?l:l<0?l:0)-S,y=(d>0?g:g<0?g:0)+S,_=(c>0?l:l<0?l:0)-S,v=(p>0?g:g<0?g:0)+S;return{e:{left:m>=-S?(m-S)/2+"px":u>m?u+"px":m+"px"},s:{top:d>=S?(d+S)/2+"px":y>d?y+"px":d+"px"},se:{top:d>=S?(d+S)/2+"px":y>d?y+"px":d+"px",left:m>=-S?(m-S)/2+"px":u>m?u+"px":m+"px"},w:{left:c>=-S?(c-S)/2+"px":_>c?_+"px":c+"px"},n:{top:p>=S?(p+S)/2+"px":v>p?v+"px":p+"px"},nw:{top:p>=S?(p+S)/2+"px":v>p?v+"px":p+"px",left:c>=-S?(c-S)/2+"px":_>c?_+"px":c+"px"},ne:{top:p>=S?(p+S)/2+"px":v>p?v+"px":p+"px",left:m>=-S?(m-S)/2+"px":u>m?u+"px":m+"px"},sw:{top:d>=S?(d+S)/2+"px":y>d?y+"px":d+"px",left:c>=-S?(c-S)/2+"px":_>c?_+"px":c+"px"}}[i]}(O,g,m);h.css(p)}},R=function(i){h.off(l+m,H).off(g+m,R),d.isResizing&&a({w:E,h:I},{w:t(e).width(),h:t(e).height()},e),$=!1,d.isResizing=!1,t("html,body,.magnify-modal,.magnify-stage,.magnify-button").css("cursor","")};t.each(z,function(t,i){i.on(r+m,function(i){W(t,i)})})}})}),function($){for(var supportedCSS,supportedCSSOrigin,styles=document.getElementsByTagName("head")[0].style,toCheck="transformProperty WebkitTransform OTransform msTransform MozTransform".split(" "),a=0;a<toCheck.length;a++)void 0!==styles[toCheck[a]]&&(supportedCSS=toCheck[a]);supportedCSS&&"T"==(supportedCSSOrigin=supportedCSS.replace(/[tT]ransform/,"TransformOrigin"))[0]&&(supportedCSSOrigin[0]="t"),eval('IE = "v"=="\v"'),jQuery.fn.extend({rotate:function(t){if(0!==this.length&&void 0!==t){"number"==typeof t&&(t={angle:t});for(var i=[],e=0,a=this.length;e<a;e++){var s=this.get(e);if(s.Wilq32&&s.Wilq32.PhotoEffect)s.Wilq32.PhotoEffect._handleRotation(t);else{var o=$.extend(!0,{},t),n=new Wilq32.PhotoEffect(s,o)._rootObj;i.push($(n))}}return i}},getRotateAngle:function(){for(var t=[0],i=0,e=this.length;i<e;i++){var a=this.get(i);a.Wilq32&&a.Wilq32.PhotoEffect&&(t[i]=a.Wilq32.PhotoEffect._angle)}return t},stopRotate:function(){for(var t=0,i=this.length;t<i;t++){var e=this.get(t);e.Wilq32&&e.Wilq32.PhotoEffect&&clearTimeout(e.Wilq32.PhotoEffect._timer)}}}),Wilq32=window.Wilq32||{},Wilq32.PhotoEffect=supportedCSS?function(t,i){t.Wilq32={PhotoEffect:this},this._img=this._rootObj=this._eventObj=t,this._handleRotation(i)}:function(t,i){if(this._img=t,this._onLoadDelegate=[i],this._rootObj=document.createElement("span"),this._rootObj.style.display="inline-block",this._rootObj.Wilq32={PhotoEffect:this},t.parentNode.insertBefore(this._rootObj,t),t.complete)this._Loader();else{var e=this;jQuery(this._img).bind("load",function(){e._Loader()})}},Wilq32.PhotoEffect.prototype={_setupParameters:function(t){this._parameters=this._parameters||{},"number"!=typeof this._angle&&(this._angle=0),"number"==typeof t.angle&&(this._angle=t.angle),this._parameters.animateTo="number"==typeof t.animateTo?t.animateTo:this._angle,this._parameters.step=t.step||this._parameters.step||null,this._parameters.easing=t.easing||this._parameters.easing||this._defaultEasing,this._parameters.duration="duration"in t?t.duration:t.duration||this._parameters.duration||1e3,this._parameters.callback=t.callback||this._parameters.callback||this._emptyFunction,this._parameters.center=t.center||this._parameters.center||["50%","50%"],"string"==typeof this._parameters.center[0]?this._rotationCenterX=parseInt(this._parameters.center[0],10)/100*this._imgWidth*this._aspectW:this._rotationCenterX=this._parameters.center[0],"string"==typeof this._parameters.center[1]?this._rotationCenterY=parseInt(this._parameters.center[1],10)/100*this._imgHeight*this._aspectH:this._rotationCenterY=this._parameters.center[1],t.bind&&t.bind!=this._parameters.bind&&this._BindEvents(t.bind)},_emptyFunction:function(){},_defaultEasing:function(t,i,e,a,s){return-a*((i=i/s-1)*i*i*i-1)+e},_handleRotation:function(t,i){supportedCSS||this._img.complete||i?(this._setupParameters(t),this._angle==this._parameters.animateTo?this._rotate(this._angle):this._animateStart()):this._onLoadDelegate.push(t)},_BindEvents:function(t){if(t&&this._eventObj){if(this._parameters.bind){var i=this._parameters.bind;for(var e in i)i.hasOwnProperty(e)&&jQuery(this._eventObj).unbind(e,i[e])}this._parameters.bind=t;for(var e in t)t.hasOwnProperty(e)&&jQuery(this._eventObj).bind(e,t[e])}},_Loader:IE?function(){var t=this._img.width,i=this._img.height;this._imgWidth=t,this._imgHeight=i,this._img.parentNode.removeChild(this._img),this._vimage=this.createVMLNode("image"),this._vimage.src=this._img.src,this._vimage.style.height=i+"px",this._vimage.style.width=t+"px",this._vimage.style.position="absolute",// FIXES IE PROBLEM - its only rendered if its on absolute position! | ||
| this._vimage.style.top="0px",this._vimage.style.left="0px",this._aspectW=this._aspectH=1,this._container=this.createVMLNode("group"),this._container.style.width=t,this._container.style.height=i,this._container.style.position="absolute",this._container.style.top="0px",this._container.style.left="0px",this._container.setAttribute("coordsize",t-1+","+(i-1)),this._container.appendChild(this._vimage),this._rootObj.appendChild(this._container),this._rootObj.style.position="relative",this._rootObj.style.width=t+"px",this._rootObj.style.height=i+"px",this._rootObj.setAttribute("id",this._img.getAttribute("id")),this._rootObj.className=this._img.className,this._eventObj=this._rootObj;for(var e;e=this._onLoadDelegate.shift();)this._handleRotation(e,!0)}:function(){this._rootObj.setAttribute("id",this._img.getAttribute("id")),this._rootObj.className=this._img.className,this._imgWidth=this._img.naturalWidth,this._imgHeight=this._img.naturalHeight;var t=Math.sqrt(this._imgHeight*this._imgHeight+this._imgWidth*this._imgWidth);this._width=3*t,this._height=3*t,this._aspectW=this._img.offsetWidth/this._img.naturalWidth,this._aspectH=this._img.offsetHeight/this._img.naturalHeight,this._img.parentNode.removeChild(this._img),this._canvas=document.createElement("canvas"),this._canvas.setAttribute("width",this._width),this._canvas.style.position="relative",this._canvas.style.left=-this._img.height*this._aspectW+"px",this._canvas.style.top=-this._img.width*this._aspectH+"px",this._canvas.Wilq32=this._rootObj.Wilq32,this._rootObj.appendChild(this._canvas),this._rootObj.style.width=this._img.width*this._aspectW+"px",this._rootObj.style.height=this._img.height*this._aspectH+"px",this._eventObj=this._canvas,this._cnv=this._canvas.getContext("2d");for(var i;i=this._onLoadDelegate.shift();)this._handleRotation(i,!0)},_animateStart:function(){this._timer&&clearTimeout(this._timer),this._animateStartTime=+new Date,this._animateStartAngle=this._angle,this._animate()},_animate:function(){var t=+new Date,i=t-this._animateStartTime>this._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:function(){var t=Math.PI/180;return 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(i){this._angle=i,i=i%360*t,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(i),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("<rvml:"+t+' class="rvml">')}}catch(t){return function(t){return document.createElement("<"+t+' xmlns="urn:schemas-microsoft.com:vml" class="rvml">')}}}())}(jQuery); |
@@ -9,3 +9,3 @@ /*! | ||
| * | ||
| * jquery.magnify - v1.1.0 | ||
| * jquery.magnify - v1.2.0 | ||
| * A jQuery plugin to view images just like in windows | ||
@@ -67,3 +67,3 @@ * https://github.com/nzbin/magnify#readme | ||
| }, delay); | ||
| }; | ||
| } | ||
@@ -84,7 +84,7 @@ } | ||
| success(img); | ||
| }; | ||
| } | ||
| img.onerror = function () { | ||
| error(img); | ||
| }; | ||
| } | ||
@@ -200,2 +200,11 @@ img.src = src; | ||
| /** | ||
| * [isIE8] | ||
| * @return {[Boolean]} [description] | ||
| */ | ||
| 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) | ||
| } | ||
| /** | ||
| * Private Static Constants | ||
@@ -344,3 +353,3 @@ */ | ||
| // modal z-index setting | ||
| zIndex: DEFAULTS.zIndex, | ||
| zIndex: DEFAULTS.zIndex | ||
| }; | ||
@@ -355,3 +364,3 @@ | ||
| */ | ||
| var Magnify = function(el, options) { | ||
| var Magnify = function (el, options) { | ||
@@ -397,3 +406,3 @@ var self = this; | ||
| }; | ||
| } | ||
@@ -405,3 +414,3 @@ /** | ||
| init: function(el, opts) { | ||
| init: function (el, opts) { | ||
@@ -437,14 +446,14 @@ // Get image src | ||
| if (opts.movable) { | ||
| this.movable(this.$stage, this.$image); | ||
| this.movable(this.$stage, isIE8() ? '.magnify-image' : this.$image); | ||
| } | ||
| if (opts.resizable) { | ||
| this.resizable(this.$magnify, this.$stage, this.$image, opts.modalWidth, opts.modalHeight); | ||
| this.resizable(this.$magnify, this.$stage, isIE8() ? '.magnify-image' : this.$image, opts.modalWidth, opts.modalHeight); | ||
| } | ||
| }, | ||
| _creatBtns: function(toolbar, btns) { | ||
| _creatBtns: function (toolbar, btns) { | ||
| var btnsStr = ''; | ||
| $.each(toolbar, function(index, item) { | ||
| $.each(toolbar, function (index, item) { | ||
| btnsStr += btns[item]; | ||
@@ -456,6 +465,6 @@ }); | ||
| }, | ||
| _creatTitle: function() { | ||
| _creatTitle: function () { | ||
| return (this.options.title ? '<div class="magnify-title"></div>' : ''); | ||
| }, | ||
| creatDOM: function() { | ||
| creatDOM: function () { | ||
@@ -501,6 +510,3 @@ var btnsTpl = { | ||
| <div class="magnify-header">\ | ||
| <div class="magnify-toolbar magnify-head-toolbar">' + | ||
| this._creatBtns(this.options.headToolbar, btnsTpl) + '\ | ||
| </div>' + | ||
| this._creatTitle() + '\ | ||
| <div class="magnify-toolbar magnify-head-toolbar">' + this._creatBtns(this.options.headToolbar, btnsTpl) + '</div>' + this._creatTitle() + '\ | ||
| </div>\ | ||
@@ -511,5 +517,3 @@ <div class="magnify-stage">\ | ||
| <div class="magnify-footer">\ | ||
| <div class="magnify-toolbar magnify-foot-toolbar">' + | ||
| this._creatBtns(this.options.footToolbar, btnsTpl) + '\ | ||
| </div>\ | ||
| <div class="magnify-toolbar magnify-foot-toolbar">' + this._creatBtns(this.options.footToolbar, btnsTpl) + '</div>\ | ||
| </div>\ | ||
@@ -521,3 +525,3 @@ </div>'; | ||
| }, | ||
| build: function() { | ||
| build: function () { | ||
@@ -566,3 +570,3 @@ // Create magnify HTML string | ||
| }, | ||
| open: function() { | ||
| open: function () { | ||
@@ -601,3 +605,3 @@ if (!this.options.multiInstances) { | ||
| }, | ||
| close: function(el) { | ||
| close: function (el) { | ||
@@ -635,3 +639,3 @@ this._triggerHook('beforeClose', this.$el); | ||
| }, | ||
| setModalPos: function(modal) { | ||
| setModalPos: function (modal) { | ||
@@ -674,3 +678,3 @@ var winWidth = $W.width(), | ||
| }, | ||
| setModalSize: function(img) { | ||
| setModalSize: function (img) { | ||
@@ -699,3 +703,3 @@ var self = this, | ||
| modalHeight = img.height + getNumFromCSSValue(stageCSS.top) + getNumFromCSSValue(stageCSS.bottom) + | ||
| getNumFromCSSValue(stageCSS.borderTop) + getNumFromCSSValue(stageCSS.borderBottom); | ||
| getNumFromCSSValue(stageCSS.borderTop) + getNumFromCSSValue(stageCSS.borderBottom); | ||
@@ -722,3 +726,3 @@ var gapThreshold = (this.options.gapThreshold > 0 ? this.options.gapThreshold : 0) + 1, | ||
| this.$magnify.animate(modalCSSObj, function() { | ||
| this.$magnify.animate(modalCSSObj, function () { | ||
| self.setImageSize(img); | ||
@@ -737,4 +741,6 @@ }); | ||
| }, | ||
| setImageSize: function(img) { | ||
| setImageSize: function (img) { | ||
| var $image = isIE8() ? this.$stage.find('.magnify-image') : this.$image; | ||
| var stageData = { | ||
@@ -754,3 +760,3 @@ w: this.$stage.width(), | ||
| this.$image.css({ | ||
| $image.css({ | ||
| width: Math.ceil(img.width * scale) + 'px', | ||
@@ -762,2 +768,9 @@ height: Math.ceil(img.height * scale) + 'px', | ||
| if (isIE8()) { | ||
| $image.find('group').css({ | ||
| width: Math.floor(img.width * scale) + 'px', | ||
| height: Math.floor(img.height * scale) + 'px' | ||
| }); | ||
| } | ||
| // Store image initial data | ||
@@ -772,3 +785,3 @@ $.extend(this.imageData, { | ||
| // Set grab cursor | ||
| setGrabCursor({ w: this.$image.width(), h: this.$image.height() }, { w: this.$stage.width(), h: this.$stage.height() }, | ||
| setGrabCursor({ w: $image.width(), h: $image.height() }, { w: this.$stage.width(), h: this.$stage.height() }, | ||
| this.$stage, | ||
@@ -783,7 +796,7 @@ this.isRotated | ||
| if (this.options.initAnimation) { | ||
| this.$image.fadeIn(); | ||
| $image.fadeIn(); | ||
| } | ||
| }, | ||
| loadImg: function(imgSrc) { | ||
| loadImg: function (imgSrc) { | ||
@@ -801,5 +814,9 @@ var self = this; | ||
| this.$image.attr('src', imgSrc); | ||
| if (isIE8()) { | ||
| this.$stage.html('<img class="magnify-image" id="magnify-image" src="' + imgSrc + '" alt="" />') | ||
| } else { | ||
| this.$image.attr('src', imgSrc); | ||
| } | ||
| preloadImg(imgSrc, function(img) { | ||
| preloadImg(imgSrc, function (img) { | ||
@@ -810,3 +827,3 @@ // Store original data | ||
| originalHeight: img.height | ||
| }; | ||
| } | ||
@@ -822,3 +839,3 @@ if (self.isMaximized || (self.isOpened && self.options.fixedModalPos)) { | ||
| }, function() { | ||
| }, function () { | ||
| // loader end | ||
@@ -833,3 +850,3 @@ self.$magnify.find('.magnify-loader').remove(); | ||
| }, | ||
| getImgGroup: function(list, imgSrc) { | ||
| getImgGroup: function (list, imgSrc) { | ||
@@ -840,3 +857,3 @@ var self = this; | ||
| $(list).each(function(index, item) { | ||
| $(list).each(function (index, item) { | ||
@@ -857,3 +874,3 @@ var src = getImgSrc(this); | ||
| }, | ||
| setImgTitle: function(url) { | ||
| setImgTitle: function (url) { | ||
@@ -867,3 +884,3 @@ var index = this.groupIndex, | ||
| }, | ||
| jump: function(index) { | ||
| jump: function (index) { | ||
@@ -875,3 +892,3 @@ this.groupIndex = this.groupIndex + index; | ||
| }, | ||
| jumpTo: function(index) { | ||
| jumpTo: function (index) { | ||
@@ -895,3 +912,3 @@ index = index % this.groupData.length; | ||
| }, | ||
| wheel: function(e) { | ||
| wheel: function (e) { | ||
@@ -922,4 +939,6 @@ e.preventDefault(); | ||
| }, | ||
| zoom: function(ratio, origin, e) { | ||
| zoom: function (ratio, origin, e) { | ||
| this.$image = isIE8() ? this.$stage.find('.magnify-image') : this.$image; | ||
| // zoom out & zoom in | ||
@@ -942,5 +961,5 @@ ratio = ratio < 0 ? (1 / (1 - ratio)) : (1 + ratio); | ||
| }, | ||
| zoomTo: function(ratio, origin, e) { | ||
| zoomTo: function (ratio, origin, e) { | ||
| var $image = this.$image, | ||
| var $image = isIE8() ? this.$stage.find('.magnify-image') : this.$image, | ||
| $stage = this.$stage, | ||
@@ -961,3 +980,3 @@ imgData = { | ||
| y: $stage.offset().top | ||
| }; | ||
| } | ||
@@ -1000,2 +1019,9 @@ var newWidth = this.imageData.originalWidth * ratio, | ||
| if (isIE8()) { | ||
| $image.find('group').css({ | ||
| width: Math.ceil(newWidth) + 'px', | ||
| height: Math.ceil(newHeight) + 'px' | ||
| }); | ||
| } | ||
| // Update image initial data | ||
@@ -1015,3 +1041,3 @@ $.extend(this.imageData, { | ||
| }, | ||
| rotate: function(angle) { | ||
| rotate: function (angle) { | ||
@@ -1029,8 +1055,10 @@ this.rotateAngle = this.rotateAngle + angle; | ||
| }, | ||
| rotateTo: function(angle) { | ||
| rotateTo: function (angle) { | ||
| var self = this; | ||
| var self = this, | ||
| $image = isIE8() ? this.$stage.find('.magnify-image') : this.$image; | ||
| this.$image.css({ | ||
| transform: 'rotate(' + angle + 'deg)' | ||
| // depend on jQueryRotate.js | ||
| $image.rotate({ | ||
| angle: angle | ||
| }); | ||
@@ -1044,7 +1072,7 @@ | ||
| }, | ||
| resize: function() { | ||
| resize: function () { | ||
| var self = this; | ||
| var resizeHandler = throttle(function() { | ||
| var resizeHandler = throttle(function () { | ||
@@ -1066,3 +1094,3 @@ if (self.isOpened) { | ||
| }, | ||
| maximize: function() { | ||
| maximize: function () { | ||
@@ -1108,3 +1136,3 @@ var self = this; | ||
| }, | ||
| fullscreen: function() { | ||
| fullscreen: function () { | ||
@@ -1114,3 +1142,3 @@ requestFullscreen(this.$magnify[0]); | ||
| }, | ||
| keydown: function(e) { | ||
| keydown: function (e) { | ||
@@ -1132,23 +1160,23 @@ var self = this; | ||
| 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 189: | ||
| self.zoom(-self.options.ratioThreshold * 3, { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, e); | ||
| break; | ||
| // + Firefox | ||
| // + Firefox | ||
| case 61: | ||
| self.zoom(self.options.ratioThreshold * 3, { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, e); | ||
| break; | ||
| // - Firefox | ||
| // - Firefox | ||
| case 173: | ||
| self.zoom(-self.options.ratioThreshold * 3, { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, e); | ||
| break; | ||
| // ctrl + alt + 0 | ||
| // ctrl + alt + 0 | ||
| case 48: | ||
@@ -1159,3 +1187,3 @@ if (ctrlKey && altKey) { | ||
| break; | ||
| // ctrl + , | ||
| // ctrl + , | ||
| case 188: | ||
@@ -1166,3 +1194,3 @@ if (ctrlKey) { | ||
| break; | ||
| // ctrl + . | ||
| // ctrl + . | ||
| case 190: | ||
@@ -1177,51 +1205,51 @@ if (ctrlKey) { | ||
| }, | ||
| addEvents: function() { | ||
| addEvents: function () { | ||
| var self = this; | ||
| this.$close.off(CLICK_EVENT + EVENT_NS).on(CLICK_EVENT + EVENT_NS, function(e) { | ||
| 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) { | ||
| 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) { | ||
| 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) { | ||
| 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) { | ||
| 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() { | ||
| 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() { | ||
| 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() { | ||
| 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() { | ||
| 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() { | ||
| 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() { | ||
| 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); | ||
@@ -1233,3 +1261,3 @@ }); | ||
| }, | ||
| _triggerHook: function(e, data) { | ||
| _triggerHook: function (e, data) { | ||
| if (this.options.callbacks[e]) { | ||
@@ -1239,3 +1267,3 @@ this.options.callbacks[e].apply(this, $.isArray(data) ? data : [data]); | ||
| } | ||
| }; | ||
| } | ||
@@ -1246,3 +1274,3 @@ /** | ||
| $.fn.magnify = function(options) { | ||
| $.fn.magnify = function (options) { | ||
@@ -1253,3 +1281,3 @@ jqEl = $(this); | ||
| 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]) | ||
@@ -1273,3 +1301,3 @@ } | ||
| jqEl.off('click' + EVENT_NS).on('click' + EVENT_NS, function(e) { | ||
| jqEl.off('click' + EVENT_NS).on('click' + EVENT_NS, function (e) { | ||
@@ -1284,3 +1312,3 @@ e.preventDefault(); | ||
| jqEl.off(opts.initEvent + EVENT_NS).on(opts.initEvent + EVENT_NS, function(e) { | ||
| jqEl.off(opts.initEvent + EVENT_NS).on(opts.initEvent + EVENT_NS, function (e) { | ||
@@ -1299,3 +1327,3 @@ e.preventDefault(); | ||
| }; | ||
| } | ||
@@ -1305,3 +1333,3 @@ /** | ||
| */ | ||
| $D.on(CLICK_EVENT + EVENT_NS, '[data-magnify]', function(e) { | ||
| $D.on(CLICK_EVENT + EVENT_NS, '[data-magnify]', function (e) { | ||
@@ -1364,3 +1392,3 @@ jqEl = $('[data-magnify]'); | ||
| }; | ||
| } | ||
@@ -1388,3 +1416,3 @@ var dragMove = function (e) { | ||
| }; | ||
| } | ||
@@ -1398,7 +1426,7 @@ var dragEnd = function (e) { | ||
| }; | ||
| } | ||
| $(dragHandle).on(TOUCH_START_EVENT + EVENT_NS, dragStart); | ||
| }; | ||
| } | ||
@@ -1446,4 +1474,6 @@ // Add to Magnify Prototype | ||
| var imageWidth = $(image).width(), | ||
| imageHeight = $(image).height(), | ||
| var $image = isIE8() ? $(stage).find(image) : $(image); | ||
| var imageWidth = $image.width(), | ||
| imageHeight = $image.height(), | ||
| stageWidth = $(stage).width(), | ||
@@ -1468,4 +1498,4 @@ stageHeight = $(stage).height(); | ||
| // Fixed the issue of stage with a border | ||
| left = $(image).position().left - δ; | ||
| top = $(image).position().top + δ; | ||
| left = $image.position().left - (isIE8() ? 0 : δ); | ||
| top = $image.position().top + (isIE8() ? 0 : δ); | ||
@@ -1480,3 +1510,3 @@ // Add grabbing cursor | ||
| }; | ||
| } | ||
@@ -1489,2 +1519,4 @@ var dragMove = function (e) { | ||
| var $image = isIE8() ? $(stage).find(image) : $(image); | ||
| if (isDragging) { | ||
@@ -1526,3 +1558,3 @@ | ||
| $(image).css({ | ||
| $image.css({ | ||
| left: newLeft + 'px', | ||
@@ -1540,3 +1572,3 @@ top: newTop + 'px' | ||
| }; | ||
| } | ||
@@ -1554,7 +1586,7 @@ var dragEnd = function (e) { | ||
| }; | ||
| } | ||
| $(stage).on(TOUCH_START_EVENT + EVENT_NS, dragStart); | ||
| }; | ||
| } | ||
@@ -1603,3 +1635,3 @@ // Add to Magnify Prototype | ||
| 'sw': resizableHandleSW | ||
| }; | ||
| } | ||
@@ -1687,3 +1719,3 @@ $(modal).append( | ||
| return opts[dir]; | ||
| }; | ||
| } | ||
@@ -1693,2 +1725,10 @@ // image CSS options | ||
| 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; | ||
| // Image should not move when modal width to the min width | ||
@@ -1703,7 +1743,7 @@ // The minwidth is modal width, so we should clac the stage minwidth | ||
| // Get image position in dragging | ||
| var imgLeft = (widthDiff > 0 ? $(image).position().left : ($(image).position().left < 0 ? $(image).position().left : 0)) - δ, | ||
| imgTop = (heightDiff > 0 ? $(image).position().top : ($(image).position().top < 0 ? $(image).position().top : 0)) + δ, | ||
| var imgLeft = (widthDiff > 0 ? imgPosLeft : (imgPosLeft < 0 ? imgPosLeft : 0)) - δ, | ||
| imgTop = (heightDiff > 0 ? imgPosTop : (imgPosTop < 0 ? imgPosTop : 0)) + δ, | ||
| imgLeft2 = (widthDiff2 > 0 ? $(image).position().left : ($(image).position().left < 0 ? $(image).position().left : 0)) - δ, | ||
| imgTop2 = (heightDiff2 > 0 ? $(image).position().top : ($(image).position().top < 0 ? $(image).position().top : 0)) + δ; | ||
| imgLeft2 = (widthDiff2 > 0 ? imgPosLeft : (imgPosLeft < 0 ? imgPosLeft : 0)) - δ, | ||
| imgTop2 = (heightDiff2 > 0 ? imgPosTop : (imgPosTop < 0 ? imgPosTop : 0)) + δ; | ||
@@ -1742,3 +1782,3 @@ var opts = { | ||
| return opts[dir]; | ||
| }; | ||
| } | ||
@@ -1751,2 +1791,4 @@ var dragStart = function(dir, e) { | ||
| var $image = isIE8() ? $(stage).find(image) : $(image); | ||
| isDragging = true; | ||
@@ -1764,3 +1806,3 @@ PUBLIC_VARS['isResizing'] = true; | ||
| t: $(modal).offset().top | ||
| }; | ||
| } | ||
@@ -1772,10 +1814,10 @@ stageData = { | ||
| t: $(stage).offset().top | ||
| }; | ||
| } | ||
| imageData = { | ||
| w: $(image).width(), | ||
| h: $(image).height(), | ||
| l: $(image).position().left, | ||
| t: $(image).position().top | ||
| }; | ||
| w: $image.width(), | ||
| h: $image.height(), | ||
| l: $image.position().left, | ||
| t: $image.position().top | ||
| } | ||
@@ -1795,3 +1837,3 @@ // δ is the difference between image width and height | ||
| }; | ||
| } | ||
@@ -1804,2 +1846,4 @@ var dragMove = function(e) { | ||
| var $image = isIE8() ? $(stage).find(image) : $(image); | ||
| if (isDragging && !self.isMaximized) { | ||
@@ -1819,7 +1863,7 @@ | ||
| $(image).css(imageOpts); | ||
| $image.css(imageOpts); | ||
| } | ||
| }; | ||
| } | ||
@@ -1852,3 +1896,3 @@ var dragEnd = function(e) { | ||
| }; | ||
| } | ||
@@ -1861,1 +1905,326 @@ // Add to Magnify Prototype | ||
| }); | ||
| // VERSION: 2.3 LAST UPDATE: 11.07.2013 | ||
| /* | ||
| * Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php | ||
| * | ||
| * Made by Wilq32, wilq32@gmail.com, Wroclaw, Poland, 01.2009 | ||
| * Website: http://jqueryrotate.com | ||
| */ | ||
| (function($) { | ||
| var supportedCSS, supportedCSSOrigin, styles = document.getElementsByTagName("head")[0].style, | ||
| toCheck = "transformProperty WebkitTransform OTransform msTransform MozTransform".split(" "); | ||
| for (var a = 0; a < toCheck.length; a++) | ||
| if (styles[toCheck[a]] !== undefined) { supportedCSS = toCheck[a]; } | ||
| if (supportedCSS) { | ||
| supportedCSSOrigin = supportedCSS.replace(/[tT]ransform/, "TransformOrigin"); | ||
| if (supportedCSSOrigin[0] == "T") supportedCSSOrigin[0] = "t"; | ||
| } | ||
| // Bad eval to preven google closure to remove it from code o_O | ||
| eval('IE = "v"=="\v"'); | ||
| jQuery.fn.extend({ | ||
| rotate: function(parameters) { | ||
| if (this.length === 0 || typeof parameters == "undefined") return; | ||
| if (typeof parameters == "number") parameters = { angle: parameters }; | ||
| var returned = []; | ||
| for (var i = 0, i0 = this.length; i < i0; i++) { | ||
| var element = this.get(i); | ||
| if (!element.Wilq32 || !element.Wilq32.PhotoEffect) { | ||
| var paramClone = $.extend(true, {}, parameters); | ||
| var newRotObject = new Wilq32.PhotoEffect(element, paramClone)._rootObj; | ||
| returned.push($(newRotObject)); | ||
| } else { | ||
| element.Wilq32.PhotoEffect._handleRotation(parameters); | ||
| } | ||
| } | ||
| return returned; | ||
| }, | ||
| getRotateAngle: function() { | ||
| var ret = [0]; | ||
| for (var i = 0, i0 = this.length; i < i0; i++) { | ||
| var element = this.get(i); | ||
| if (element.Wilq32 && element.Wilq32.PhotoEffect) { | ||
| ret[i] = element.Wilq32.PhotoEffect._angle; | ||
| } | ||
| } | ||
| return ret; | ||
| }, | ||
| stopRotate: function() { | ||
| for (var i = 0, i0 = this.length; i < i0; i++) { | ||
| var element = this.get(i); | ||
| if (element.Wilq32 && element.Wilq32.PhotoEffect) { | ||
| clearTimeout(element.Wilq32.PhotoEffect._timer); | ||
| } | ||
| } | ||
| } | ||
| }); | ||
| // Library agnostic interface | ||
| Wilq32 = window.Wilq32 || {}; | ||
| Wilq32.PhotoEffect = (function() { | ||
| if (supportedCSS) { | ||
| return function(img, parameters) { | ||
| img.Wilq32 = { | ||
| PhotoEffect: this | ||
| }; | ||
| this._img = this._rootObj = this._eventObj = img; | ||
| this._handleRotation(parameters); | ||
| } | ||
| } else { | ||
| return function(img, parameters) { | ||
| this._img = img; | ||
| this._onLoadDelegate = [parameters]; | ||
| this._rootObj = document.createElement('span'); | ||
| this._rootObj.style.display = "inline-block"; | ||
| this._rootObj.Wilq32 = { | ||
| PhotoEffect: this | ||
| }; | ||
| img.parentNode.insertBefore(this._rootObj, img); | ||
| if (img.complete) { | ||
| this._Loader(); | ||
| } else { | ||
| var self = this; | ||
| // TODO: Remove jQuery dependency | ||
| jQuery(this._img).bind("load", function() { self._Loader(); }); | ||
| } | ||
| } | ||
| } | ||
| })(); | ||
| Wilq32.PhotoEffect.prototype = { | ||
| _setupParameters: function(parameters) { | ||
| this._parameters = this._parameters || {}; | ||
| if (typeof this._angle !== "number") { this._angle = 0; } | ||
| if (typeof parameters.angle === "number") { this._angle = parameters.angle; } | ||
| this._parameters.animateTo = (typeof parameters.animateTo === "number") ? (parameters.animateTo) : (this._angle); | ||
| this._parameters.step = parameters.step || this._parameters.step || null; | ||
| this._parameters.easing = parameters.easing || this._parameters.easing || this._defaultEasing; | ||
| this._parameters.duration = 'duration' in parameters ? parameters.duration : parameters.duration || this._parameters.duration || 1000; | ||
| this._parameters.callback = parameters.callback || this._parameters.callback || this._emptyFunction; | ||
| this._parameters.center = parameters.center || this._parameters.center || ["50%", "50%"]; | ||
| if (typeof this._parameters.center[0] == "string") { | ||
| this._rotationCenterX = (parseInt(this._parameters.center[0], 10) / 100) * this._imgWidth * this._aspectW; | ||
| } else { | ||
| this._rotationCenterX = this._parameters.center[0]; | ||
| } | ||
| if (typeof this._parameters.center[1] == "string") { | ||
| this._rotationCenterY = (parseInt(this._parameters.center[1], 10) / 100) * this._imgHeight * this._aspectH; | ||
| } else { | ||
| this._rotationCenterY = this._parameters.center[1]; | ||
| } | ||
| if (parameters.bind && parameters.bind != this._parameters.bind) { this._BindEvents(parameters.bind); } | ||
| }, | ||
| _emptyFunction: function() {}, | ||
| _defaultEasing: function(x, t, b, c, d) { return -c * ((t = t / d - 1) * t * t * t - 1) + b }, | ||
| _handleRotation: function(parameters, dontcheck) { | ||
| if (!supportedCSS && !this._img.complete && !dontcheck) { | ||
| this._onLoadDelegate.push(parameters); | ||
| return; | ||
| } | ||
| this._setupParameters(parameters); | ||
| if (this._angle == this._parameters.animateTo) { | ||
| this._rotate(this._angle); | ||
| } else { | ||
| this._animateStart(); | ||
| } | ||
| }, | ||
| _BindEvents: function(events) { | ||
| if (events && this._eventObj) { | ||
| // Unbinding previous Events | ||
| if (this._parameters.bind) { | ||
| var oldEvents = this._parameters.bind; | ||
| for (var a in oldEvents) | ||
| if (oldEvents.hasOwnProperty(a)) | ||
| // TODO: Remove jQuery dependency | ||
| jQuery(this._eventObj).unbind(a, oldEvents[a]); | ||
| } | ||
| this._parameters.bind = events; | ||
| for (var a in events) | ||
| if (events.hasOwnProperty(a)) | ||
| // TODO: Remove jQuery dependency | ||
| jQuery(this._eventObj).bind(a, events[a]); | ||
| } | ||
| }, | ||
| _Loader: (function() { | ||
| if (IE) | ||
| return function() { | ||
| var width = this._img.width; | ||
| var height = this._img.height; | ||
| this._imgWidth = width; | ||
| this._imgHeight = height; | ||
| this._img.parentNode.removeChild(this._img); | ||
| this._vimage = this.createVMLNode('image'); | ||
| this._vimage.src = this._img.src; | ||
| this._vimage.style.height = height + "px"; | ||
| this._vimage.style.width = width + "px"; | ||
| this._vimage.style.position = "absolute"; // FIXES IE PROBLEM - its only rendered if its on absolute position! | ||
| this._vimage.style.top = "0px"; | ||
| this._vimage.style.left = "0px"; | ||
| this._aspectW = this._aspectH = 1; | ||
| /* Group minifying a small 1px precision problem when rotating object */ | ||
| this._container = this.createVMLNode('group'); | ||
| this._container.style.width = width; | ||
| this._container.style.height = height; | ||
| this._container.style.position = "absolute"; | ||
| this._container.style.top = "0px"; | ||
| this._container.style.left = "0px"; | ||
| this._container.setAttribute('coordsize', width - 1 + ',' + (height - 1)); // This -1, -1 trying to fix ugly problem with small displacement on IE | ||
| this._container.appendChild(this._vimage); | ||
| this._rootObj.appendChild(this._container); | ||
| this._rootObj.style.position = "relative"; // FIXES IE PROBLEM | ||
| this._rootObj.style.width = width + "px"; | ||
| this._rootObj.style.height = height + "px"; | ||
| this._rootObj.setAttribute('id', this._img.getAttribute('id')); | ||
| this._rootObj.className = this._img.className; | ||
| this._eventObj = this._rootObj; | ||
| var parameters; | ||
| while (parameters = this._onLoadDelegate.shift()) { | ||
| this._handleRotation(parameters, true); | ||
| } | ||
| } | ||
| else return function() { | ||
| this._rootObj.setAttribute('id', this._img.getAttribute('id')); | ||
| this._rootObj.className = this._img.className; | ||
| this._imgWidth = this._img.naturalWidth; | ||
| this._imgHeight = this._img.naturalHeight; | ||
| var _widthMax = Math.sqrt((this._imgHeight) * (this._imgHeight) + (this._imgWidth) * (this._imgWidth)); | ||
| this._width = _widthMax * 3; | ||
| this._height = _widthMax * 3; | ||
| this._aspectW = this._img.offsetWidth / this._img.naturalWidth; | ||
| this._aspectH = this._img.offsetHeight / this._img.naturalHeight; | ||
| this._img.parentNode.removeChild(this._img); | ||
| this._canvas = document.createElement('canvas'); | ||
| this._canvas.setAttribute('width', this._width); | ||
| this._canvas.style.position = "relative"; | ||
| this._canvas.style.left = -this._img.height * this._aspectW + "px"; | ||
| this._canvas.style.top = -this._img.width * this._aspectH + "px"; | ||
| this._canvas.Wilq32 = this._rootObj.Wilq32; | ||
| this._rootObj.appendChild(this._canvas); | ||
| this._rootObj.style.width = this._img.width * this._aspectW + "px"; | ||
| this._rootObj.style.height = this._img.height * this._aspectH + "px"; | ||
| this._eventObj = this._canvas; | ||
| this._cnv = this._canvas.getContext('2d'); | ||
| var parameters; | ||
| while (parameters = this._onLoadDelegate.shift()) { | ||
| this._handleRotation(parameters, true); | ||
| } | ||
| } | ||
| })(), | ||
| _animateStart: function() { | ||
| if (this._timer) { | ||
| clearTimeout(this._timer); | ||
| } | ||
| this._animateStartTime = +new Date; | ||
| this._animateStartAngle = this._angle; | ||
| this._animate(); | ||
| }, | ||
| _animate: function() { | ||
| var actualTime = +new Date; | ||
| var checkEnd = actualTime - this._animateStartTime > this._parameters.duration; | ||
| // TODO: Bug for animatedGif for static rotation ? (to test) | ||
| if (checkEnd && !this._parameters.animatedGif) { | ||
| clearTimeout(this._timer); | ||
| } else { | ||
| if (this._canvas || this._vimage || this._img) { | ||
| var angle = this._parameters.easing(0, actualTime - this._animateStartTime, this._animateStartAngle, this._parameters.animateTo - this._animateStartAngle, this._parameters.duration); | ||
| this._rotate((~~(angle * 10)) / 10); | ||
| } | ||
| if (this._parameters.step) { | ||
| this._parameters.step(this._angle); | ||
| } | ||
| var self = this; | ||
| this._timer = setTimeout(function() { | ||
| self._animate.call(self); | ||
| }, 10); | ||
| } | ||
| // To fix Bug that prevents using recursive function in callback I moved this function to back | ||
| if (this._parameters.callback && checkEnd) { | ||
| this._angle = this._parameters.animateTo; | ||
| this._rotate(this._angle); | ||
| this._parameters.callback.call(this._rootObj); | ||
| } | ||
| }, | ||
| _rotate: (function() { | ||
| var rad = Math.PI / 180; | ||
| if (IE) | ||
| return function(angle) { | ||
| this._angle = angle; | ||
| this._container.style.rotation = (angle % 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"; | ||
| } | ||
| else if (supportedCSS) | ||
| return function(angle) { | ||
| this._angle = angle; | ||
| this._img.style[supportedCSS] = "rotate(" + (angle % 360) + "deg)"; | ||
| this._img.style[supportedCSSOrigin] = this._parameters.center.join(" "); | ||
| } | ||
| else | ||
| return function(angle) { | ||
| this._angle = angle; | ||
| angle = (angle % 360) * rad; | ||
| // clear canvas | ||
| this._canvas.width = this._width; //+this._widthAdd; | ||
| this._canvas.height = this._height; //+this._heightAdd; | ||
| // REMEMBER: all drawings are read from backwards.. so first function is translate, then rotate, then translate, translate.. | ||
| this._cnv.translate(this._imgWidth * this._aspectW, this._imgHeight * this._aspectH); // at least center image on screen | ||
| this._cnv.translate(this._rotationCenterX, this._rotationCenterY); // we move image back to its orginal | ||
| this._cnv.rotate(angle); // rotate image | ||
| this._cnv.translate(-this._rotationCenterX, -this._rotationCenterY); // move image to its center, so we can rotate around its center | ||
| this._cnv.scale(this._aspectW, this._aspectH); // SCALE - if needed ;) | ||
| this._cnv.drawImage(this._img, 0, 0); // First - we draw image | ||
| } | ||
| })() | ||
| } | ||
| if (IE) { | ||
| Wilq32.PhotoEffect.prototype.createVMLNode = (function() { | ||
| document.createStyleSheet().addRule(".rvml", "behavior:url(#default#VML)"); | ||
| try { | ||
| !document.namespaces.rvml && document.namespaces.add("rvml", "urn:schemas-microsoft-com:vml"); | ||
| return function(tagName) { | ||
| return document.createElement('<rvml:' + tagName + ' class="rvml">'); | ||
| }; | ||
| } catch (e) { | ||
| return function(tagName) { | ||
| return document.createElement('<' + tagName + ' xmlns="urn:schemas-microsoft.com:vml" class="rvml">'); | ||
| }; | ||
| } | ||
| })(); | ||
| } | ||
| })(jQuery); |
| { | ||
| "name": "jquery.magnify", | ||
| "version": "1.1.0", | ||
| "version": "1.2.0", | ||
| "description": "A jQuery plugin to view images just like in Windows", | ||
@@ -38,3 +38,3 @@ "main": "magnify.js", | ||
| "build:css": "run-s sass", | ||
| "build:js": "concat -o dist/jquery.magnify.js src/js/intro.js src/js/utilities.js src/js/core.js src/js/draggable.js src/js/movable.js src/js/resizable.js src/js/outro.js", | ||
| "build:js": "concat -o dist/jquery.magnify.js src/js/intro.js src/js/utilities.js src/js/core.js src/js/draggable.js src/js/movable.js src/js/resizable.js src/js/outro.js src/js/rotate.js", | ||
| "compress": "run-s compress:css compress:js", | ||
@@ -41,0 +41,0 @@ "compress:css": "run-s sassmin autoprefixer", |
@@ -13,3 +13,2 @@ > ⚠️ Attention! This repository will not be maintained. The plugin is easy to use, but its customization can be troublesome. To improve plugin's flexibility, I made another repository [PhotoViewer](https://github.com/nzbin/photoviewer) which is the enhanced version of Magnify. | ||
| > If you want to support IE8, please goto [magnify-lower](https://github.com/nzbin/magnify-lower/). | ||
@@ -27,5 +26,5 @@ ## Main Features | ||
| - Multiple instances. | ||
| - Browser support. | ||
| - Browser support (IE7+). | ||
| ## Install | ||
| ## Installing | ||
@@ -32,0 +31,0 @@ You can install the plugin via npm |
@@ -145,3 +145,3 @@ /** | ||
| // modal z-index setting | ||
| zIndex: DEFAULTS.zIndex, | ||
| zIndex: DEFAULTS.zIndex | ||
| }; | ||
@@ -156,3 +156,3 @@ | ||
| */ | ||
| var Magnify = function(el, options) { | ||
| var Magnify = function (el, options) { | ||
@@ -198,3 +198,3 @@ var self = this; | ||
| }; | ||
| } | ||
@@ -206,3 +206,3 @@ /** | ||
| init: function(el, opts) { | ||
| init: function (el, opts) { | ||
@@ -238,14 +238,14 @@ // Get image src | ||
| if (opts.movable) { | ||
| this.movable(this.$stage, this.$image); | ||
| this.movable(this.$stage, isIE8() ? '.magnify-image' : this.$image); | ||
| } | ||
| if (opts.resizable) { | ||
| this.resizable(this.$magnify, this.$stage, this.$image, opts.modalWidth, opts.modalHeight); | ||
| this.resizable(this.$magnify, this.$stage, isIE8() ? '.magnify-image' : this.$image, opts.modalWidth, opts.modalHeight); | ||
| } | ||
| }, | ||
| _creatBtns: function(toolbar, btns) { | ||
| _creatBtns: function (toolbar, btns) { | ||
| var btnsStr = ''; | ||
| $.each(toolbar, function(index, item) { | ||
| $.each(toolbar, function (index, item) { | ||
| btnsStr += btns[item]; | ||
@@ -257,6 +257,6 @@ }); | ||
| }, | ||
| _creatTitle: function() { | ||
| _creatTitle: function () { | ||
| return (this.options.title ? '<div class="magnify-title"></div>' : ''); | ||
| }, | ||
| creatDOM: function() { | ||
| creatDOM: function () { | ||
@@ -302,6 +302,3 @@ var btnsTpl = { | ||
| <div class="magnify-header">\ | ||
| <div class="magnify-toolbar magnify-head-toolbar">' + | ||
| this._creatBtns(this.options.headToolbar, btnsTpl) + '\ | ||
| </div>' + | ||
| this._creatTitle() + '\ | ||
| <div class="magnify-toolbar magnify-head-toolbar">' + this._creatBtns(this.options.headToolbar, btnsTpl) + '</div>' + this._creatTitle() + '\ | ||
| </div>\ | ||
@@ -312,5 +309,3 @@ <div class="magnify-stage">\ | ||
| <div class="magnify-footer">\ | ||
| <div class="magnify-toolbar magnify-foot-toolbar">' + | ||
| this._creatBtns(this.options.footToolbar, btnsTpl) + '\ | ||
| </div>\ | ||
| <div class="magnify-toolbar magnify-foot-toolbar">' + this._creatBtns(this.options.footToolbar, btnsTpl) + '</div>\ | ||
| </div>\ | ||
@@ -322,3 +317,3 @@ </div>'; | ||
| }, | ||
| build: function() { | ||
| build: function () { | ||
@@ -367,3 +362,3 @@ // Create magnify HTML string | ||
| }, | ||
| open: function() { | ||
| open: function () { | ||
@@ -402,3 +397,3 @@ if (!this.options.multiInstances) { | ||
| }, | ||
| close: function(el) { | ||
| close: function (el) { | ||
@@ -436,3 +431,3 @@ this._triggerHook('beforeClose', this.$el); | ||
| }, | ||
| setModalPos: function(modal) { | ||
| setModalPos: function (modal) { | ||
@@ -475,3 +470,3 @@ var winWidth = $W.width(), | ||
| }, | ||
| setModalSize: function(img) { | ||
| setModalSize: function (img) { | ||
@@ -500,3 +495,3 @@ var self = this, | ||
| modalHeight = img.height + getNumFromCSSValue(stageCSS.top) + getNumFromCSSValue(stageCSS.bottom) + | ||
| getNumFromCSSValue(stageCSS.borderTop) + getNumFromCSSValue(stageCSS.borderBottom); | ||
| getNumFromCSSValue(stageCSS.borderTop) + getNumFromCSSValue(stageCSS.borderBottom); | ||
@@ -523,3 +518,3 @@ var gapThreshold = (this.options.gapThreshold > 0 ? this.options.gapThreshold : 0) + 1, | ||
| this.$magnify.animate(modalCSSObj, function() { | ||
| this.$magnify.animate(modalCSSObj, function () { | ||
| self.setImageSize(img); | ||
@@ -538,4 +533,6 @@ }); | ||
| }, | ||
| setImageSize: function(img) { | ||
| setImageSize: function (img) { | ||
| var $image = isIE8() ? this.$stage.find('.magnify-image') : this.$image; | ||
| var stageData = { | ||
@@ -555,3 +552,3 @@ w: this.$stage.width(), | ||
| this.$image.css({ | ||
| $image.css({ | ||
| width: Math.ceil(img.width * scale) + 'px', | ||
@@ -563,2 +560,9 @@ height: Math.ceil(img.height * scale) + 'px', | ||
| if (isIE8()) { | ||
| $image.find('group').css({ | ||
| width: Math.floor(img.width * scale) + 'px', | ||
| height: Math.floor(img.height * scale) + 'px' | ||
| }); | ||
| } | ||
| // Store image initial data | ||
@@ -573,3 +577,3 @@ $.extend(this.imageData, { | ||
| // Set grab cursor | ||
| setGrabCursor({ w: this.$image.width(), h: this.$image.height() }, { w: this.$stage.width(), h: this.$stage.height() }, | ||
| setGrabCursor({ w: $image.width(), h: $image.height() }, { w: this.$stage.width(), h: this.$stage.height() }, | ||
| this.$stage, | ||
@@ -584,7 +588,7 @@ this.isRotated | ||
| if (this.options.initAnimation) { | ||
| this.$image.fadeIn(); | ||
| $image.fadeIn(); | ||
| } | ||
| }, | ||
| loadImg: function(imgSrc) { | ||
| loadImg: function (imgSrc) { | ||
@@ -602,5 +606,9 @@ var self = this; | ||
| this.$image.attr('src', imgSrc); | ||
| if (isIE8()) { | ||
| this.$stage.html('<img class="magnify-image" id="magnify-image" src="' + imgSrc + '" alt="" />') | ||
| } else { | ||
| this.$image.attr('src', imgSrc); | ||
| } | ||
| preloadImg(imgSrc, function(img) { | ||
| preloadImg(imgSrc, function (img) { | ||
@@ -611,3 +619,3 @@ // Store original data | ||
| originalHeight: img.height | ||
| }; | ||
| } | ||
@@ -623,3 +631,3 @@ if (self.isMaximized || (self.isOpened && self.options.fixedModalPos)) { | ||
| }, function() { | ||
| }, function () { | ||
| // loader end | ||
@@ -634,3 +642,3 @@ self.$magnify.find('.magnify-loader').remove(); | ||
| }, | ||
| getImgGroup: function(list, imgSrc) { | ||
| getImgGroup: function (list, imgSrc) { | ||
@@ -641,3 +649,3 @@ var self = this; | ||
| $(list).each(function(index, item) { | ||
| $(list).each(function (index, item) { | ||
@@ -658,3 +666,3 @@ var src = getImgSrc(this); | ||
| }, | ||
| setImgTitle: function(url) { | ||
| setImgTitle: function (url) { | ||
@@ -668,3 +676,3 @@ var index = this.groupIndex, | ||
| }, | ||
| jump: function(index) { | ||
| jump: function (index) { | ||
@@ -676,3 +684,3 @@ this.groupIndex = this.groupIndex + index; | ||
| }, | ||
| jumpTo: function(index) { | ||
| jumpTo: function (index) { | ||
@@ -696,3 +704,3 @@ index = index % this.groupData.length; | ||
| }, | ||
| wheel: function(e) { | ||
| wheel: function (e) { | ||
@@ -723,4 +731,6 @@ e.preventDefault(); | ||
| }, | ||
| zoom: function(ratio, origin, e) { | ||
| zoom: function (ratio, origin, e) { | ||
| this.$image = isIE8() ? this.$stage.find('.magnify-image') : this.$image; | ||
| // zoom out & zoom in | ||
@@ -743,5 +753,5 @@ ratio = ratio < 0 ? (1 / (1 - ratio)) : (1 + ratio); | ||
| }, | ||
| zoomTo: function(ratio, origin, e) { | ||
| zoomTo: function (ratio, origin, e) { | ||
| var $image = this.$image, | ||
| var $image = isIE8() ? this.$stage.find('.magnify-image') : this.$image, | ||
| $stage = this.$stage, | ||
@@ -762,3 +772,3 @@ imgData = { | ||
| y: $stage.offset().top | ||
| }; | ||
| } | ||
@@ -801,2 +811,9 @@ var newWidth = this.imageData.originalWidth * ratio, | ||
| if (isIE8()) { | ||
| $image.find('group').css({ | ||
| width: Math.ceil(newWidth) + 'px', | ||
| height: Math.ceil(newHeight) + 'px' | ||
| }); | ||
| } | ||
| // Update image initial data | ||
@@ -816,3 +833,3 @@ $.extend(this.imageData, { | ||
| }, | ||
| rotate: function(angle) { | ||
| rotate: function (angle) { | ||
@@ -830,8 +847,10 @@ this.rotateAngle = this.rotateAngle + angle; | ||
| }, | ||
| rotateTo: function(angle) { | ||
| rotateTo: function (angle) { | ||
| var self = this; | ||
| var self = this, | ||
| $image = isIE8() ? this.$stage.find('.magnify-image') : this.$image; | ||
| this.$image.css({ | ||
| transform: 'rotate(' + angle + 'deg)' | ||
| // depend on jQueryRotate.js | ||
| $image.rotate({ | ||
| angle: angle | ||
| }); | ||
@@ -845,7 +864,7 @@ | ||
| }, | ||
| resize: function() { | ||
| resize: function () { | ||
| var self = this; | ||
| var resizeHandler = throttle(function() { | ||
| var resizeHandler = throttle(function () { | ||
@@ -867,3 +886,3 @@ if (self.isOpened) { | ||
| }, | ||
| maximize: function() { | ||
| maximize: function () { | ||
@@ -909,3 +928,3 @@ var self = this; | ||
| }, | ||
| fullscreen: function() { | ||
| fullscreen: function () { | ||
@@ -915,3 +934,3 @@ requestFullscreen(this.$magnify[0]); | ||
| }, | ||
| keydown: function(e) { | ||
| keydown: function (e) { | ||
@@ -933,23 +952,23 @@ var self = this; | ||
| 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 189: | ||
| self.zoom(-self.options.ratioThreshold * 3, { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, e); | ||
| break; | ||
| // + Firefox | ||
| // + Firefox | ||
| case 61: | ||
| self.zoom(self.options.ratioThreshold * 3, { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, e); | ||
| break; | ||
| // - Firefox | ||
| // - Firefox | ||
| case 173: | ||
| self.zoom(-self.options.ratioThreshold * 3, { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, e); | ||
| break; | ||
| // ctrl + alt + 0 | ||
| // ctrl + alt + 0 | ||
| case 48: | ||
@@ -960,3 +979,3 @@ if (ctrlKey && altKey) { | ||
| break; | ||
| // ctrl + , | ||
| // ctrl + , | ||
| case 188: | ||
@@ -967,3 +986,3 @@ if (ctrlKey) { | ||
| break; | ||
| // ctrl + . | ||
| // ctrl + . | ||
| case 190: | ||
@@ -978,51 +997,51 @@ if (ctrlKey) { | ||
| }, | ||
| addEvents: function() { | ||
| addEvents: function () { | ||
| var self = this; | ||
| this.$close.off(CLICK_EVENT + EVENT_NS).on(CLICK_EVENT + EVENT_NS, function(e) { | ||
| 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) { | ||
| 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) { | ||
| 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) { | ||
| 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) { | ||
| 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() { | ||
| 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() { | ||
| 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() { | ||
| 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() { | ||
| 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() { | ||
| 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() { | ||
| 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); | ||
@@ -1034,3 +1053,3 @@ }); | ||
| }, | ||
| _triggerHook: function(e, data) { | ||
| _triggerHook: function (e, data) { | ||
| if (this.options.callbacks[e]) { | ||
@@ -1040,3 +1059,3 @@ this.options.callbacks[e].apply(this, $.isArray(data) ? data : [data]); | ||
| } | ||
| }; | ||
| } | ||
@@ -1047,3 +1066,3 @@ /** | ||
| $.fn.magnify = function(options) { | ||
| $.fn.magnify = function (options) { | ||
@@ -1054,3 +1073,3 @@ jqEl = $(this); | ||
| 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]) | ||
@@ -1074,3 +1093,3 @@ } | ||
| jqEl.off('click' + EVENT_NS).on('click' + EVENT_NS, function(e) { | ||
| jqEl.off('click' + EVENT_NS).on('click' + EVENT_NS, function (e) { | ||
@@ -1085,3 +1104,3 @@ e.preventDefault(); | ||
| jqEl.off(opts.initEvent + EVENT_NS).on(opts.initEvent + EVENT_NS, function(e) { | ||
| jqEl.off(opts.initEvent + EVENT_NS).on(opts.initEvent + EVENT_NS, function (e) { | ||
@@ -1100,3 +1119,3 @@ e.preventDefault(); | ||
| }; | ||
| } | ||
@@ -1106,3 +1125,3 @@ /** | ||
| */ | ||
| $D.on(CLICK_EVENT + EVENT_NS, '[data-magnify]', function(e) { | ||
| $D.on(CLICK_EVENT + EVENT_NS, '[data-magnify]', function (e) { | ||
@@ -1109,0 +1128,0 @@ jqEl = $('[data-magnify]'); |
@@ -49,3 +49,3 @@ /** | ||
| }; | ||
| } | ||
@@ -73,3 +73,3 @@ var dragMove = function (e) { | ||
| }; | ||
| } | ||
@@ -83,7 +83,7 @@ var dragEnd = function (e) { | ||
| }; | ||
| } | ||
| $(dragHandle).on(TOUCH_START_EVENT + EVENT_NS, dragStart); | ||
| }; | ||
| } | ||
@@ -90,0 +90,0 @@ // Add to Magnify Prototype |
@@ -9,3 +9,3 @@ /*! | ||
| * | ||
| * jquery.magnify - v1.1.0 | ||
| * jquery.magnify - v1.2.0 | ||
| * A jQuery plugin to view images just like in windows | ||
@@ -12,0 +12,0 @@ * https://github.com/nzbin/magnify#readme |
@@ -37,4 +37,6 @@ /** | ||
| var imageWidth = $(image).width(), | ||
| imageHeight = $(image).height(), | ||
| var $image = isIE8() ? $(stage).find(image) : $(image); | ||
| var imageWidth = $image.width(), | ||
| imageHeight = $image.height(), | ||
| stageWidth = $(stage).width(), | ||
@@ -59,4 +61,4 @@ stageHeight = $(stage).height(); | ||
| // Fixed the issue of stage with a border | ||
| left = $(image).position().left - δ; | ||
| top = $(image).position().top + δ; | ||
| left = $image.position().left - (isIE8() ? 0 : δ); | ||
| top = $image.position().top + (isIE8() ? 0 : δ); | ||
@@ -71,3 +73,3 @@ // Add grabbing cursor | ||
| }; | ||
| } | ||
@@ -80,2 +82,4 @@ var dragMove = function (e) { | ||
| var $image = isIE8() ? $(stage).find(image) : $(image); | ||
| if (isDragging) { | ||
@@ -117,3 +121,3 @@ | ||
| $(image).css({ | ||
| $image.css({ | ||
| left: newLeft + 'px', | ||
@@ -131,3 +135,3 @@ top: newTop + 'px' | ||
| }; | ||
| } | ||
@@ -145,7 +149,7 @@ var dragEnd = function (e) { | ||
| }; | ||
| } | ||
| $(stage).on(TOUCH_START_EVENT + EVENT_NS, dragStart); | ||
| }; | ||
| } | ||
@@ -152,0 +156,0 @@ // Add to Magnify Prototype |
@@ -38,3 +38,3 @@ /** | ||
| 'sw': resizableHandleSW | ||
| }; | ||
| } | ||
@@ -122,3 +122,3 @@ $(modal).append( | ||
| return opts[dir]; | ||
| }; | ||
| } | ||
@@ -128,2 +128,10 @@ // image CSS options | ||
| 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; | ||
| // Image should not move when modal width to the min width | ||
@@ -138,7 +146,7 @@ // The minwidth is modal width, so we should clac the stage minwidth | ||
| // Get image position in dragging | ||
| var imgLeft = (widthDiff > 0 ? $(image).position().left : ($(image).position().left < 0 ? $(image).position().left : 0)) - δ, | ||
| imgTop = (heightDiff > 0 ? $(image).position().top : ($(image).position().top < 0 ? $(image).position().top : 0)) + δ, | ||
| var imgLeft = (widthDiff > 0 ? imgPosLeft : (imgPosLeft < 0 ? imgPosLeft : 0)) - δ, | ||
| imgTop = (heightDiff > 0 ? imgPosTop : (imgPosTop < 0 ? imgPosTop : 0)) + δ, | ||
| imgLeft2 = (widthDiff2 > 0 ? $(image).position().left : ($(image).position().left < 0 ? $(image).position().left : 0)) - δ, | ||
| imgTop2 = (heightDiff2 > 0 ? $(image).position().top : ($(image).position().top < 0 ? $(image).position().top : 0)) + δ; | ||
| imgLeft2 = (widthDiff2 > 0 ? imgPosLeft : (imgPosLeft < 0 ? imgPosLeft : 0)) - δ, | ||
| imgTop2 = (heightDiff2 > 0 ? imgPosTop : (imgPosTop < 0 ? imgPosTop : 0)) + δ; | ||
@@ -177,3 +185,3 @@ var opts = { | ||
| return opts[dir]; | ||
| }; | ||
| } | ||
@@ -186,2 +194,4 @@ var dragStart = function(dir, e) { | ||
| var $image = isIE8() ? $(stage).find(image) : $(image); | ||
| isDragging = true; | ||
@@ -199,3 +209,3 @@ PUBLIC_VARS['isResizing'] = true; | ||
| t: $(modal).offset().top | ||
| }; | ||
| } | ||
@@ -207,10 +217,10 @@ stageData = { | ||
| t: $(stage).offset().top | ||
| }; | ||
| } | ||
| imageData = { | ||
| w: $(image).width(), | ||
| h: $(image).height(), | ||
| l: $(image).position().left, | ||
| t: $(image).position().top | ||
| }; | ||
| w: $image.width(), | ||
| h: $image.height(), | ||
| l: $image.position().left, | ||
| t: $image.position().top | ||
| } | ||
@@ -230,3 +240,3 @@ // δ is the difference between image width and height | ||
| }; | ||
| } | ||
@@ -239,2 +249,4 @@ var dragMove = function(e) { | ||
| var $image = isIE8() ? $(stage).find(image) : $(image); | ||
| if (isDragging && !self.isMaximized) { | ||
@@ -254,7 +266,7 @@ | ||
| $(image).css(imageOpts); | ||
| $image.css(imageOpts); | ||
| } | ||
| }; | ||
| } | ||
@@ -287,3 +299,3 @@ var dragEnd = function(e) { | ||
| }; | ||
| } | ||
@@ -290,0 +302,0 @@ // Add to Magnify Prototype |
@@ -34,3 +34,3 @@ /** | ||
| }, delay); | ||
| }; | ||
| } | ||
@@ -51,7 +51,7 @@ } | ||
| success(img); | ||
| }; | ||
| } | ||
| img.onerror = function () { | ||
| error(img); | ||
| }; | ||
| } | ||
@@ -165,1 +165,10 @@ img.src = src; | ||
| } | ||
| /** | ||
| * [isIE8] | ||
| * @return {[Boolean]} [description] | ||
| */ | ||
| 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) | ||
| } |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
Uses eval
Supply chain riskPackage uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by11.6%
498748
- Number of package files
- increased by2.44%
42
- Lines of code
- increased by12.14%
9402
Worsened metrics
- Number of lines in readme file
- decreased by-0.37%
267
- Number of medium supply chain risk alerts
- increased byInfinity%
3
No dependency changes