From 9237201bf92a1b9719ee110eff5c6a1a52b18398 Mon Sep 17 00:00:00 2001 From: nzbin Date: Mon, 26 Nov 2018 08:41:01 +0800 Subject: [PATCH] chore(release): v1.3.1 --- dist/jquery.magnify.css | 131 +++-- dist/jquery.magnify.css.map | 2 +- dist/jquery.magnify.js | 6 +- dist/jquery.magnify.min.css | 2 +- dist/jquery.magnify.min.css.map | 2 +- dist/jquery.magnify.min.js | 6 +- docs/css/jquery.magnify.css | 2 +- docs/js/jquery.magnify.js | 945 +++++++++++++++++++++----------- package.json | 2 +- src/js/core.js | 2 +- src/js/intro.js | 2 +- src/sass/magnify.scss | 2 +- 12 files changed, 734 insertions(+), 370 deletions(-) diff --git a/dist/jquery.magnify.css b/dist/jquery.magnify.css index e9beed6..0e1ff40 100644 --- a/dist/jquery.magnify.css +++ b/dist/jquery.magnify.css @@ -6,7 +6,7 @@ * | | | | _ | \_/ | |\ |_| |_| | | | * |__| |__|__| |__|\____/|_|__| \__|_____|__| |__| * - * jquery.magnify - v1.3.0 + * jquery.magnify - v1.3.1 * A jQuery plugin to view images just like in windows * https://github.com/nzbin/magnify#readme * @@ -21,7 +21,8 @@ height: 320px; background-color: #111; background-color: rgba(0, 0, 0, 0.85); - box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3); + -webkit-box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3); + box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3); cursor: default; } @@ -54,7 +55,10 @@ line-height: 1; white-space: nowrap; text-overflow: ellipsis; - user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; overflow: hidden; } @@ -101,7 +105,8 @@ display: inline-block; width: 40px; height: 40px; - box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; margin: 0; padding: 10px; font-size: 14px; @@ -158,12 +163,14 @@ position: relative; width: 36px; height: 36px; - box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; border-width: 5px; border-style: solid; border-color: rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.5) rgba(255, 255, 255, 0.5); border-radius: 100%; - animation: magnifyLoading 1s infinite linear; + -webkit-animation: magnifyLoading 1s infinite linear; + animation: magnifyLoading 1s infinite linear; } .magnify-loader::after { @@ -175,38 +182,26 @@ overflow: hidden; } -@keyframes magnifyLoading { +@-webkit-keyframes magnifyLoading { 0% { - transform: rotateZ(0deg) translate3d(0, 0, 0); + -webkit-transform: rotateZ(0deg) translate3d(0, 0, 0); + transform: rotateZ(0deg) translate3d(0, 0, 0); } 100% { - transform: rotateZ(360deg) translate3d(0, 0, 0); + -webkit-transform: rotateZ(360deg) translate3d(0, 0, 0); + transform: rotateZ(360deg) translate3d(0, 0, 0); } } -.image-fit-modal { - text-align: center; - font-size: 0; -} - -.image-fit-modal img { - display: inline-block; - position: relative; - top: initial !important; - left: initial !important; - width: initial !important; - height: initial !important; - max-width: 100%; - max-height: 100%; - vertical-align: middle; -} - -.image-fit-modal::before { - content: ''; - display: inline-block; - height: 100%; - vertical-align: middle; - overflow: hidden; +@keyframes magnifyLoading { + 0% { + -webkit-transform: rotateZ(0deg) translate3d(0, 0, 0); + transform: rotateZ(0deg) translate3d(0, 0, 0); + } + 100% { + -webkit-transform: rotateZ(360deg) translate3d(0, 0, 0); + transform: rotateZ(360deg) translate3d(0, 0, 0); + } } .magnify-resizable-handle { @@ -378,6 +373,27 @@ background-color: #000; } +:-webkit-full-screen { + top: 0 !important; + left: 0 !important; + width: 100% !important; + height: 100% !important; +} + +:-moz-full-screen { + top: 0 !important; + left: 0 !important; + width: 100% !important; + height: 100% !important; +} + +:-ms-fullscreen { + top: 0 !important; + left: 0 !important; + width: 100% !important; + height: 100% !important; +} + :fullscreen { top: 0 !important; left: 0 !important; @@ -385,12 +401,57 @@ height: 100% !important; } +:-webkit-full-screen .magnify-header, +:-webkit-full-screen .magnify-footer, +:-webkit-full-screen .magnify-resizable-handle { + display: none; +} + +:-moz-full-screen .magnify-header, +:-moz-full-screen .magnify-footer, +:-moz-full-screen .magnify-resizable-handle { + display: none; +} + +:-ms-fullscreen .magnify-header, +:-ms-fullscreen .magnify-footer, +:-ms-fullscreen .magnify-resizable-handle { + display: none; +} + :fullscreen .magnify-header, :fullscreen .magnify-footer, :fullscreen .magnify-resizable-handle { display: none; } +:-webkit-full-screen .magnify-stage { + top: 0; + right: 0; + bottom: 0; + left: 0; + border-width: 0; + background-color: #000; +} + +:-moz-full-screen .magnify-stage { + top: 0; + right: 0; + bottom: 0; + left: 0; + border-width: 0; + background-color: #000; +} + +:-ms-fullscreen .magnify-stage { + top: 0; + right: 0; + bottom: 0; + left: 0; + border-width: 0; + background-color: #000; +} + :fullscreen .magnify-stage { top: 0; right: 0; @@ -400,6 +461,10 @@ background-color: #000; } +::-webkit-backdrop { + background-color: #000; +} + ::backdrop { background-color: #000; } @@ -419,3 +484,5 @@ cursor: -webkit-grabbing; cursor: grabbing; } + +/*# sourceMappingURL=jquery.magnify.css.map */ \ No newline at end of file diff --git a/dist/jquery.magnify.css.map b/dist/jquery.magnify.css.map index c8b43d2..0dc3efa 100644 --- a/dist/jquery.magnify.css.map +++ b/dist/jquery.magnify.css.map @@ -1 +1 @@ -{"version":3,"sources":["jquery.magnify.css"],"names":[],"mappings":"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","file":"jquery.magnify.css","sourcesContent":["/*!\n * ___ ___ _____ ______ __ __ _____ ______ __ __\n * | \\/ |/ _ \\ / __ \\| \\ | |_ _| ___| \\ / |\n * | | / \\ | | \\__| \\| | | | | |__ \\ \\/ /\n * | |\\/| | |_| | | ___ | | | | __| \\ /\n * | | | | _ | \\_/ | |\\ |_| |_| | | |\n * |__| |__|__| |__|\\____/|_|__| \\__|_____|__| |__|\n *\n * jquery.magnify - v1.3.0\n * A jQuery plugin to view images just like in windows\n * https://github.com/nzbin/magnify#readme\n *\n * Copyright (c) 2017 nzbin\n * Released under the MIT License\n *\n */\n.magnify-modal {\n position: absolute;\n z-index: 1090;\n width: 320px;\n height: 320px;\n background-color: #111;\n background-color: rgba(0, 0, 0, 0.85);\n box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3);\n cursor: default;\n}\n\n.magnify-maximize {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n\n.magnify-toolbar {\n font-size: 0;\n}\n\n.magnify-header {\n position: relative;\n z-index: 2;\n height: 40px;\n color: #fff;\n}\n\n.magnify-header .magnify-toolbar {\n float: right;\n}\n\n.magnify-title {\n padding: 13px 10px;\n font-size: 14px;\n line-height: 1;\n white-space: nowrap;\n text-overflow: ellipsis;\n user-select: none;\n overflow: hidden;\n}\n\n.magnify-stage {\n position: absolute;\n top: 40px;\n right: 10px;\n bottom: 40px;\n left: 10px;\n z-index: 1;\n border: 1px solid #ccc;\n overflow: hidden;\n}\n\n.magnify-stage.stage-ready {\n text-align: center;\n}\n\n.magnify-image {\n position: relative;\n display: inline-block;\n}\n\n.magnify-image.image-ready {\n max-width: 100%;\n max-height: 100%;\n}\n\n.magnify-footer {\n position: absolute;\n bottom: 0;\n z-index: 2;\n width: 100%;\n height: 40px;\n color: #fff;\n text-align: center;\n}\n\n.magnify-footer .magnify-toolbar {\n display: inline-block;\n}\n\n.magnify-button {\n display: inline-block;\n width: 40px;\n height: 40px;\n box-sizing: border-box;\n margin: 0;\n padding: 10px;\n font-size: 14px;\n color: #ccc;\n line-height: 1;\n text-align: center;\n background: none;\n border-width: 0;\n border-radius: 0;\n cursor: pointer;\n outline: none;\n}\n\n.magnify-button:hover {\n color: #fff;\n}\n\n.magnify-button svg {\n display: inline-block;\n font-size: inherit;\n width: 1em;\n height: 1em;\n overflow: visible;\n vertical-align: -.125em;\n}\n\n.magnify-button-close:hover {\n background-color: #ff4545;\n}\n\n.magnify-button-maximize:hover {\n background-color: #525252;\n}\n\n.magnify-button-minimize:hover {\n background-color: #525252;\n}\n\n.magnify-loader {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 2;\n text-align: center;\n background-color: rgba(0, 0, 0, 0.3);\n color: #333;\n}\n\n.magnify-loader::before {\n content: '';\n display: inline-block;\n position: relative;\n width: 36px;\n height: 36px;\n box-sizing: border-box;\n border-width: 5px;\n border-style: solid;\n border-color: rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.5) rgba(255, 255, 255, 0.5);\n border-radius: 100%;\n animation: magnifyLoading 1s infinite linear;\n}\n\n.magnify-loader::after {\n content: '';\n display: inline-block;\n width: 0;\n height: 100%;\n vertical-align: middle;\n overflow: hidden;\n}\n\n@keyframes magnifyLoading {\n 0% {\n transform: rotateZ(0deg) translate3d(0, 0, 0);\n }\n 100% {\n transform: rotateZ(360deg) translate3d(0, 0, 0);\n }\n}\n\n.magnify-resizable-handle {\n position: absolute;\n z-index: 10;\n}\n\n.magnify-resizable-handle-e {\n top: 0;\n right: -5px;\n bottom: 0;\n left: auto;\n width: 10px;\n cursor: e-resize;\n}\n\n.magnify-resizable-handle-s {\n top: auto;\n right: 0;\n bottom: -5px;\n left: 0;\n height: 10px;\n cursor: s-resize;\n}\n\n.magnify-resizable-handle-w {\n top: 0;\n right: auto;\n bottom: 0;\n left: -5px;\n width: 10px;\n cursor: w-resize;\n}\n\n.magnify-resizable-handle-n {\n top: -5px;\n right: 0;\n bottom: auto;\n left: 0;\n height: 10px;\n cursor: n-resize;\n}\n\n.magnify-resizable-handle-se {\n top: auto;\n right: -5px;\n bottom: -5px;\n left: auto;\n width: 10px;\n height: 10px;\n cursor: se-resize;\n}\n\n.magnify-resizable-handle-sw {\n top: auto;\n right: auto;\n bottom: -5px;\n left: -5px;\n width: 10px;\n height: 10px;\n cursor: sw-resize;\n}\n\n.magnify-resizable-handle-nw {\n top: -5px;\n right: auto;\n bottom: auto;\n left: -5px;\n width: 10px;\n height: 10px;\n cursor: nw-resize;\n}\n\n.magnify-resizable-handle-ne {\n top: -5px;\n right: -5px;\n bottom: auto;\n left: auto;\n width: 10px;\n height: 10px;\n cursor: ne-resize;\n}\n\n:-webkit-full-screen {\n top: 0 !important;\n left: 0 !important;\n width: 100% !important;\n height: 100% !important;\n}\n\n:-webkit-full-screen .magnify-header,\n:-webkit-full-screen .magnify-footer,\n:-webkit-full-screen .magnify-resizable-handle {\n display: none;\n}\n\n:-webkit-full-screen .magnify-stage {\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n border-width: 0;\n background-color: #000;\n}\n\n:-moz-full-screen {\n top: 0 !important;\n left: 0 !important;\n width: 100% !important;\n height: 100% !important;\n}\n\n:-moz-full-screen .magnify-header,\n:-moz-full-screen .magnify-footer,\n:-moz-full-screen .magnify-resizable-handle {\n display: none;\n}\n\n:-moz-full-screen .magnify-stage {\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n border-width: 0;\n background-color: #000;\n}\n\n:-ms-fullscreen {\n top: 0 !important;\n left: 0 !important;\n width: 100% !important;\n height: 100% !important;\n}\n\n:-ms-fullscreen .magnify-header,\n:-ms-fullscreen .magnify-footer,\n:-ms-fullscreen .magnify-resizable-handle {\n display: none;\n}\n\n:-ms-fullscreen .magnify-stage {\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n border-width: 0;\n background-color: #000;\n}\n\n:full-screen {\n top: 0 !important;\n left: 0 !important;\n width: 100% !important;\n height: 100% !important;\n}\n\n:full-screen .magnify-header,\n:full-screen .magnify-footer,\n:full-screen .magnify-resizable-handle {\n display: none;\n}\n\n:full-screen .magnify-stage {\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n border-width: 0;\n background-color: #000;\n}\n\n:fullscreen {\n top: 0 !important;\n left: 0 !important;\n width: 100% !important;\n height: 100% !important;\n}\n\n:fullscreen .magnify-header,\n:fullscreen .magnify-footer,\n:fullscreen .magnify-resizable-handle {\n display: none;\n}\n\n:fullscreen .magnify-stage {\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n border-width: 0;\n background-color: #000;\n}\n\n::backdrop {\n background-color: #000;\n}\n\n::-ms-backdrop {\n background-color: #000;\n}\n\n.is-grab {\n cursor: move;\n cursor: -webkit-grab;\n cursor: grab;\n}\n\n.is-grabbing {\n cursor: move;\n cursor: -webkit-grabbing;\n cursor: grabbing;\n}\n"]} \ No newline at end of file +{"version":3,"sources":["jquery.magnify.css"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH;EACE,mBAAmB;EACnB,cAAc;EACd,aAAa;EACb,cAAc;EACd,uBAAuB;EACvB,sCAAsC;EACtC,mDAA2C;UAA3C,2CAA2C;EAC3C,gBAAgB;CACjB;;AAED;EACE,gBAAgB;EAChB,OAAO;EACP,QAAQ;EACR,YAAY;EACZ,aAAa;CACd;;AAED;EACE,aAAa;CACd;;AAED;EACE,mBAAmB;EACnB,WAAW;EACX,aAAa;EACb,YAAY;CACb;;AAED;EACE,aAAa;CACd;;AAED;EACE,mBAAmB;EACnB,gBAAgB;EAChB,eAAe;EACf,oBAAoB;EACpB,wBAAwB;EACxB,0BAAkB;KAAlB,uBAAkB;MAAlB,sBAAkB;UAAlB,kBAAkB;EAClB,iBAAiB;CAClB;;AAED;EACE,mBAAmB;EACnB,UAAU;EACV,YAAY;EACZ,aAAa;EACb,WAAW;EACX,WAAW;EACX,uBAAuB;EACvB,iBAAiB;CAClB;;AAED;EACE,mBAAmB;CACpB;;AAED;EACE,mBAAmB;EACnB,sBAAsB;CACvB;;AAED;EACE,gBAAgB;EAChB,iBAAiB;CAClB;;AAED;EACE,mBAAmB;EACnB,UAAU;EACV,WAAW;EACX,YAAY;EACZ,aAAa;EACb,YAAY;EACZ,mBAAmB;CACpB;;AAED;EACE,sBAAsB;CACvB;;AAED;EACE,sBAAsB;EACtB,YAAY;EACZ,aAAa;EACb,+BAAuB;UAAvB,uBAAuB;EACvB,UAAU;EACV,cAAc;EACd,gBAAgB;EAChB,YAAY;EACZ,eAAe;EACf,mBAAmB;EACnB,iBAAiB;EACjB,gBAAgB;EAChB,iBAAiB;EACjB,gBAAgB;EAChB,cAAc;CACf;;AAED;EACE,YAAY;CACb;;AAED;EACE,sBAAsB;EACtB,mBAAmB;EACnB,WAAW;EACX,YAAY;EACZ,kBAAkB;EAClB,wBAAwB;CACzB;;AAED;EACE,0BAA0B;CAC3B;;AAED;EACE,0BAA0B;CAC3B;;AAED;EACE,0BAA0B;CAC3B;;AAED;EACE,mBAAmB;EACnB,OAAO;EACP,QAAQ;EACR,SAAS;EACT,UAAU;EACV,WAAW;EACX,mBAAmB;EACnB,qCAAqC;EACrC,YAAY;CACb;;AAED;EACE,YAAY;EACZ,sBAAsB;EACtB,mBAAmB;EACnB,YAAY;EACZ,aAAa;EACb,+BAAuB;UAAvB,uBAAuB;EACvB,kBAAkB;EAClB,oBAAoB;EACpB,gGAAgG;EAChG,oBAAoB;EACpB,qDAA6C;UAA7C,6CAA6C;CAC9C;;AAED;EACE,YAAY;EACZ,sBAAsB;EACtB,SAAS;EACT,aAAa;EACb,uBAAuB;EACvB,iBAAiB;CAClB;;AAED;EACE;IACE,sDAA8C;YAA9C,8CAA8C;GAC/C;EACD;IACE,wDAAgD;YAAhD,gDAAgD;GACjD;CACF;;AAPD;EACE;IACE,sDAA8C;YAA9C,8CAA8C;GAC/C;EACD;IACE,wDAAgD;YAAhD,gDAAgD;GACjD;CACF;;AAED;EACE,mBAAmB;EACnB,YAAY;CACb;;AAED;EACE,OAAO;EACP,YAAY;EACZ,UAAU;EACV,WAAW;EACX,YAAY;EACZ,iBAAiB;CAClB;;AAED;EACE,UAAU;EACV,SAAS;EACT,aAAa;EACb,QAAQ;EACR,aAAa;EACb,iBAAiB;CAClB;;AAED;EACE,OAAO;EACP,YAAY;EACZ,UAAU;EACV,WAAW;EACX,YAAY;EACZ,iBAAiB;CAClB;;AAED;EACE,UAAU;EACV,SAAS;EACT,aAAa;EACb,QAAQ;EACR,aAAa;EACb,iBAAiB;CAClB;;AAED;EACE,UAAU;EACV,YAAY;EACZ,aAAa;EACb,WAAW;EACX,YAAY;EACZ,aAAa;EACb,kBAAkB;CACnB;;AAED;EACE,UAAU;EACV,YAAY;EACZ,aAAa;EACb,WAAW;EACX,YAAY;EACZ,aAAa;EACb,kBAAkB;CACnB;;AAED;EACE,UAAU;EACV,YAAY;EACZ,aAAa;EACb,WAAW;EACX,YAAY;EACZ,aAAa;EACb,kBAAkB;CACnB;;AAED;EACE,UAAU;EACV,YAAY;EACZ,aAAa;EACb,WAAW;EACX,YAAY;EACZ,aAAa;EACb,kBAAkB;CACnB;;AAED;EACE,kBAAkB;EAClB,mBAAmB;EACnB,uBAAuB;EACvB,wBAAwB;CACzB;;AAED;;;EAGE,cAAc;CACf;;AAED;EACE,OAAO;EACP,SAAS;EACT,UAAU;EACV,QAAQ;EACR,gBAAgB;EAChB,uBAAuB;CACxB;;AAED;EACE,kBAAkB;EAClB,mBAAmB;EACnB,uBAAuB;EACvB,wBAAwB;CACzB;;AAED;;;EAGE,cAAc;CACf;;AAED;EACE,OAAO;EACP,SAAS;EACT,UAAU;EACV,QAAQ;EACR,gBAAgB;EAChB,uBAAuB;CACxB;;AAED;EACE,kBAAkB;EAClB,mBAAmB;EACnB,uBAAuB;EACvB,wBAAwB;CACzB;;AAED;;;EAGE,cAAc;CACf;;AAED;EACE,OAAO;EACP,SAAS;EACT,UAAU;EACV,QAAQ;EACR,gBAAgB;EAChB,uBAAuB;CACxB;;AAED;EACE,kBAAkB;EAClB,mBAAmB;EACnB,uBAAuB;EACvB,wBAAwB;CACzB;;AAED;;;EAGE,cAAc;CACf;;AAED;EACE,OAAO;EACP,SAAS;EACT,UAAU;EACV,QAAQ;EACR,gBAAgB;EAChB,uBAAuB;CACxB;;AAED;EACE,kBAAkB;EAClB,mBAAmB;EACnB,uBAAuB;EACvB,wBAAwB;CACzB;;AALD;EACE,kBAAkB;EAClB,mBAAmB;EACnB,uBAAuB;EACvB,wBAAwB;CACzB;;AALD;EACE,kBAAkB;EAClB,mBAAmB;EACnB,uBAAuB;EACvB,wBAAwB;CACzB;;AALD;EACE,kBAAkB;EAClB,mBAAmB;EACnB,uBAAuB;EACvB,wBAAwB;CACzB;;AAED;;;EAGE,cAAc;CACf;;AAJD;;;EAGE,cAAc;CACf;;AAJD;;;EAGE,cAAc;CACf;;AAJD;;;EAGE,cAAc;CACf;;AAED;EACE,OAAO;EACP,SAAS;EACT,UAAU;EACV,QAAQ;EACR,gBAAgB;EAChB,uBAAuB;CACxB;;AAPD;EACE,OAAO;EACP,SAAS;EACT,UAAU;EACV,QAAQ;EACR,gBAAgB;EAChB,uBAAuB;CACxB;;AAPD;EACE,OAAO;EACP,SAAS;EACT,UAAU;EACV,QAAQ;EACR,gBAAgB;EAChB,uBAAuB;CACxB;;AAPD;EACE,OAAO;EACP,SAAS;EACT,UAAU;EACV,QAAQ;EACR,gBAAgB;EAChB,uBAAuB;CACxB;;AAED;EACE,uBAAuB;CACxB;;AAFD;EACE,uBAAuB;CACxB;;AAED;EACE,uBAAuB;CACxB;;AAED;EACE,aAAa;EACb,qBAAqB;EACrB,aAAa;CACd;;AAED;EACE,aAAa;EACb,yBAAyB;EACzB,iBAAiB;CAClB","file":"jquery.magnify.css","sourcesContent":["/*!\n * ___ ___ _____ ______ __ __ _____ ______ __ __\n * | \\/ |/ _ \\ / __ \\| \\ | |_ _| ___| \\ / |\n * | | / \\ | | \\__| \\| | | | | |__ \\ \\/ /\n * | |\\/| | |_| | | ___ | | | | __| \\ /\n * | | | | _ | \\_/ | |\\ |_| |_| | | |\n * |__| |__|__| |__|\\____/|_|__| \\__|_____|__| |__|\n *\n * jquery.magnify - v1.3.1\n * A jQuery plugin to view images just like in windows\n * https://github.com/nzbin/magnify#readme\n *\n * Copyright (c) 2017 nzbin\n * Released under the MIT License\n *\n */\n.magnify-modal {\n position: absolute;\n z-index: 1090;\n width: 320px;\n height: 320px;\n background-color: #111;\n background-color: rgba(0, 0, 0, 0.85);\n box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3);\n cursor: default;\n}\n\n.magnify-maximize {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n\n.magnify-toolbar {\n font-size: 0;\n}\n\n.magnify-header {\n position: relative;\n z-index: 2;\n height: 40px;\n color: #fff;\n}\n\n.magnify-header .magnify-toolbar {\n float: right;\n}\n\n.magnify-title {\n padding: 13px 10px;\n font-size: 14px;\n line-height: 1;\n white-space: nowrap;\n text-overflow: ellipsis;\n user-select: none;\n overflow: hidden;\n}\n\n.magnify-stage {\n position: absolute;\n top: 40px;\n right: 10px;\n bottom: 40px;\n left: 10px;\n z-index: 1;\n border: 1px solid #ccc;\n overflow: hidden;\n}\n\n.magnify-stage.stage-ready {\n text-align: center;\n}\n\n.magnify-image {\n position: relative;\n display: inline-block;\n}\n\n.magnify-image.image-ready {\n max-width: 100%;\n max-height: 100%;\n}\n\n.magnify-footer {\n position: absolute;\n bottom: 0;\n z-index: 2;\n width: 100%;\n height: 40px;\n color: #fff;\n text-align: center;\n}\n\n.magnify-footer .magnify-toolbar {\n display: inline-block;\n}\n\n.magnify-button {\n display: inline-block;\n width: 40px;\n height: 40px;\n box-sizing: border-box;\n margin: 0;\n padding: 10px;\n font-size: 14px;\n color: #ccc;\n line-height: 1;\n text-align: center;\n background: none;\n border-width: 0;\n border-radius: 0;\n cursor: pointer;\n outline: none;\n}\n\n.magnify-button:hover {\n color: #fff;\n}\n\n.magnify-button svg {\n display: inline-block;\n font-size: inherit;\n width: 1em;\n height: 1em;\n overflow: visible;\n vertical-align: -.125em;\n}\n\n.magnify-button-close:hover {\n background-color: #ff4545;\n}\n\n.magnify-button-maximize:hover {\n background-color: #525252;\n}\n\n.magnify-button-minimize:hover {\n background-color: #525252;\n}\n\n.magnify-loader {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 2;\n text-align: center;\n background-color: rgba(0, 0, 0, 0.3);\n color: #333;\n}\n\n.magnify-loader::before {\n content: '';\n display: inline-block;\n position: relative;\n width: 36px;\n height: 36px;\n box-sizing: border-box;\n border-width: 5px;\n border-style: solid;\n border-color: rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.5) rgba(255, 255, 255, 0.5);\n border-radius: 100%;\n animation: magnifyLoading 1s infinite linear;\n}\n\n.magnify-loader::after {\n content: '';\n display: inline-block;\n width: 0;\n height: 100%;\n vertical-align: middle;\n overflow: hidden;\n}\n\n@keyframes magnifyLoading {\n 0% {\n transform: rotateZ(0deg) translate3d(0, 0, 0);\n }\n 100% {\n transform: rotateZ(360deg) translate3d(0, 0, 0);\n }\n}\n\n.magnify-resizable-handle {\n position: absolute;\n z-index: 10;\n}\n\n.magnify-resizable-handle-e {\n top: 0;\n right: -5px;\n bottom: 0;\n left: auto;\n width: 10px;\n cursor: e-resize;\n}\n\n.magnify-resizable-handle-s {\n top: auto;\n right: 0;\n bottom: -5px;\n left: 0;\n height: 10px;\n cursor: s-resize;\n}\n\n.magnify-resizable-handle-w {\n top: 0;\n right: auto;\n bottom: 0;\n left: -5px;\n width: 10px;\n cursor: w-resize;\n}\n\n.magnify-resizable-handle-n {\n top: -5px;\n right: 0;\n bottom: auto;\n left: 0;\n height: 10px;\n cursor: n-resize;\n}\n\n.magnify-resizable-handle-se {\n top: auto;\n right: -5px;\n bottom: -5px;\n left: auto;\n width: 10px;\n height: 10px;\n cursor: se-resize;\n}\n\n.magnify-resizable-handle-sw {\n top: auto;\n right: auto;\n bottom: -5px;\n left: -5px;\n width: 10px;\n height: 10px;\n cursor: sw-resize;\n}\n\n.magnify-resizable-handle-nw {\n top: -5px;\n right: auto;\n bottom: auto;\n left: -5px;\n width: 10px;\n height: 10px;\n cursor: nw-resize;\n}\n\n.magnify-resizable-handle-ne {\n top: -5px;\n right: -5px;\n bottom: auto;\n left: auto;\n width: 10px;\n height: 10px;\n cursor: ne-resize;\n}\n\n:-webkit-full-screen {\n top: 0 !important;\n left: 0 !important;\n width: 100% !important;\n height: 100% !important;\n}\n\n:-webkit-full-screen .magnify-header,\n:-webkit-full-screen .magnify-footer,\n:-webkit-full-screen .magnify-resizable-handle {\n display: none;\n}\n\n:-webkit-full-screen .magnify-stage {\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n border-width: 0;\n background-color: #000;\n}\n\n:-moz-full-screen {\n top: 0 !important;\n left: 0 !important;\n width: 100% !important;\n height: 100% !important;\n}\n\n:-moz-full-screen .magnify-header,\n:-moz-full-screen .magnify-footer,\n:-moz-full-screen .magnify-resizable-handle {\n display: none;\n}\n\n:-moz-full-screen .magnify-stage {\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n border-width: 0;\n background-color: #000;\n}\n\n:-ms-fullscreen {\n top: 0 !important;\n left: 0 !important;\n width: 100% !important;\n height: 100% !important;\n}\n\n:-ms-fullscreen .magnify-header,\n:-ms-fullscreen .magnify-footer,\n:-ms-fullscreen .magnify-resizable-handle {\n display: none;\n}\n\n:-ms-fullscreen .magnify-stage {\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n border-width: 0;\n background-color: #000;\n}\n\n:full-screen {\n top: 0 !important;\n left: 0 !important;\n width: 100% !important;\n height: 100% !important;\n}\n\n:full-screen .magnify-header,\n:full-screen .magnify-footer,\n:full-screen .magnify-resizable-handle {\n display: none;\n}\n\n:full-screen .magnify-stage {\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n border-width: 0;\n background-color: #000;\n}\n\n:fullscreen {\n top: 0 !important;\n left: 0 !important;\n width: 100% !important;\n height: 100% !important;\n}\n\n:fullscreen .magnify-header,\n:fullscreen .magnify-footer,\n:fullscreen .magnify-resizable-handle {\n display: none;\n}\n\n:fullscreen .magnify-stage {\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n border-width: 0;\n background-color: #000;\n}\n\n::backdrop {\n background-color: #000;\n}\n\n::-ms-backdrop {\n background-color: #000;\n}\n\n.is-grab {\n cursor: move;\n cursor: -webkit-grab;\n cursor: grab;\n}\n\n.is-grabbing {\n cursor: move;\n cursor: -webkit-grabbing;\n cursor: grabbing;\n}\n"]} \ No newline at end of file diff --git a/dist/jquery.magnify.js b/dist/jquery.magnify.js index 571d52b..413758a 100644 --- a/dist/jquery.magnify.js +++ b/dist/jquery.magnify.js @@ -6,7 +6,7 @@ * | | | | _ | \_/ | |\ |_| |_| | | | * |__| |__|__| |__|\____/|_|__| \__|_____|__| |__| * - * jquery.magnify - v1.3.0 + * jquery.magnify - v1.3.1 * A jQuery plugin to view images just like in windows * https://github.com/nzbin/magnify#readme * @@ -1158,8 +1158,8 @@ Magnify.prototype = { : (offsetX + δ)); } - // if the image get to the critical point - if (Math.abs(this.imageData.initWidth - newWidth) < Math.abs(this.imageData.initWidth * 0.05)) { + // if the image scale get to the critical point + if (Math.abs(this.imageData.initWidth - newWidth) < this.imageData.initWidth * 0.05) { this.setImageSize(this.img); } else { $image.css({ diff --git a/dist/jquery.magnify.min.css b/dist/jquery.magnify.min.css index 0929a4a..24b1aeb 100644 --- a/dist/jquery.magnify.min.css +++ b/dist/jquery.magnify.min.css @@ -6,7 +6,7 @@ * | | | | _ | \_/ | |\ |_| |_| | | | * |__| |__|__| |__|\____/|_|__| \__|_____|__| |__| * - * jquery.magnify - v1.3.0 + * jquery.magnify - v1.3.1 * A jQuery plugin to view images just like in windows * https://github.com/nzbin/magnify#readme * diff --git a/dist/jquery.magnify.min.css.map b/dist/jquery.magnify.min.css.map index f42976e..dcd7eea 100644 --- a/dist/jquery.magnify.min.css.map +++ b/dist/jquery.magnify.min.css.map @@ -1 +1 @@ -{"version":3,"sources":["jquery.magnify.min.css"],"names":[],"mappings":"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","file":"jquery.magnify.min.css","sourcesContent":["/*!\n * ___ ___ _____ ______ __ __ _____ ______ __ __\n * | \\/ |/ _ \\ / __ \\| \\ | |_ _| ___| \\ / |\n * | | / \\ | | \\__| \\| | | | | |__ \\ \\/ /\n * | |\\/| | |_| | | ___ | | | | __| \\ /\n * | | | | _ | \\_/ | |\\ |_| |_| | | |\n * |__| |__|__| |__|\\____/|_|__| \\__|_____|__| |__|\n *\n * jquery.magnify - v1.3.0\n * A jQuery plugin to view images just like in windows\n * https://github.com/nzbin/magnify#readme\n *\n * Copyright (c) 2017 nzbin\n * Released under the MIT License\n *\n */.magnify-modal{position:absolute;z-index:1090;width:320px;height:320px;background-color:#111;background-color:rgba(0,0,0,0.85);box-shadow:0 0 3px 1px rgba(0,0,0,0.3);cursor:default}.magnify-maximize{position:fixed;top:0;left:0;width:100%;height:100%}.magnify-toolbar{font-size:0}.magnify-header{position:relative;z-index:2;height:40px;color:#fff}.magnify-header .magnify-toolbar{float:right}.magnify-title{padding:13px 10px;font-size:14px;line-height:1;white-space:nowrap;text-overflow:ellipsis;user-select:none;overflow:hidden}.magnify-stage{position:absolute;top:40px;right:10px;bottom:40px;left:10px;z-index:1;border:1px solid #ccc;overflow:hidden}.magnify-stage.stage-ready{text-align:center}.magnify-image{position:relative;display:inline-block}.magnify-image.image-ready{max-width:100%;max-height:100%}.magnify-footer{position:absolute;bottom:0;z-index:2;width:100%;height:40px;color:#fff;text-align:center}.magnify-footer .magnify-toolbar{display:inline-block}.magnify-button{display:inline-block;width:40px;height:40px;box-sizing:border-box;margin:0;padding:10px;font-size:14px;color:#ccc;line-height:1;text-align:center;background:none;border-width:0;border-radius:0;cursor:pointer;outline:none}.magnify-button:hover{color:#fff}.magnify-button svg{display:inline-block;font-size:inherit;width:1em;height:1em;overflow:visible;vertical-align:-.125em}.magnify-button-close:hover{background-color:#ff4545}.magnify-button-maximize:hover{background-color:#525252}.magnify-button-minimize:hover{background-color:#525252}.magnify-loader{position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;text-align:center;background-color:rgba(0,0,0,0.3);color:#333}.magnify-loader::before{content:'';display:inline-block;position:relative;width:36px;height:36px;box-sizing:border-box;border-width:5px;border-style:solid;border-color:rgba(0,0,0,0.5) rgba(0,0,0,0.5) rgba(0,0,0,0.5) rgba(255,255,255,0.5);border-radius:100%;animation:magnifyLoading 1s infinite linear}.magnify-loader::after{content:'';display:inline-block;width:0;height:100%;vertical-align:middle;overflow:hidden}@keyframes magnifyLoading{0%{transform:rotateZ(0deg) translate3d(0, 0, 0)}100%{transform:rotateZ(360deg) translate3d(0, 0, 0)}}.magnify-resizable-handle{position:absolute;z-index:10}.magnify-resizable-handle-e{top:0;right:-5px;bottom:0;left:auto;width:10px;cursor:e-resize}.magnify-resizable-handle-s{top:auto;right:0;bottom:-5px;left:0;height:10px;cursor:s-resize}.magnify-resizable-handle-w{top:0;right:auto;bottom:0;left:-5px;width:10px;cursor:w-resize}.magnify-resizable-handle-n{top:-5px;right:0;bottom:auto;left:0;height:10px;cursor:n-resize}.magnify-resizable-handle-se{top:auto;right:-5px;bottom:-5px;left:auto;width:10px;height:10px;cursor:se-resize}.magnify-resizable-handle-sw{top:auto;right:auto;bottom:-5px;left:-5px;width:10px;height:10px;cursor:sw-resize}.magnify-resizable-handle-nw{top:-5px;right:auto;bottom:auto;left:-5px;width:10px;height:10px;cursor:nw-resize}.magnify-resizable-handle-ne{top:-5px;right:-5px;bottom:auto;left:auto;width:10px;height:10px;cursor:ne-resize}:-webkit-full-screen{top:0 !important;left:0 !important;width:100% !important;height:100% !important}:-webkit-full-screen .magnify-header,:-webkit-full-screen .magnify-footer,:-webkit-full-screen .magnify-resizable-handle{display:none}:-webkit-full-screen .magnify-stage{top:0;right:0;bottom:0;left:0;border-width:0;background-color:#000}:-moz-full-screen{top:0 !important;left:0 !important;width:100% !important;height:100% !important}:-moz-full-screen .magnify-header,:-moz-full-screen .magnify-footer,:-moz-full-screen .magnify-resizable-handle{display:none}:-moz-full-screen .magnify-stage{top:0;right:0;bottom:0;left:0;border-width:0;background-color:#000}:-ms-fullscreen{top:0 !important;left:0 !important;width:100% !important;height:100% !important}:-ms-fullscreen .magnify-header,:-ms-fullscreen .magnify-footer,:-ms-fullscreen .magnify-resizable-handle{display:none}:-ms-fullscreen .magnify-stage{top:0;right:0;bottom:0;left:0;border-width:0;background-color:#000}:full-screen{top:0 !important;left:0 !important;width:100% !important;height:100% !important}:full-screen .magnify-header,:full-screen .magnify-footer,:full-screen .magnify-resizable-handle{display:none}:full-screen .magnify-stage{top:0;right:0;bottom:0;left:0;border-width:0;background-color:#000}:fullscreen{top:0 !important;left:0 !important;width:100% !important;height:100% !important}:fullscreen .magnify-header,:fullscreen .magnify-footer,:fullscreen .magnify-resizable-handle{display:none}:fullscreen .magnify-stage{top:0;right:0;bottom:0;left:0;border-width:0;background-color:#000}::backdrop{background-color:#000}::-ms-backdrop{background-color:#000}.is-grab{cursor:move;cursor:-webkit-grab;cursor:grab}.is-grabbing{cursor:move;cursor:-webkit-grabbing;cursor:grabbing}\n"]} \ No newline at end of file +{"version":3,"sources":["jquery.magnify.min.css"],"names":[],"mappings":"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","file":"jquery.magnify.min.css","sourcesContent":["/*!\n * ___ ___ _____ ______ __ __ _____ ______ __ __\n * | \\/ |/ _ \\ / __ \\| \\ | |_ _| ___| \\ / |\n * | | / \\ | | \\__| \\| | | | | |__ \\ \\/ /\n * | |\\/| | |_| | | ___ | | | | __| \\ /\n * | | | | _ | \\_/ | |\\ |_| |_| | | |\n * |__| |__|__| |__|\\____/|_|__| \\__|_____|__| |__|\n *\n * jquery.magnify - v1.3.1\n * A jQuery plugin to view images just like in windows\n * https://github.com/nzbin/magnify#readme\n *\n * Copyright (c) 2017 nzbin\n * Released under the MIT License\n *\n */.magnify-modal{position:absolute;z-index:1090;width:320px;height:320px;background-color:#111;background-color:rgba(0,0,0,0.85);box-shadow:0 0 3px 1px rgba(0,0,0,0.3);cursor:default}.magnify-maximize{position:fixed;top:0;left:0;width:100%;height:100%}.magnify-toolbar{font-size:0}.magnify-header{position:relative;z-index:2;height:40px;color:#fff}.magnify-header .magnify-toolbar{float:right}.magnify-title{padding:13px 10px;font-size:14px;line-height:1;white-space:nowrap;text-overflow:ellipsis;user-select:none;overflow:hidden}.magnify-stage{position:absolute;top:40px;right:10px;bottom:40px;left:10px;z-index:1;border:1px solid #ccc;overflow:hidden}.magnify-stage.stage-ready{text-align:center}.magnify-image{position:relative;display:inline-block}.magnify-image.image-ready{max-width:100%;max-height:100%}.magnify-footer{position:absolute;bottom:0;z-index:2;width:100%;height:40px;color:#fff;text-align:center}.magnify-footer .magnify-toolbar{display:inline-block}.magnify-button{display:inline-block;width:40px;height:40px;box-sizing:border-box;margin:0;padding:10px;font-size:14px;color:#ccc;line-height:1;text-align:center;background:none;border-width:0;border-radius:0;cursor:pointer;outline:none}.magnify-button:hover{color:#fff}.magnify-button svg{display:inline-block;font-size:inherit;width:1em;height:1em;overflow:visible;vertical-align:-.125em}.magnify-button-close:hover{background-color:#ff4545}.magnify-button-maximize:hover{background-color:#525252}.magnify-button-minimize:hover{background-color:#525252}.magnify-loader{position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;text-align:center;background-color:rgba(0,0,0,0.3);color:#333}.magnify-loader::before{content:'';display:inline-block;position:relative;width:36px;height:36px;box-sizing:border-box;border-width:5px;border-style:solid;border-color:rgba(0,0,0,0.5) rgba(0,0,0,0.5) rgba(0,0,0,0.5) rgba(255,255,255,0.5);border-radius:100%;animation:magnifyLoading 1s infinite linear}.magnify-loader::after{content:'';display:inline-block;width:0;height:100%;vertical-align:middle;overflow:hidden}@keyframes magnifyLoading{0%{transform:rotateZ(0deg) translate3d(0, 0, 0)}100%{transform:rotateZ(360deg) translate3d(0, 0, 0)}}.magnify-resizable-handle{position:absolute;z-index:10}.magnify-resizable-handle-e{top:0;right:-5px;bottom:0;left:auto;width:10px;cursor:e-resize}.magnify-resizable-handle-s{top:auto;right:0;bottom:-5px;left:0;height:10px;cursor:s-resize}.magnify-resizable-handle-w{top:0;right:auto;bottom:0;left:-5px;width:10px;cursor:w-resize}.magnify-resizable-handle-n{top:-5px;right:0;bottom:auto;left:0;height:10px;cursor:n-resize}.magnify-resizable-handle-se{top:auto;right:-5px;bottom:-5px;left:auto;width:10px;height:10px;cursor:se-resize}.magnify-resizable-handle-sw{top:auto;right:auto;bottom:-5px;left:-5px;width:10px;height:10px;cursor:sw-resize}.magnify-resizable-handle-nw{top:-5px;right:auto;bottom:auto;left:-5px;width:10px;height:10px;cursor:nw-resize}.magnify-resizable-handle-ne{top:-5px;right:-5px;bottom:auto;left:auto;width:10px;height:10px;cursor:ne-resize}:-webkit-full-screen{top:0 !important;left:0 !important;width:100% !important;height:100% !important}:-webkit-full-screen .magnify-header,:-webkit-full-screen .magnify-footer,:-webkit-full-screen .magnify-resizable-handle{display:none}:-webkit-full-screen .magnify-stage{top:0;right:0;bottom:0;left:0;border-width:0;background-color:#000}:-moz-full-screen{top:0 !important;left:0 !important;width:100% !important;height:100% !important}:-moz-full-screen .magnify-header,:-moz-full-screen .magnify-footer,:-moz-full-screen .magnify-resizable-handle{display:none}:-moz-full-screen .magnify-stage{top:0;right:0;bottom:0;left:0;border-width:0;background-color:#000}:-ms-fullscreen{top:0 !important;left:0 !important;width:100% !important;height:100% !important}:-ms-fullscreen .magnify-header,:-ms-fullscreen .magnify-footer,:-ms-fullscreen .magnify-resizable-handle{display:none}:-ms-fullscreen .magnify-stage{top:0;right:0;bottom:0;left:0;border-width:0;background-color:#000}:full-screen{top:0 !important;left:0 !important;width:100% !important;height:100% !important}:full-screen .magnify-header,:full-screen .magnify-footer,:full-screen .magnify-resizable-handle{display:none}:full-screen .magnify-stage{top:0;right:0;bottom:0;left:0;border-width:0;background-color:#000}:fullscreen{top:0 !important;left:0 !important;width:100% !important;height:100% !important}:fullscreen .magnify-header,:fullscreen .magnify-footer,:fullscreen .magnify-resizable-handle{display:none}:fullscreen .magnify-stage{top:0;right:0;bottom:0;left:0;border-width:0;background-color:#000}::backdrop{background-color:#000}::-ms-backdrop{background-color:#000}.is-grab{cursor:move;cursor:-webkit-grab;cursor:grab}.is-grabbing{cursor:move;cursor:-webkit-grabbing;cursor:grabbing}\n"]} \ No newline at end of file diff --git a/dist/jquery.magnify.min.js b/dist/jquery.magnify.min.js index 068b900..8b90d66 100644 --- a/dist/jquery.magnify.min.js +++ b/dist/jquery.magnify.min.js @@ -6,7 +6,7 @@ * | | | | _ | \_/ | |\ |_| |_| | | | * |__| |__|__| |__|\____/|_|__| \__|_____|__| |__| * - * jquery.magnify - v1.3.0 + * jquery.magnify - v1.3.1 * A jQuery plugin to view images just like in windows * https://github.com/nzbin/magnify#readme * @@ -14,7 +14,7 @@ * Released under the MIT License * */ -!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",c=".magnify",m={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:' ',maximize:' ',close:' ',zoomIn:' ',zoomOut:' ',prev:' ',next:' ',fullscreen:' ',actualSize:' ',rotateLeft:' ',rotateRight:' '},i18n:{minimize:"minimize",maximize:"maximize",close:"close",zoomIn:"zoom-in(+)",zoomOut:"zoom-out(-)",prev:"prev(←)",next:"next(→)",fullscreen:"fullscreen",actualSize:"actual-size(Ctrl+Alt+0)",rotateLeft:"rotate-left(Ctrl+,)",rotateRight:"rotate-right(Ctrl+.)"},multiInstances:!0,initEvent:"click",initAnimation:!0,fixedModalPos:!1,zIndex:1090,dragHandle:!1,callbacks:{beforeOpen:t.noop,opened:t.noop,beforeClose:t.noop,closed:t.noop,beforeChange:t.noop,changed:t.noop}},f={isMoving:!1,isResizing:!1,zIndex:m.zIndex},d=null,p=function(i,e){this.options=t.extend(!0,{},m,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(d.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?'
':""},creatDOM:function(){var t={minimize:'",maximize:'",close:'",zoomIn:'",zoomOut:'",prev:'",next:'",fullscreen:'",actualSize:'",rotateLeft:'",rotateRight:'"};return'
'+this._creatBtns(this.options.headToolbar,t)+"
"+this._creatTitle()+'
'+this._creatBtns(this.options.footToolbar,t)+"
"},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",f.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&&(f.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),c=t.height+e(l.top)+e(l.bottom)+e(l.borderTop)+e(l.borderBottom),m=(this.options.gapThreshold>0?this.options.gapThreshold:0)+1,f=Math.min(a/(g*m),s/(c*m),1),d=Math.max(g*f,this.options.modalWidth),p=Math.max(c*f,this.options.modalHeight),u={width:(d=this.options.fixedModalSize?this.options.modalWidth:Math.round(d))+"px",height:(p=this.options.fixedModalSize?this.options.modalHeight:Math.round(p))+"px",left:(a-d)/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('
'),this.options.initAnimation&&this.$image.hide(),o()?this.$stage.html(''):this.$image.attr("src",t),function(t,i,e){var a=new Image;a.onload=function(){i(a)},a.onerror=function(){e(a)},a.src=t}(t,function(t){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,c=this.imageData.originalHeight*i,m=e.x-(e.x-r.x)/r.w*g,f=e.y-(e.y-r.y)/r.h*c,d=this.isRotated?(g-c)/2:0,p=this.isRotated?c:g,u=this.isRotated?g:c,v=l.w-g,y=l.h-c; +!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",c=".magnify",m={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:.05,maxRatio:16,headToolbar:["maximize","close"],footToolbar:["zoomIn","zoomOut","prev","fullscreen","next","actualSize","rotateRight"],icons:{minimize:' ',maximize:' ',close:' ',zoomIn:' ',zoomOut:' ',prev:' ',next:' ',fullscreen:' ',actualSize:' ',rotateLeft:' ',rotateRight:' '},i18n:{minimize:"minimize",maximize:"maximize",close:"close",zoomIn:"zoom-in(+)",zoomOut:"zoom-out(-)",prev:"prev(←)",next:"next(→)",fullscreen:"fullscreen",actualSize:"actual-size(Ctrl+Alt+0)",rotateLeft:"rotate-left(Ctrl+,)",rotateRight:"rotate-right(Ctrl+.)"},multiInstances:!0,initEvent:"click",initAnimation:!0,fixedModalPos:!1,zIndex:1090,dragHandle:!1,callbacks:{beforeOpen:t.noop,opened:t.noop,beforeClose:t.noop,closed:t.noop,beforeChange:t.noop,changed:t.noop}},f={isMoving:!1,isResizing:!1,zIndex:m.zIndex},d=null,p=function(i,e){this.options=t.extend(!0,{},m,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.isDoResize=!1,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(d.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?'
':""},creatDOM:function(){var t={minimize:'",maximize:'",close:'",zoomIn:'",zoomOut:'",prev:'",next:'",fullscreen:'",actualSize:'",rotateLeft:'",rotateRight:'"};return'
'+this._creatBtns(this.options.headToolbar,t)+"
"+this._creatTitle()+'
'+this._creatBtns(this.options.footToolbar,t)+"
"},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",f.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&&(f.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),c=t.height+e(l.top)+e(l.bottom)+e(l.borderTop)+e(l.borderBottom),m=(this.options.gapThreshold>0?this.options.gapThreshold:0)+1,f=Math.min(a/(g*m),s/(c*m),1),d=Math.max(g*f,this.options.modalWidth),p=Math.max(c*f,this.options.modalHeight),u={width:(d=this.options.fixedModalSize?this.options.modalWidth:Math.round(d))+"px",height:(p=this.options.fixedModalSize?this.options.modalHeight:Math.round(p))+"px",left:(a-d)/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},getImageScaleToStage:function(t,i){return this.isRotated?Math.min(t/this.img.height,i/this.img.width,1):Math.min(t/this.img.width,i/this.img.height,1)},setImageSize:function(i){var e=o()?this.$stage.find(".magnify-image"):this.$image,s={w:this.$stage.width(),h:this.$stage.height()},n=this.getImageScaleToStage(s.w,s.h);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,{initWidth:i.width*n,initHeight:i.height*n,initLeft:(s.w-i.width*n)/2,initTop:(s.h-i.height*n)/2,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('
'),this.options.initAnimation&&this.$image.hide(),o()?this.$stage.html(''):this.$image.attr("src",t),function(t,i,e){var a=new Image;a.onload=function(){i(a)},a.onerror=function(){e(a)},a.src=t}(t,function(t){i.img=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,(t=this.$image.width()/this.imageData.originalWidth*t)>this.options.maxRatio||td?d:f>y-d?f:y-d,m=p<=l.w?(l.w-g)/2:m>-d?-d:m>v+d?m:v+d,n.css({width:Math.round(g)+"px",height:Math.round(c)+"px",left:Math.round(m)+"px",top:Math.round(f)+"px"}),o()&&n.find("group").css({width:Math.ceil(g)+"px",height:Math.ceil(c)+"px"}),t.extend(this.imageData,{width:g,height:c,left:m,top:f}),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){d=t(this);for(var e in i)"string"!=typeof i[e]||isNaN(i[e])||(i[e]=parseFloat(i[e]));var a=t.extend(!0,{},m,i);return f.zIndex=a.zIndex,"string"==typeof i||("dblclick"===a.initEvent&&d.off("click.magnify").on("click.magnify",function(t){t.preventDefault(),t.stopPropagation()}),d.off(a.initEvent+c).on(a.initEvent+c,function(e){e.preventDefault(),e.stopPropagation(),t(this).data("magnify",new p(this,i))})),d},h.on("click.magnify","[data-magnify]",function(i){d=t("[data-magnify]"),i.preventDefault(),t(this).data("magnify",new p(this,m))});t.extend(p.prototype,{draggable:function(i,e,a){var s=this,o=!1,n=0,m=0,d=0,p=0,u=function(e){if((e=e||window.event).preventDefault(),o&&!f.isMoving&&!f.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-m;t(i).css({left:r+d+"px",top:l+p+"px"})}},v=function(t){h.off(l+c,u).off(g+c,v),o=!1};t(e).on(r+c,function(e){if(e=e||window.event,s.options.multiInstances&&i.css("z-index",++f.zIndex),t(e.target).closest(a).length)return!0;o=!0,n="touchstart"===e.type?e.originalEvent.targetTouches[0].pageX:e.clientX,m="touchstart"===e.type?e.originalEvent.targetTouches[0].pageY:e.clientY,d=t(i).offset().left,p=t(i).offset().top,h.on(l+c,u).on(g+c,v)})}});t.extend(p.prototype,{movable:function(i,e){var a=this,s=!1,n=0,m=0,d=0,p=0,u=0,v=0,y=0,_=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,c=l-n,f=g-m,_=c+d,b=f+p;v>0?f+p>y?b=y:f+p<-v+y&&(b=-v+y):b=p,u>0?c+d>-y?_=-y:c+d<-u-y&&(_=-u-y):_=d,r.css({left:_+"px",top:b+"px"}),t.extend(a.imageData,{left:_,top:b})}},b=function(i){h.off(l+c,_).off(g+c,b),s=!1,f.isMoving=!1,t("html,body,.magnify-modal,.magnify-stage,.magnify-button,.magnify-resizable-handle").removeClass("is-grabbing")};t(i).on(r+c,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(),M=t(i).height();n="touchstart"===r.type?r.originalEvent.targetTouches[0].pageX:r.clientX,m="touchstart"===r.type?r.originalEvent.targetTouches[0].pageY:r.clientY,y=a.isRotated?(w-z)/2:0,u=a.isRotated?z-$:w-$,v=a.isRotated?w-M:z-M,s=u>0||v>0,f.isMoving=u>0||v>0,d=x.position().left-(o()?0:y),p=x.position().top+(o()?0:y),i.hasClass("is-grab")&&t("html,body,.magnify-modal,.magnify-stage,.magnify-button,.magnify-resizable-handle").addClass("is-grabbing"),h.on(l+c,_).on(g+c,b)})}});t.extend(p.prototype,{resizable:function(i,e,s,n,m){var d=this,p=t('
'),u=t('
'),v=t('
'),y=t('
'),_=t('
'),b=t('
'),x=t('
'),w=t('
'),z={e:p,s:v,se:_,n:y,w:u,nw:w,ne:x,sw:b};t(i).append(p,u,v,y,_,b,x,w);var $=!1,M=0,T=0,C={w:0,h:0,l:0,t:0},k={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,f.isResizing=!0,M="touchstart"===n.type?n.originalEvent.targetTouches[0].pageX:n.clientX,T="touchstart"===n.type?n.originalEvent.targetTouches[0].pageY:n.clientY,C={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},D={w:r.width(),h:r.height(),l:r.position().left,t:r.position().top},S=d.isRotated?(D.w-D.h)/2:0,E=d.isRotated?D.h:D.w,I=d.isRotated?D.w:D.h,O=a,t("html,body,.magnify-modal,.magnify-stage,.magnify-button").css("cursor",a+"-resize"),h.on(l+c,H).on(g+c,R)},H=function(a){(a=a||window.event).preventDefault();var h=o()?t(e).find(s):t(s);if($&&!d.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-M,c=l-T,f=function(t,i,e){var a=-i+C.w>n?i+C.l:C.l+C.w-n,s=-e+C.h>m?e+C.t:C.t+C.h-m;return{e:{width:Math.max(i+C.w,n)+"px"},s:{height:Math.max(e+C.h,m)+"px"},se:{width:Math.max(i+C.w,n)+"px",height:Math.max(e+C.h,m)+"px"},w:{width:Math.max(-i+C.w,n)+"px",left:a+"px"},n:{height:Math.max(-e+C.h,m)+"px",top:s+"px"},nw:{width:Math.max(-i+C.w,n)+"px",height:Math.max(-e+C.h,m)+"px",top:s+"px",left:a+"px"},ne:{width:Math.max(i+C.w,n)+"px",height:Math.max(-e+C.h,m)+"px",top:s+"px"},sw:{width:Math.max(-i+C.w,n)+"px",height:Math.max(e+C.h,m)+"px",left:a+"px"}}[t]}(O,g,c);t(i).css(f);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,c=a+C.w>n?k.w-E+a-S:n-(C.w-k.w)-E-S,f=h+C.h>m?k.h-I+h+S:m-(C.h-k.h)-I+S,d=-a+C.w>n?k.w-E-a-S:n-(C.w-k.w)-E-S,p=-h+C.h>m?k.h-I-h+S:m-(C.h-k.h)-I+S,u=(c>0?l:l<0?l:0)-S,v=(f>0?g:g<0?g:0)+S,y=(d>0?l:l<0?l:0)-S,_=(p>0?g:g<0?g:0)+S;return{e:{left:c>=-S?(c-S)/2+"px":u>c?u+"px":c+"px"},s:{top:f>=S?(f+S)/2+"px":v>f?v+"px":f+"px"},se:{top:f>=S?(f+S)/2+"px":v>f?v+"px":f+"px",left:c>=-S?(c-S)/2+"px":u>c?u+"px":c+"px"},w:{left:d>=-S?(d-S)/2+"px":y>d?y+"px":d+"px"},n:{top:p>=S?(p+S)/2+"px":_>p?_+"px":p+"px"},nw:{top:p>=S?(p+S)/2+"px":_>p?_+"px":p+"px",left:d>=-S?(d-S)/2+"px":y>d?y+"px":d+"px"},ne:{top:p>=S?(p+S)/2+"px":_>p?_+"px":p+"px",left:c>=-S?(c-S)/2+"px":u>c?u+"px":c+"px"},sw:{top:f>=S?(f+S)/2+"px":v>f?v+"px":f+"px",left:d>=-S?(d-S)/2+"px":y>d?y+"px":d+"px"}}[i]}(O,g,c);h.css(p)}},R=function(i){h.off(l+c,H).off(g+c,R),f.isResizing&&a({w:E,h:I},{w:t(e).width(),h:t(e).height()},e),$=!1,f.isResizing=!1,t("html,body,.magnify-modal,.magnify-stage,.magnify-button").css("cursor","")};t.each(z,function(t,i){i.on(r+c,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;ad?d:f>y-d?f:y-d,m=p<=l.w?(l.w-g)/2:m>-d?-d:m>v+d?m:v+d,Math.abs(this.imageData.initWidth-g)<.05*this.imageData.initWidth?this.setImageSize(this.img):(n.css({width:Math.round(g)+"px",height:Math.round(c)+"px",left:Math.round(m)+"px",top:Math.round(f)+"px"}),o()&&n.find("group").css({width:Math.ceil(g)+"px",height:Math.ceil(c)+"px"}),a({w:Math.round(p),h:Math.round(u)},{w:l.w,h:l.h},this.$stage)),t.extend(this.imageData,{width:g,height:c,left:m,top:f})},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){d=t(this);for(var e in i)"string"!=typeof i[e]||isNaN(i[e])||(i[e]=parseFloat(i[e]));var a=t.extend(!0,{},m,i);return f.zIndex=a.zIndex,"string"==typeof i||("dblclick"===a.initEvent&&d.off("click.magnify").on("click.magnify",function(t){t.preventDefault(),t.stopPropagation()}),d.off(a.initEvent+c).on(a.initEvent+c,function(e){e.preventDefault(),e.stopPropagation(),t(this).data("magnify",new p(this,i))})),d},h.on("click.magnify","[data-magnify]",function(i){d=t("[data-magnify]"),i.preventDefault(),t(this).data("magnify",new p(this,m))});t.extend(p.prototype,{draggable:function(i,e,a){var s=this,o=!1,n=0,m=0,d=0,p=0,u=function(e){if((e=e||window.event).preventDefault(),o&&!f.isMoving&&!f.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-m;t(i).css({left:r+d+"px",top:l+p+"px"})}},v=function(t){h.off(l+c,u).off(g+c,v),o=!1};t(e).on(r+c,function(e){if(e=e||window.event,s.options.multiInstances&&i.css("z-index",++f.zIndex),t(e.target).closest(a).length)return!0;o=!0,n="touchstart"===e.type?e.originalEvent.targetTouches[0].pageX:e.clientX,m="touchstart"===e.type?e.originalEvent.targetTouches[0].pageY:e.clientY,d=t(i).offset().left,p=t(i).offset().top,h.on(l+c,u).on(g+c,v)})}});t.extend(p.prototype,{movable:function(i,e){var a=this,s=!1,n=0,m=0,d=0,p=0,u=0,v=0,y=0,_=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,c=l-n,f=g-m,_=c+d,b=f+p;v>0?f+p>y?b=y:f+p<-v+y&&(b=-v+y):b=p,u>0?c+d>-y?_=-y:c+d<-u-y&&(_=-u-y):_=d,r.css({left:_+"px",top:b+"px"}),t.extend(a.imageData,{left:_,top:b})}},b=function(i){h.off(l+c,_).off(g+c,b),s=!1,f.isMoving=!1,t("html,body,.magnify-modal,.magnify-stage,.magnify-button,.magnify-resizable-handle").removeClass("is-grabbing")};t(i).on(r+c,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(),M=t(i).height();n="touchstart"===r.type?r.originalEvent.targetTouches[0].pageX:r.clientX,m="touchstart"===r.type?r.originalEvent.targetTouches[0].pageY:r.clientY,y=a.isRotated?(w-z)/2:0,u=a.isRotated?z-$:w-$,v=a.isRotated?w-M:z-M,s=u>0||v>0,f.isMoving=u>0||v>0,d=x.position().left-(o()?0:y),p=x.position().top+(o()?0:y),i.hasClass("is-grab")&&t("html,body,.magnify-modal,.magnify-stage,.magnify-button,.magnify-resizable-handle").addClass("is-grabbing"),h.on(l+c,_).on(g+c,b)})}});t.extend(p.prototype,{resizable:function(i,e,s,n,m){var d=this,p=t('
'),u=t('
'),v=t('
'),y=t('
'),_=t('
'),b=t('
'),x=t('
'),w=t('
'),z={e:p,s:v,se:_,n:y,w:u,nw:w,ne:x,sw:b};t(i).append(p,u,v,y,_,b,x,w);var $=!1,M=0,T=0,C={w:0,h:0,l:0,t:0},S={w:0,h:0,l:0,t:0},D={w:0,h:0,l:0,t:0},k=0,I=0,W=0,E="",O=function(a,n){(n=n||window.event).preventDefault();var r=o()?t(e).find(s):t(s);$=!0,f.isResizing=!0,M="touchstart"===n.type?n.originalEvent.targetTouches[0].pageX:n.clientX,T="touchstart"===n.type?n.originalEvent.targetTouches[0].pageY:n.clientY,C={w:t(i).width(),h:t(i).height(),l:t(i).offset().left,t:t(i).offset().top},S={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},k=d.isRotated?(D.w-D.h)/2:0,I=d.isRotated?D.h:D.w,W=d.isRotated?D.w:D.h,E=a,t("html,body,.magnify-modal,.magnify-stage,.magnify-button").css("cursor",a+"-resize"),h.on(l+c,H).on(g+c,R)},H=function(a){(a=a||window.event).preventDefault();var h=o()?t(e).find(s):t(s);if($&&!d.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-M,c=l-T,f=function(t,i,e){var a=-i+C.w>n?i+C.l:C.l+C.w-n,s=-e+C.h>m?e+C.t:C.t+C.h-m;return{e:{width:Math.max(i+C.w,n)+"px"},s:{height:Math.max(e+C.h,m)+"px"},se:{width:Math.max(i+C.w,n)+"px",height:Math.max(e+C.h,m)+"px"},w:{width:Math.max(-i+C.w,n)+"px",left:a+"px"},n:{height:Math.max(-e+C.h,m)+"px",top:s+"px"},nw:{width:Math.max(-i+C.w,n)+"px",height:Math.max(-e+C.h,m)+"px",top:s+"px",left:a+"px"},ne:{width:Math.max(i+C.w,n)+"px",height:Math.max(-e+C.h,m)+"px",top:s+"px"},sw:{width:Math.max(-i+C.w,n)+"px",height:Math.max(e+C.h,m)+"px",left:a+"px"}}[t]}(E,g,c);t(i).css(f);var p=function(i,a,h){var r=o()?t(e).find(s):t(s),l=o()?r.position().left+k:r.position().left,g=o()?r.position().top-k:r.position().top,c=a+C.w>n?S.w-I+a-k:n-(C.w-S.w)-I-k,f=h+C.h>m?S.h-W+h+k:m-(C.h-S.h)-W+k,d=-a+C.w>n?S.w-I-a-k:n-(C.w-S.w)-I-k,p=-h+C.h>m?S.h-W-h+k:m-(C.h-S.h)-W+k,u=(c>0?l:l<0?l:0)-k,v=(f>0?g:g<0?g:0)+k,y=(d>0?l:l<0?l:0)-k,_=(p>0?g:g<0?g:0)+k;return{e:{left:c>=-k?(c-k)/2+"px":u>c?u+"px":c+"px"},s:{top:f>=k?(f+k)/2+"px":v>f?v+"px":f+"px"},se:{top:f>=k?(f+k)/2+"px":v>f?v+"px":f+"px",left:c>=-k?(c-k)/2+"px":u>c?u+"px":c+"px"},w:{left:d>=-k?(d-k)/2+"px":y>d?y+"px":d+"px"},n:{top:p>=k?(p+k)/2+"px":_>p?_+"px":p+"px"},nw:{top:p>=k?(p+k)/2+"px":_>p?_+"px":p+"px",left:d>=-k?(d-k)/2+"px":y>d?y+"px":d+"px"},ne:{top:p>=k?(p+k)/2+"px":_>p?_+"px":p+"px",left:c>=-k?(c-k)/2+"px":u>c?u+"px":c+"px"},sw:{top:f>=k?(f+k)/2+"px":v>f?v+"px":f+"px",left:d>=-k?(d-k)/2+"px":y>d?y+"px":d+"px"}}[i]}(E,g,c);h.css(p),d.isDoResize=!0}},R=function(i){h.off(l+c,H).off(g+c,R),f.isResizing&&a({w:I,h:W},{w:t(e).width(),h:t(e).height()},e),$=!1,f.isResizing=!1,t("html,body,.magnify-modal,.magnify-stage,.magnify-button").css("cursor","");var s=d.getImageScaleToStage(t(e).width(),t(e).height());t.extend(d.imageData,{initWidth:d.img.width*s,initHeight:d.img.height*s,initLeft:(t(e).width()-d.img.width*s)/2,initTop:(t(e).height()-d.img.height*s)/2})};t.each(z,function(t,i){i.on(r+c,function(i){O(t,i)})})}})}),function($){for(var supportedCSS,supportedCSSOrigin,styles=document.getElementsByTagName("head")[0].style,toCheck="transformProperty WebkitTransform OTransform msTransform MozTransform".split(" "),a=0;athis._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("')}}catch(t){return function(t){return document.createElement("<"+t+' xmlns="urn:schemas-microsoft.com:vml" class="rvml">')}}}())}(jQuery); \ No newline at end of file diff --git a/docs/css/jquery.magnify.css b/docs/css/jquery.magnify.css index 845ad4d..0e1ff40 100644 --- a/docs/css/jquery.magnify.css +++ b/docs/css/jquery.magnify.css @@ -6,7 +6,7 @@ * | | | | _ | \_/ | |\ |_| |_| | | | * |__| |__|__| |__|\____/|_|__| \__|_____|__| |__| * - * jquery.magnify - v1.3.0 + * jquery.magnify - v1.3.1 * A jQuery plugin to view images just like in windows * https://github.com/nzbin/magnify#readme * diff --git a/docs/js/jquery.magnify.js b/docs/js/jquery.magnify.js index d82b983..413758a 100644 --- a/docs/js/jquery.magnify.js +++ b/docs/js/jquery.magnify.js @@ -6,7 +6,7 @@ * | | | | _ | \_/ | |\ |_| |_| | | | * |__| |__|__| |__|\____/|_|__| \__|_____|__| |__| * - * jquery.magnify - v1.3.0 + * jquery.magnify - v1.3.1 * A jQuery plugin to view images just like in windows * https://github.com/nzbin/magnify#readme * @@ -40,7 +40,9 @@ */ function getImgSrc(el) { // Get data-src as image src at first - var src = $(el).attr('data-src') ? $(el).attr('data-src') : $(el).attr('href'); + var src = $(el).attr('data-src') + ? $(el).attr('data-src') + : $(el).attr('href'); return src; } @@ -63,7 +65,7 @@ function throttle(fn, delay) { timer = setTimeout(function () { fn.apply(context, args); }, delay); - } + }; } @@ -79,11 +81,11 @@ function preloadImg(src, success, error) { img.onload = function () { success(img); - } + }; img.onerror = function () { error(img); - } + }; img.src = src; @@ -198,8 +200,8 @@ function supportTouch() { * @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) + 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); } /** @@ -259,7 +261,7 @@ var $W = $(window), ratioThreshold: 0.1, // Min ratio of image when zoom out - minRatio: 0.1, + minRatio: 0.05, // Max ratio of image when zoom in maxRatio: 16, @@ -284,102 +286,140 @@ var $W = $(window), // Customize button icon icons: { minimize: '\ - \ - ', + \ + ', maximize: '\ - \ - ', + \ + ', close: '\ - \ - ', + \ + ', zoomIn: '\ - \ - ', + \ + ', zoomOut: '\ - \ - ', + \ + ', prev: '\ - \ - ', + \ + ', next: '\ - \ - ', + \ + ', fullscreen: '\ - \ - ', + \ + ', actualSize: '\ - \ - ', + \ + ', rotateLeft: '\ - \ - ', + \ + ', rotateRight: '\ - \ - ' + \ + ' }, // Customize language of button title @@ -471,6 +511,9 @@ var Magnify = function (el, options) { // image rotate angle this.rotateAngle = 0; + // if modal do resize + this.isDoResize = false; + // Store image data in every instance this.imageData = {}; // Store modal data in every instance @@ -483,7 +526,7 @@ var Magnify = function (el, options) { this.init(el, self.options); -} +}; /** * Mangify Prototype @@ -524,7 +567,11 @@ Magnify.prototype = { this.movable(this.$stage, isIE8() ? '.magnify-image' : this.$image); } if (opts.resizable) { - this.resizable(this.$magnify, this.$stage, isIE8() ? '.magnify-image' : this.$image, opts.modalWidth, opts.modalHeight); + this.resizable( + this.$magnify, + this.$stage, isIE8() ? '.magnify-image' : this.$image, + opts.modalWidth, + opts.modalHeight); } }, @@ -545,31 +592,70 @@ Magnify.prototype = { creatDOM: function () { var btnsTpl = { - minimize: '', - maximize: '', - close: '', - zoomIn: '', - zoomOut: '', - prev: '', - next: '', - fullscreen: '', - actualSize: '', - rotateLeft: '', - rotateRight: '' + minimize: '', + maximize: '', + close: '', + zoomIn: '', + zoomOut: '', + prev: '', + next: '', + fullscreen: '', + actualSize: '', + rotateLeft: '', + rotateRight: '' }; // magnify base HTML - var magnifyHTML = '
\ -
\ -
' + this._creatBtns(this.options.headToolbar, btnsTpl) + '
' + this._creatTitle() + '\ -
\ -
\ - \ -
\ -
\ -
' + this._creatBtns(this.options.footToolbar, btnsTpl) + '
\ -
\ -
'; + var magnifyHTML = + '
\ +
\ +
' + + this._creatBtns(this.options.headToolbar, btnsTpl) + '\ +
' + + this._creatTitle() + '\ +
\ +
\ + \ +
\ +
\ +
' + + this._creatBtns(this.options.footToolbar, btnsTpl) + '\ +
\ +
\ +
'; return magnifyHTML; @@ -744,14 +830,24 @@ Magnify.prototype = { }; // Modal size should calc with stage css value - var modalWidth = img.width + getNumFromCSSValue(stageCSS.left) + getNumFromCSSValue(stageCSS.right) + - getNumFromCSSValue(stageCSS.borderLeft) + getNumFromCSSValue(stageCSS.borderRight), - modalHeight = img.height + getNumFromCSSValue(stageCSS.top) + getNumFromCSSValue(stageCSS.bottom) + - getNumFromCSSValue(stageCSS.borderTop) + getNumFromCSSValue(stageCSS.borderBottom); + var modalWidth = img.width + + getNumFromCSSValue(stageCSS.left) + + getNumFromCSSValue(stageCSS.right) + + getNumFromCSSValue(stageCSS.borderLeft) + + getNumFromCSSValue(stageCSS.borderRight), + modalHeight = img.height + + getNumFromCSSValue(stageCSS.top) + + getNumFromCSSValue(stageCSS.bottom) + + getNumFromCSSValue(stageCSS.borderTop) + + getNumFromCSSValue(stageCSS.borderBottom); var gapThreshold = (this.options.gapThreshold > 0 ? this.options.gapThreshold : 0) + 1, // modal scale to window - scale = Math.min(winWidth / (modalWidth * gapThreshold), winHeight / (modalHeight * gapThreshold), 1); + scale = Math.min( + winWidth / (modalWidth * gapThreshold), + winHeight / (modalHeight * gapThreshold), + 1 + ); var minWidth = Math.max(modalWidth * scale, this.options.modalWidth), minHeight = Math.max(modalHeight * scale, this.options.modalHeight); @@ -783,6 +879,18 @@ Magnify.prototype = { this.isOpened = true; }, + getImageScaleToStage: function(stageWidth, stageHeight) { + + var scale = 1; + + if (!this.isRotated) { + scale = Math.min(stageWidth / this.img.width, stageHeight / this.img.height, 1); + } else { + scale = Math.min(stageWidth / this.img.height, stageHeight / this.img.width, 1); + } + + return scale; + }, setImageSize: function (img) { var $image = isIE8() ? this.$stage.find('.magnify-image') : this.$image; @@ -792,14 +900,10 @@ Magnify.prototype = { h: this.$stage.height() }; - // image scale to stage - var scale = 1; - - if (!this.isRotated) { - scale = Math.min(stageData.w / img.width, stageData.h / img.height, 1); - } else { - scale = Math.min(stageData.w / img.height, stageData.h / img.width, 1); - } + var scale = this.getImageScaleToStage( + stageData.w, + stageData.h + ); $image.css({ width: Math.ceil(img.width * scale) + 'px', @@ -817,6 +921,10 @@ Magnify.prototype = { // Store image initial data $.extend(this.imageData, { + initWidth: img.width * scale, + initHeight: img.height * scale, + initLeft: (stageData.w - img.width * scale) / 2, + initTop: (stageData.h - img.height * scale) / 2, width: img.width * scale, height: img.height * scale, left: (stageData.w - img.width * scale) / 2, @@ -824,7 +932,9 @@ Magnify.prototype = { }); // Set grab cursor - setGrabCursor({ w: $image.width(), h: $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, this.isRotated ); @@ -852,18 +962,20 @@ Magnify.prototype = { } if (isIE8()) { - this.$stage.html('') + this.$stage.html(''); } else { this.$image.attr('src', imgSrc); } preloadImg(imgSrc, function (img) { + // Store HTMLImageElement + self.img = img; // Store original data self.imageData = { originalWidth: img.width, originalHeight: img.height - } + }; if (self.isMaximized || (self.isOpened && self.options.fixedModalPos)) { self.setImageSize(img); @@ -971,19 +1083,20 @@ Magnify.prototype = { this.$image = isIE8() ? this.$stage.find('.magnify-image') : this.$image; - // zoom out & zoom in + // zoom out ratio & zoom in ratio ratio = ratio < 0 ? (1 / (1 - ratio)) : (1 + ratio); - if (ratio > 0.95 && ratio < 1.05) { - ratio = 1; - } - + // image ratio ratio = this.$image.width() / this.imageData.originalWidth * ratio; - // min image size - ratio = Math.max(ratio, this.options.minRatio); - // max image size - ratio = Math.min(ratio, this.options.maxRatio); + // Fixed digital error + // if (ratio > 0.95 && ratio < 1.05) { + // ratio = 1; + // } + + if (ratio > this.options.maxRatio || ratio < this.options.minRatio) { + return; + } this.zoomTo(ratio, origin, e); @@ -1006,11 +1119,11 @@ Magnify.prototype = { h: $stage.height(), x: $stage.offset().left, y: $stage.offset().top - } + }; var newWidth = this.imageData.originalWidth * ratio, newHeight = this.imageData.originalHeight * ratio, - // Think about it for a while ~~~ + // Think about it for a while newLeft = origin.x - (origin.x - imgData.x) / imgData.w * newWidth, newTop = origin.y - (origin.y - imgData.y) / imgData.h * newHeight; @@ -1028,27 +1141,47 @@ Magnify.prototype = { if (imgNewHeight <= stageData.h) { newTop = (stageData.h - newHeight) / 2; } else { - newTop = newTop > δ ? δ : (newTop > (offsetY - δ) ? newTop : (offsetY - δ)); + newTop = newTop > δ + ? δ + : (newTop > (offsetY - δ) + ? newTop + : (offsetY - δ)); } if (imgNewWidth <= stageData.w) { newLeft = (stageData.w - newWidth) / 2; } else { - newLeft = newLeft > -δ ? -δ : (newLeft > (offsetX + δ) ? newLeft : (offsetX + δ)); + newLeft = newLeft > -δ + ? -δ + : (newLeft > (offsetX + δ) + ? newLeft + : (offsetX + δ)); } - $image.css({ - width: Math.round(newWidth) + 'px', - height: Math.round(newHeight) + 'px', - left: Math.round(newLeft) + 'px', - top: Math.round(newTop) + 'px' - }); - - if (isIE8()) { - $image.find('group').css({ - width: Math.ceil(newWidth) + 'px', - height: Math.ceil(newHeight) + 'px' + // if the image scale get to the critical point + if (Math.abs(this.imageData.initWidth - newWidth) < this.imageData.initWidth * 0.05) { + this.setImageSize(this.img); + } else { + $image.css({ + width: Math.round(newWidth) + 'px', + height: Math.round(newHeight) + 'px', + left: Math.round(newLeft) + 'px', + top: Math.round(newTop) + 'px' }); + + if (isIE8()) { + $image.find('group').css({ + width: Math.ceil(newWidth) + 'px', + height: Math.ceil(newHeight) + 'px' + }); + } + + // Set grab cursor + setGrabCursor( + { w: Math.round(imgNewWidth), h: Math.round(imgNewHeight) }, + { w: stageData.w, h: stageData.h }, + this.$stage + ); } // Update image initial data @@ -1059,11 +1192,6 @@ Magnify.prototype = { top: newTop }); - // Set grab cursor - setGrabCursor({ w: Math.round(imgNewWidth), h: Math.round(imgNewHeight) }, { w: stageData.w, h: stageData.h }, - this.$stage - ); - }, rotate: function (angle) { @@ -1088,7 +1216,10 @@ Magnify.prototype = { angle: angle }); - this.setImageSize({ width: this.imageData.originalWidth, height: this.imageData.originalHeight }); + this.setImageSize({ + width: this.imageData.originalWidth, + height: this.imageData.originalHeight + }); // Remove grab cursor when rotate this.$stage.removeClass('is-grab'); @@ -1103,9 +1234,15 @@ Magnify.prototype = { if (self.isOpened) { if (self.isMaximized) { - self.setImageSize({ width: self.imageData.originalWidth, height: self.imageData.originalHeight }); + self.setImageSize({ + width: self.imageData.originalWidth, + height: self.imageData.originalHeight + }); } else { - self.setModalSize({ width: self.imageData.originalWidth, height: self.imageData.originalHeight }); + self.setModalSize({ + width: self.imageData.originalWidth, + height: self.imageData.originalHeight + }); } } @@ -1144,16 +1281,27 @@ Magnify.prototype = { 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 : ($W.width() - this.options.modalWidth) / 2 + $D.scrollLeft(), - top: this.modalData.top ? this.modalData.top : ($W.height() - this.options.modalHeight) / 2 + $D.scrollTop() + 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 + : ($W.width() - this.options.modalWidth) / 2 + $D.scrollLeft(), + top: this.modalData.top + ? this.modalData.top + : ($W.height() - this.options.modalHeight) / 2 + $D.scrollTop() }); this.isMaximized = false; } - this.setImageSize({ width: this.imageData.originalWidth, height: this.imageData.originalHeight }); + this.setImageSize({ + width: this.imageData.originalWidth, + height: this.imageData.originalHeight + }); }, fullscreen: function () { @@ -1174,49 +1322,69 @@ Magnify.prototype = { altKey = e.altKey || e.metaKey; switch (keyCode) { - // ← - case 37: - self.jump(-1); - break; + // ← + case 37: + self.jump(-1); + break; // → - case 39: - self.jump(1); - break; + case 39: + self.jump(1); + break; // + - case 187: - self.zoom(self.options.ratioThreshold * 3, { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, e); - break; + case 187: + self.zoom( + self.options.ratioThreshold * 3, + { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, + e + ); + break; // - - case 189: - self.zoom(-self.options.ratioThreshold * 3, { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, e); - break; + case 189: + self.zoom( + -self.options.ratioThreshold * 3, + { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, + e + ); + break; // + Firefox - case 61: - self.zoom(self.options.ratioThreshold * 3, { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, e); - break; + case 61: + self.zoom( + self.options.ratioThreshold * 3, + { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, + e + ); + break; // - Firefox - case 173: - self.zoom(-self.options.ratioThreshold * 3, { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, e); - break; + case 173: + self.zoom( + -self.options.ratioThreshold * 3, + { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, + e + ); + break; // ctrl + alt + 0 - case 48: - if (ctrlKey && altKey) { - self.zoomTo(1, { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, e); - } - break; + case 48: + if (ctrlKey && altKey) { + self.zoomTo( + 1, + { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, + e + ); + } + break; // ctrl + , - case 188: - if (ctrlKey) { - self.rotate(-90); - } - break; + case 188: + if (ctrlKey) { + self.rotate(-90); + } + break; // ctrl + . - case 190: - if (ctrlKey) { - self.rotate(90); - } - break; - default: + case 190: + if (ctrlKey) { + self.rotate(90); + } + break; + default: } }, @@ -1233,15 +1401,27 @@ Magnify.prototype = { }); 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); + self.zoom( + self.options.ratioThreshold * 3, + { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, + e + ); }); this.$zoomOut.off(CLICK_EVENT + EVENT_NS).on(CLICK_EVENT + EVENT_NS, function (e) { - self.zoom(-self.options.ratioThreshold * 3, { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, e); + self.zoom( + -self.options.ratioThreshold * 3, + { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, + e + ); }); this.$actualSize.off(CLICK_EVENT + EVENT_NS).on(CLICK_EVENT + EVENT_NS, function (e) { - self.zoomTo(1, { x: self.$stage.width() / 2, y: self.$stage.height() / 2 }, e); + 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 () { @@ -1280,7 +1460,7 @@ Magnify.prototype = { this.options.callbacks[e].apply(this, $.isArray(data) ? data : [data]); } } -} +}; /** * jQuery plugin @@ -1293,7 +1473,7 @@ $.fn.magnify = function (options) { // Convert a numeric string into a number for (var key in options) { if (typeof (options[key]) === 'string' && !isNaN(options[key])) { - options[key] = parseFloat(options[key]) + options[key] = parseFloat(options[key]); } } @@ -1335,7 +1515,7 @@ $.fn.magnify = function (options) { return jqEl; -} +}; /** * MAGNIFY DATA-API @@ -1389,8 +1569,12 @@ var draggable = function (modal, dragHandle, dragCancel) { isDragging = true; - startX = e.type === 'touchstart' ? e.originalEvent.targetTouches[0].pageX : e.clientX; - startY = e.type === 'touchstart' ? e.originalEvent.targetTouches[0].pageY : e.clientY; + startX = e.type === 'touchstart' + ? e.originalEvent.targetTouches[0].pageX + : e.clientX; + startY = e.type === 'touchstart' + ? e.originalEvent.targetTouches[0].pageY + : e.clientY; left = $(modal).offset().left; top = $(modal).offset().top; @@ -1398,7 +1582,7 @@ var draggable = function (modal, dragHandle, dragCancel) { $D.on(TOUCH_MOVE_EVENT + EVENT_NS, dragMove) .on(TOUCH_END_EVENT + EVENT_NS, dragEnd); - } + }; var dragMove = function (e) { @@ -1408,8 +1592,12 @@ var draggable = function (modal, dragHandle, dragCancel) { if (isDragging && !PUBLIC_VARS['isMoving'] && !PUBLIC_VARS['isResizing'] && !self.isMaximized) { - var endX = e.type === 'touchmove' ? e.originalEvent.targetTouches[0].pageX : e.clientX, - endY = e.type === 'touchmove' ? e.originalEvent.targetTouches[0].pageY : e.clientY, + var endX = e.type === 'touchmove' + ? e.originalEvent.targetTouches[0].pageX + : e.clientX, + endY = e.type === 'touchmove' + ? e.originalEvent.targetTouches[0].pageY + : e.clientY, relativeX = endX - startX, relativeY = endY - startY; @@ -1421,7 +1609,7 @@ var draggable = function (modal, dragHandle, dragCancel) { } - } + }; var dragEnd = function (e) { @@ -1430,11 +1618,11 @@ var draggable = function (modal, dragHandle, dragCancel) { isDragging = false; - } + }; $(dragHandle).on(TOUCH_START_EVENT + EVENT_NS, dragStart); -} +}; // Add to Magnify Prototype $.extend(Magnify.prototype, { @@ -1484,15 +1672,23 @@ var movable = function (stage, image) { stageWidth = $(stage).width(), stageHeight = $(stage).height(); - startX = e.type === 'touchstart' ? e.originalEvent.targetTouches[0].pageX : e.clientX; - startY = e.type === 'touchstart' ? e.originalEvent.targetTouches[0].pageY : e.clientY; + startX = e.type === 'touchstart' + ? e.originalEvent.targetTouches[0].pageX + : e.clientX; + startY = e.type === 'touchstart' + ? e.originalEvent.targetTouches[0].pageY + : e.clientY; // δ is the difference between image width and height δ = !self.isRotated ? 0 : (imageWidth - imageHeight) / 2; // Width or height difference can be use to limit image right or top position - widthDiff = !self.isRotated ? (imageWidth - stageWidth) : (imageHeight - stageWidth); - heightDiff = !self.isRotated ? (imageHeight - stageHeight) : (imageWidth - stageHeight); + widthDiff = !self.isRotated + ? (imageWidth - stageWidth) + : (imageHeight - stageWidth); + heightDiff = !self.isRotated + ? (imageHeight - stageHeight) + : (imageWidth - stageHeight); // Modal can be dragging if image is smaller to stage isDragging = (widthDiff > 0 || heightDiff > 0) ? true : false; @@ -1511,7 +1707,7 @@ var movable = function (stage, image) { $D.on(TOUCH_MOVE_EVENT + EVENT_NS, dragMove) .on(TOUCH_END_EVENT + EVENT_NS, dragEnd); - } + }; var dragMove = function (e) { @@ -1523,8 +1719,12 @@ var movable = function (stage, image) { if (isDragging) { - var endX = e.type === 'touchmove' ? e.originalEvent.targetTouches[0].pageX : e.clientX, - endY = e.type === 'touchmove' ? e.originalEvent.targetTouches[0].pageY : e.clientY, + var endX = e.type === 'touchmove' + ? e.originalEvent.targetTouches[0].pageX + : e.clientX, + endY = e.type === 'touchmove' + ? e.originalEvent.targetTouches[0].pageY + : e.clientY, relativeX = endX - startX, relativeY = endY - startY, @@ -1570,7 +1770,7 @@ var movable = function (stage, image) { } - } + }; var dragEnd = function (e) { @@ -1583,11 +1783,11 @@ var movable = function (stage, image) { // Remove grabbing cursor $('html,body,.magnify-modal,.magnify-stage,.magnify-button,.magnify-resizable-handle').removeClass('is-grabbing'); - } + }; $(stage).on(TOUCH_START_EVENT + EVENT_NS, dragStart); -} +}; // Add to Magnify Prototype $.extend(Magnify.prototype, { @@ -1609,7 +1809,7 @@ $.extend(Magnify.prototype, { * @param {[Number]} minHeight [the option of modalHeight] */ -var resizable = function(modal, stage, image, minWidth, minHeight) { +var resizable = function (modal, stage, image, minWidth, minHeight) { var self = this; @@ -1631,7 +1831,7 @@ var resizable = function(modal, stage, image, minWidth, minHeight) { 'nw': resizableHandleNW, 'ne': resizableHandleNE, 'sw': resizableHandleSW - } + }; $(modal).append( resizableHandleE, resizableHandleW, resizableHandleS, resizableHandleN, @@ -1670,11 +1870,15 @@ var resizable = function(modal, stage, image, minWidth, minHeight) { direction = ''; // modal CSS options - var getModalOpts = function(dir, offsetX, offsetY) { + var getModalOpts = function (dir, offsetX, offsetY) { // Modal should not move when its width to the minwidth - var modalLeft = (-offsetX + modalData.w) > minWidth ? (offsetX + modalData.l) : (modalData.l + modalData.w - minWidth), - modalTop = (-offsetY + modalData.h) > minHeight ? (offsetY + modalData.t) : (modalData.t + modalData.h - minHeight); + var modalLeft = (-offsetX + modalData.w) > minWidth + ? (offsetX + modalData.l) + : (modalData.l + modalData.w - minWidth), + modalTop = (-offsetY + modalData.h) > minHeight + ? (offsetY + modalData.t) + : (modalData.t + modalData.h - minHeight); var opts = { 'e': { @@ -1714,10 +1918,10 @@ var resizable = function(modal, stage, image, minWidth, minHeight) { }; return opts[dir]; - } + }; // image CSS options - var getImageOpts = function(dir, offsetX, offsetY) { + var getImageOpts = function (dir, offsetX, offsetY) { var $image = isIE8() ? $(stage).find(image) : $(image); @@ -1729,54 +1933,122 @@ var resizable = function(modal, stage, image, minWidth, minHeight) { // Image should not move when modal width to the min width // The minwidth is modal width, so we should clac the stage minwidth - var widthDiff = (offsetX + modalData.w) > minWidth ? (stageData.w - imgWidth + offsetX - δ) : (minWidth - (modalData.w - stageData.w) - imgWidth - δ), - heightDiff = (offsetY + modalData.h) > minHeight ? (stageData.h - imgHeight + offsetY + δ) : (minHeight - (modalData.h - stageData.h) - imgHeight + δ), - - widthDiff2 = (-offsetX + modalData.w) > minWidth ? (stageData.w - imgWidth - offsetX - δ) : (minWidth - (modalData.w - stageData.w) - imgWidth - δ), - heightDiff2 = (-offsetY + modalData.h) > minHeight ? (stageData.h - imgHeight - offsetY + δ) : (minHeight - (modalData.h - stageData.h) - imgHeight + δ); + var widthDiff = (offsetX + modalData.w) > minWidth + ? (stageData.w - imgWidth + offsetX - δ) + : (minWidth - (modalData.w - stageData.w) - imgWidth - δ), + heightDiff = (offsetY + modalData.h) > minHeight + ? (stageData.h - imgHeight + offsetY + δ) + : (minHeight - (modalData.h - stageData.h) - imgHeight + δ), + + widthDiff2 = (-offsetX + modalData.w) > minWidth + ? (stageData.w - imgWidth - offsetX - δ) + : (minWidth - (modalData.w - stageData.w) - imgWidth - δ), + heightDiff2 = (-offsetY + modalData.h) > minHeight + ? (stageData.h - imgHeight - offsetY + δ) + : (minHeight - (modalData.h - stageData.h) - imgHeight + δ); // Get image position in dragging - var imgLeft = (widthDiff > 0 ? imgPosLeft : (imgPosLeft < 0 ? imgPosLeft : 0)) - δ, - imgTop = (heightDiff > 0 ? imgPosTop : (imgPosTop < 0 ? imgPosTop : 0)) + δ, - - imgLeft2 = (widthDiff2 > 0 ? imgPosLeft : (imgPosLeft < 0 ? imgPosLeft : 0)) - δ, - imgTop2 = (heightDiff2 > 0 ? imgPosTop : (imgPosTop < 0 ? imgPosTop : 0)) + δ; + var imgLeft = (widthDiff > 0 + ? imgPosLeft + : (imgPosLeft < 0 + ? imgPosLeft + : 0)) - δ, + imgTop = (heightDiff > 0 + ? imgPosTop + : (imgPosTop < 0 + ? imgPosTop + : 0)) + δ, + + imgLeft2 = (widthDiff2 > 0 + ? imgPosLeft + : (imgPosLeft < 0 + ? imgPosLeft + : 0)) - δ, + imgTop2 = (heightDiff2 > 0 + ? imgPosTop + : (imgPosTop < 0 + ? imgPosTop + : 0)) + δ; var opts = { 'e': { - left: widthDiff >= -δ ? ((widthDiff - δ) / 2 + 'px') : (imgLeft > widthDiff ? (imgLeft + 'px') : (widthDiff + 'px')) + left: widthDiff >= -δ + ? ((widthDiff - δ) / 2 + 'px') + : (imgLeft > widthDiff + ? (imgLeft + 'px') + : (widthDiff + 'px')) }, 's': { - top: heightDiff >= δ ? ((heightDiff + δ) / 2 + 'px') : (imgTop > heightDiff ? (imgTop + 'px') : (heightDiff + 'px')) + top: heightDiff >= δ + ? ((heightDiff + δ) / 2 + 'px') + : (imgTop > heightDiff + ? (imgTop + 'px') + : (heightDiff + 'px')) }, 'se': { - top: heightDiff >= δ ? ((heightDiff + δ) / 2 + 'px') : (imgTop > heightDiff ? (imgTop + 'px') : (heightDiff + 'px')), - left: widthDiff >= -δ ? ((widthDiff - δ) / 2 + 'px') : (imgLeft > widthDiff ? (imgLeft + 'px') : (widthDiff + 'px')) + top: heightDiff >= δ + ? ((heightDiff + δ) / 2 + 'px') + : (imgTop > heightDiff ? (imgTop + 'px') : (heightDiff + 'px')), + left: widthDiff >= -δ + ? ((widthDiff - δ) / 2 + 'px') + : (imgLeft > widthDiff ? (imgLeft + 'px') : (widthDiff + 'px')) }, 'w': { - left: widthDiff2 >= -δ ? ((widthDiff2 - δ) / 2 + 'px') : (imgLeft2 > widthDiff2 ? (imgLeft2 + 'px') : (widthDiff2 + 'px')) + left: widthDiff2 >= -δ + ? ((widthDiff2 - δ) / 2 + 'px') + : (imgLeft2 > widthDiff2 + ? (imgLeft2 + 'px') + : (widthDiff2 + 'px')) }, 'n': { - top: heightDiff2 >= δ ? ((heightDiff2 + δ) / 2 + 'px') : (imgTop2 > heightDiff2 ? (imgTop2 + 'px') : (heightDiff2 + 'px')) + top: heightDiff2 >= δ + ? ((heightDiff2 + δ) / 2 + 'px') + : (imgTop2 > heightDiff2 + ? (imgTop2 + 'px') + : (heightDiff2 + 'px')) }, 'nw': { - top: heightDiff2 >= δ ? ((heightDiff2 + δ) / 2 + 'px') : (imgTop2 > heightDiff2 ? (imgTop2 + 'px') : (heightDiff2 + 'px')), - left: widthDiff2 >= -δ ? ((widthDiff2 - δ) / 2 + 'px') : (imgLeft2 > widthDiff2 ? (imgLeft2 + 'px') : (widthDiff2 + 'px')) + top: heightDiff2 >= δ + ? ((heightDiff2 + δ) / 2 + 'px') + : (imgTop2 > heightDiff2 + ? (imgTop2 + 'px') + : (heightDiff2 + 'px')), + left: widthDiff2 >= -δ + ? ((widthDiff2 - δ) / 2 + 'px') + : (imgLeft2 > widthDiff2 + ? (imgLeft2 + 'px') + : (widthDiff2 + 'px')) }, 'ne': { - top: heightDiff2 >= δ ? ((heightDiff2 + δ) / 2 + 'px') : (imgTop2 > heightDiff2 ? (imgTop2 + 'px') : (heightDiff2 + 'px')), - left: widthDiff >= -δ ? ((widthDiff - δ) / 2 + 'px') : (imgLeft > widthDiff ? (imgLeft + 'px') : (widthDiff + 'px')) + top: heightDiff2 >= δ + ? ((heightDiff2 + δ) / 2 + 'px') + : (imgTop2 > heightDiff2 + ? (imgTop2 + 'px') + : (heightDiff2 + 'px')), + left: widthDiff >= -δ + ? ((widthDiff - δ) / 2 + 'px') + : (imgLeft > widthDiff + ? (imgLeft + 'px') + : (widthDiff + 'px')) }, 'sw': { - top: heightDiff >= δ ? ((heightDiff + δ) / 2 + 'px') : (imgTop > heightDiff ? (imgTop + 'px') : (heightDiff + 'px')), - left: widthDiff2 >= -δ ? ((widthDiff2 - δ) / 2 + 'px') : (imgLeft2 > widthDiff2 ? (imgLeft2 + 'px') : (widthDiff2 + 'px')) + top: heightDiff >= δ + ? ((heightDiff + δ) / 2 + 'px') + : (imgTop > heightDiff + ? (imgTop + 'px') + : (heightDiff + 'px')), + left: widthDiff2 >= -δ + ? ((widthDiff2 - δ) / 2 + 'px') + : (imgLeft2 > widthDiff2 + ? (imgLeft2 + 'px') + : (widthDiff2 + 'px')) } }; return opts[dir]; - } + }; - var dragStart = function(dir, e) { + var dragStart = function (dir, e) { var e = e || window.event; @@ -1787,8 +2059,12 @@ var resizable = function(modal, stage, image, minWidth, minHeight) { isDragging = true; PUBLIC_VARS['isResizing'] = true; - startX = e.type === 'touchstart' ? e.originalEvent.targetTouches[0].pageX : e.clientX; - startY = e.type === 'touchstart' ? e.originalEvent.targetTouches[0].pageY : e.clientY; + startX = e.type === 'touchstart' + ? e.originalEvent.targetTouches[0].pageX + : e.clientX; + startY = e.type === 'touchstart' + ? e.originalEvent.targetTouches[0].pageY + : e.clientY; // Reclac the modal data when mousedown modalData = { @@ -1796,21 +2072,21 @@ var resizable = function(modal, stage, image, minWidth, minHeight) { h: $(modal).height(), l: $(modal).offset().left, t: $(modal).offset().top - } + }; stageData = { w: $(stage).width(), h: $(stage).height(), l: $(stage).offset().left, t: $(stage).offset().top - } + }; imageData = { w: $image.width(), h: $image.height(), l: $image.position().left, t: $image.position().top - } + }; // δ is the difference between image width and height δ = !self.isRotated ? 0 : (imageData.w - imageData.h) / 2; @@ -1825,9 +2101,9 @@ var resizable = function(modal, stage, image, minWidth, minHeight) { $D.on(TOUCH_MOVE_EVENT + EVENT_NS, dragMove) .on(TOUCH_END_EVENT + EVENT_NS, dragEnd); - } + }; - var dragMove = function(e) { + var dragMove = function (e) { var e = e || window.event; @@ -1837,8 +2113,12 @@ var resizable = function(modal, stage, image, minWidth, minHeight) { if (isDragging && !self.isMaximized) { - var endX = e.type === 'touchmove' ? e.originalEvent.targetTouches[0].pageX : e.clientX, - endY = e.type === 'touchmove' ? e.originalEvent.targetTouches[0].pageY : e.clientY, + var endX = e.type === 'touchmove' + ? e.originalEvent.targetTouches[0].pageX + : e.clientX, + endY = e.type === 'touchmove' + ? e.originalEvent.targetTouches[0].pageY + : e.clientY, relativeX = endX - startX, relativeY = endY - startY; @@ -1851,18 +2131,22 @@ var resizable = function(modal, stage, image, minWidth, minHeight) { $image.css(imageOpts); + self.isDoResize = true; + } - } + }; - var dragEnd = function(e) { + var dragEnd = function (e) { $D.off(TOUCH_MOVE_EVENT + EVENT_NS, dragMove) .off(TOUCH_END_EVENT + EVENT_NS, dragEnd); // Set grab cursor if (PUBLIC_VARS['isResizing']) { - setGrabCursor({ w: imgWidth, h: imgHeight }, { w: $(stage).width(), h: $(stage).height() }, + setGrabCursor( + { w: imgWidth, h: imgHeight }, + { w: $(stage).width(), h: $(stage).height() }, stage ); } @@ -1872,16 +2156,29 @@ var resizable = function(modal, stage, image, minWidth, minHeight) { // Remove resizable cursor $('html,body,.magnify-modal,.magnify-stage,.magnify-button').css('cursor', ''); + + // Update image initial data + var scale = self.getImageScaleToStage( + $(stage).width(), + $(stage).height() + ); + + $.extend(self.imageData, { + initWidth: self.img.width * scale, + initHeight: self.img.height * scale, + initLeft: ($(stage).width() - self.img.width * scale) / 2, + initTop: ($(stage).height() - self.img.height * scale) / 2 + }); }; - $.each(resizableHandles, function(dir, handle) { - handle.on(TOUCH_START_EVENT + EVENT_NS, function(e) { + $.each(resizableHandles, function (dir, handle) { + handle.on(TOUCH_START_EVENT + EVENT_NS, function (e) { dragStart(dir, e); }); }); -} +}; // Add to Magnify Prototype $.extend(Magnify.prototype, { @@ -1899,13 +2196,13 @@ $.extend(Magnify.prototype, { */ (function($) { - var supportedCSS, supportedCSSOrigin, styles = document.getElementsByTagName("head")[0].style, - toCheck = "transformProperty WebkitTransform OTransform msTransform MozTransform".split(" "); + 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"; + 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 @@ -1913,8 +2210,8 @@ $.extend(Magnify.prototype, { jQuery.fn.extend({ rotate: function(parameters) { - if (this.length === 0 || typeof parameters == "undefined") return; - if (typeof parameters == "number") parameters = { angle: 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); @@ -1963,14 +2260,14 @@ $.extend(Magnify.prototype, { 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.style.display = 'inline-block'; this._rootObj.Wilq32 = { PhotoEffect: this }; @@ -1981,30 +2278,30 @@ $.extend(Magnify.prototype, { } else { var self = this; // TODO: Remove jQuery dependency - jQuery(this._img).bind("load", function() { self._Loader(); }); + 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); + 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._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") { + 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]; @@ -2013,7 +2310,7 @@ $.extend(Magnify.prototype, { 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 }, + _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); @@ -2057,27 +2354,27 @@ $.extend(Magnify.prototype, { 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._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.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.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; @@ -2085,7 +2382,7 @@ $.extend(Magnify.prototype, { 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; @@ -2104,14 +2401,14 @@ $.extend(Magnify.prototype, { 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.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._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'); @@ -2119,7 +2416,7 @@ $.extend(Magnify.prototype, { while (parameters = this._onLoadDelegate.shift()) { this._handleRotation(parameters, true); } - } + }; })(), _animateStart: function() { @@ -2164,19 +2461,19 @@ $.extend(Magnify.prototype, { 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"; + 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(" "); - } + this._img.style[supportedCSS] = 'rotate(' + (angle % 360) + 'deg)'; + this._img.style[supportedCSSOrigin] = this._parameters.center.join(' '); + }; else return function(angle) { this._angle = angle; @@ -2192,16 +2489,16 @@ $.extend(Magnify.prototype, { 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)"); + document.createStyleSheet().addRule('.rvml', 'behavior:url(#default#VML)'); try { - !document.namespaces.rvml && document.namespaces.add("rvml", "urn:schemas-microsoft-com:vml"); + !document.namespaces.rvml && document.namespaces.add('rvml', 'urn:schemas-microsoft-com:vml'); return function(tagName) { return document.createElement(''); }; diff --git a/package.json b/package.json index 98dc8fe..7196dbb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "jquery.magnify", - "version": "1.3.0", + "version": "1.3.1", "description": "A jQuery plugin to view images just like in Windows", "main": "magnify.js", "homepage": "https://github.com/nzbin/magnify#readme", diff --git a/src/js/core.js b/src/js/core.js index c2cd377..f100d09 100644 --- a/src/js/core.js +++ b/src/js/core.js @@ -953,7 +953,7 @@ Magnify.prototype = { } // if the image scale get to the critical point - if (Math.abs(this.imageData.initWidth - newWidth) < Math.abs(this.imageData.initWidth * 0.05)) { + if (Math.abs(this.imageData.initWidth - newWidth) < this.imageData.initWidth * 0.05) { this.setImageSize(this.img); } else { $image.css({ diff --git a/src/js/intro.js b/src/js/intro.js index 206e2dc..8d0e45d 100644 --- a/src/js/intro.js +++ b/src/js/intro.js @@ -6,7 +6,7 @@ * | | | | _ | \_/ | |\ |_| |_| | | | * |__| |__|__| |__|\____/|_|__| \__|_____|__| |__| * - * jquery.magnify - v1.3.0 + * jquery.magnify - v1.3.1 * A jQuery plugin to view images just like in windows * https://github.com/nzbin/magnify#readme * diff --git a/src/sass/magnify.scss b/src/sass/magnify.scss index d227512..f0ff0fc 100644 --- a/src/sass/magnify.scss +++ b/src/sass/magnify.scss @@ -6,7 +6,7 @@ * | | | | _ | \_/ | |\ |_| |_| | | | * |__| |__|__| |__|\____/|_|__| \__|_____|__| |__| * - * jquery.magnify - v1.3.0 + * jquery.magnify - v1.3.1 * A jQuery plugin to view images just like in windows * https://github.com/nzbin/magnify#readme *