imageviewer
Advanced tools
imageviewer - npm Package Compare versions
Comparing version 0.3.0 to 0.3.1
| # Changelog | ||
| ## 0.3.1 (Dec 28, 2015) | ||
| - Supports to zoom from event triggering point. | ||
| - Fix a bug of the index of viewing image. | ||
| ## 0.3.0 (Dec 24, 2015) | ||
@@ -5,0 +11,0 @@ |
| /*! | ||
| * Viewer v0.3.0 | ||
| * Viewer v0.3.1 | ||
| * https://github.com/fengyuanchen/viewer | ||
@@ -8,3 +8,3 @@ * | ||
| * | ||
| * Date: 2015-12-24T09:51:24.343Z | ||
| * Date: 2015-12-28T03:12:02.123Z | ||
| */ | ||
@@ -159,2 +159,23 @@ | ||
| function getTouchesCenter(touches) { | ||
| var length = touches.length; | ||
| var pageX = 0; | ||
| var pageY = 0; | ||
| if (length) { | ||
| $.each(touches, function (i, touch) { | ||
| pageX += touch.pageX; | ||
| pageY += touch.pageY; | ||
| }); | ||
| pageX /= length; | ||
| pageY /= length; | ||
| } | ||
| return { | ||
| pageX: pageX, | ||
| pageY: pageY | ||
| }; | ||
| } | ||
| function Viewer(element, options) { | ||
@@ -603,8 +624,3 @@ this.$element = $(element); | ||
| case 'one-to-one': | ||
| if (image.ratio === 1) { | ||
| this.zoomTo(this.initialImage.ratio); | ||
| } else { | ||
| this.zoomTo(1); | ||
| } | ||
| this.toggle(); | ||
| break; | ||
@@ -736,3 +752,3 @@ | ||
| wheel: function (event) { | ||
| var e = event.originalEvent; | ||
| var e = event.originalEvent || event; | ||
| var ratio = num(this.options.zoomRatio) || 0.1; | ||
@@ -766,3 +782,3 @@ var delta = 1; | ||
| this.zoom(-delta * ratio, true); | ||
| this.zoom(-delta * ratio, true, event); | ||
| }, | ||
@@ -840,8 +856,3 @@ | ||
| e.preventDefault(); | ||
| if (this.image.ratio === 1) { | ||
| this.zoomTo(this.initialImage.ratio); | ||
| } else { | ||
| this.zoomTo(1); | ||
| } | ||
| this.toggle(); | ||
| } | ||
@@ -938,3 +949,3 @@ | ||
| this.change(); | ||
| this.change(event); | ||
| } | ||
@@ -982,3 +993,3 @@ }, | ||
| this.$element.one(EVENT_SHOWN, $.proxy(function () { | ||
| this.view((this.target ? this.$images.index(this.target) : 0) || this.index); | ||
| this.view(this.target ? this.$images.index(this.target) : this.index); | ||
| this.target = false; | ||
@@ -1020,3 +1031,3 @@ }, this)); | ||
| }, this)); | ||
| this.zoomTo(0, false, true); | ||
| this.zoomTo(0, false, false, true); | ||
| } else { | ||
@@ -1076,5 +1087,6 @@ $viewer.removeClass(CLASS_IN); | ||
| // Make the image visible if it fails to load within 1s | ||
| this.timeout = setTimeout(function () { | ||
| this.timeout = setTimeout($.proxy(function () { | ||
| $image.removeClass(CLASS_INVISIBLE); | ||
| }, 1000); | ||
| this.timeout = false; | ||
| }, this), 1000); | ||
| } | ||
@@ -1162,4 +1174,5 @@ | ||
| * @param {Boolean} hasTooltip (optional) | ||
| * @param {jQuery Event} _event (private) | ||
| */ | ||
| zoom: function (ratio, hasTooltip) { | ||
| zoom: function (ratio, hasTooltip, _event) { | ||
| var image = this.image; | ||
@@ -1175,3 +1188,3 @@ | ||
| this.zoomTo(image.width * ratio / image.naturalWidth, hasTooltip); | ||
| this.zoomTo(image.width * ratio / image.naturalWidth, hasTooltip, _event); | ||
| }, | ||
@@ -1184,5 +1197,6 @@ | ||
| * @param {Boolean} hasTooltip (optional) | ||
| * @param {jQuery Event} _event (private) | ||
| * @param {Boolean} _zoomable (private) | ||
| */ | ||
| zoomTo: function (ratio, hasTooltip, _zoomable) { | ||
| zoomTo: function (ratio, hasTooltip, _event, _zoomable) { | ||
| var options = this.options; | ||
@@ -1194,4 +1208,7 @@ var minZoomRatio = 0.01; | ||
| var height = image.height; | ||
| var originalEvent; | ||
| var newWidth; | ||
| var newHeight; | ||
| var offset; | ||
| var center; | ||
@@ -1213,4 +1230,24 @@ ratio = max(0, ratio); | ||
| newHeight = image.naturalHeight * ratio; | ||
| image.left -= (newWidth - width) / 2; | ||
| image.top -= (newHeight - height) / 2; | ||
| if (_event && (originalEvent = _event.originalEvent)) { | ||
| offset = this.$viewer.offset(); | ||
| center = originalEvent.touches ? getTouchesCenter(originalEvent.touches) : { | ||
| pageX: _event.pageX || originalEvent.pageX || 0, | ||
| pageY: _event.pageY || originalEvent.pageY || 0 | ||
| }; | ||
| // Zoom from the triggering point of the event | ||
| image.left -= (newWidth - width) * ( | ||
| ((center.pageX - offset.left) - image.left) / width | ||
| ); | ||
| image.top -= (newHeight - height) * ( | ||
| ((center.pageY - offset.top) - image.top) / height | ||
| ); | ||
| } else { | ||
| // Zoom from the center of the image | ||
| image.left -= (newWidth - width) / 2; | ||
| image.top -= (newHeight - height) / 2; | ||
| } | ||
| image.width = newWidth; | ||
@@ -1500,5 +1537,5 @@ image.height = newHeight; | ||
| if (this.image.ratio === 1) { | ||
| this.zoomTo(this.initialImage.ratio); | ||
| this.zoomTo(this.initialImage.ratio, true); | ||
| } else { | ||
| this.zoomTo(1); | ||
| this.zoomTo(1, true); | ||
| } | ||
@@ -1599,3 +1636,3 @@ }, | ||
| change: function () { | ||
| change: function (event) { | ||
| var offsetX = this.endX - this.startX; | ||
@@ -1623,3 +1660,3 @@ var offsetY = this.endY - this.startY; | ||
| abs(this.endY - this.endY2) | ||
| )); | ||
| ), false, event); | ||
@@ -1626,0 +1663,0 @@ this.startX2 = this.endX2; |
| /*! | ||
| * Viewer v0.3.0 | ||
| * Viewer v0.3.1 | ||
| * https://github.com/fengyuanchen/viewer | ||
@@ -8,4 +8,4 @@ * | ||
| * | ||
| * Date: 2015-12-24T09:51:24.343Z | ||
| * Date: 2015-12-28T03:12:02.123Z | ||
| */ | ||
| !function(i){"function"==typeof define&&define.amd?define("viewer",["jquery"],i):i("object"==typeof exports?require("jquery"):jQuery)}(function(i){"use strict";function t(i){return"string"==typeof i}function e(i){return"number"==typeof i&&!isNaN(i)}function s(i){return"undefined"==typeof i}function n(i,t){var s=[];return e(t)&&s.push(t),s.slice.apply(i,s)}function o(i,t){var e=n(arguments,2);return function(){return i.apply(t,e.concat(n(arguments)))}}function a(i){var t=[],s=i.rotate,n=i.scaleX,o=i.scaleY;return e(s)&&t.push("rotate("+s+"deg)"),e(n)&&e(o)&&t.push("scale("+n+","+o+")"),t.length?t.join(" "):"none"}function h(i){return i.offsetWidth}function r(i){return t(i)?i.replace(/^.*\//,"").replace(/[\?&#].*$/,""):""}function l(i,t){var e;return i.naturalWidth?t(i.naturalWidth,i.naturalHeight):(e=document.createElement("img"),e.onload=function(){t(this.width,this.height)},void(e.src=i.src))}function d(t,e){this.$element=i(t),this.options=i.extend({},d.DEFAULTS,i.isPlainObject(e)&&e),this.isImg=!1,this.isBuilt=!1,this.isShown=!1,this.isViewed=!1,this.isFulled=!1,this.isPlayed=!1,this.wheeling=!1,this.playing=!1,this.fading=!1,this.tooltiping=!1,this.transitioning=!1,this.action=!1,this.target=!1,this.timeout=!1,this.index=0,this.length=0,this.init()}var c=i(window),u=i(document),m="viewer",v=document.createElement(m),f="viewer-toggle",g="viewer-fixed",w="viewer-open",p="viewer-show",b="viewer-hide",y="viewer-fade",$="viewer-in",x="viewer-move",C="viewer-active",z="viewer-invisible",F="viewer-transition",I="viewer-fullscreen",k="viewer-fullscreen-exit",T="viewer-close",Y="img",P="mousedown touchstart pointerdown MSPointerDown",X="mousemove touchmove pointermove MSPointerMove",V="mouseup touchend touchcancel pointerup pointercancel MSPointerUp MSPointerCancel",D="wheel mousewheel DOMMouseScroll",S="transitionend",E="load."+m,L="keydown."+m,R="click."+m,q="resize."+m,M="build."+m,W="built."+m,_="show."+m,j="shown."+m,A="hide."+m,H="hidden."+m,B="view."+m,U="viewed."+m,N="undefined"!=typeof v.style.transition,O=Math.round,Z=Math.sqrt,K=Math.abs,Q=Math.min,G=Math.max,J=Number;d.prototype={constructor:d,init:function(){var t=this.options,e=this.$element,s=e.is(Y),n=s?e:e.find(Y),o=n.length,a=i.proxy(this.ready,this);o&&(i.isFunction(t.build)&&e.one(M,t.build),this.trigger(M).isDefaultPrevented()||(N||(t.transition=!1),this.isImg=s,this.length=o,this.count=0,this.$images=n,this.$body=i("body"),t.inline?(e.one(W,i.proxy(function(){this.view()},this)),n.each(function(){this.complete?a():i(this).one(E,a)})):(n.addClass(f),e.on(R,i.proxy(this.start,this)))))},ready:function(){this.count++,this.count===this.length&&this.build()},build:function(){var t,e,s,n,o=this.options,a=this.$element;this.isBuilt||(this.$parent=t=a.parent(),this.$viewer=e=i(d.TEMPLATE),this.$canvas=e.find(".viewer-canvas"),this.$footer=e.find(".viewer-footer"),this.$title=e.find(".viewer-title").toggleClass(b,!o.title),this.$toolbar=n=e.find(".viewer-toolbar").toggleClass(b,!o.toolbar),this.$navbar=e.find(".viewer-navbar").toggleClass(b,!o.navbar),this.$button=s=e.find(".viewer-button").toggleClass(b,!o.button),this.$tooltip=e.find(".viewer-tooltip"),this.$player=e.find(".viewer-player"),this.$list=e.find(".viewer-list"),n.find("li[class*=zoom]").toggleClass(z,!o.zoomable),n.find("li[class*=flip]").toggleClass(z,!o.scalable),o.rotatable||n.find("li[class*=rotate]").addClass(z).appendTo(n),o.inline?(s.addClass(I),e.css("z-index",o.zIndexInline),"static"===t.css("position")&&t.css("position","relative")):(s.addClass(T),e.css("z-index",o.zIndex).addClass([g,y,b].join(" "))),a.after(e),o.inline&&(this.render(),this.bind(),this.isShown=!0),this.isBuilt=!0,i.isFunction(o.built)&&a.one(W,o.built),this.trigger(W))},unbuild:function(){var i=this.options,t=this.$element;this.isBuilt&&(i.inline&&t.removeClass(b),this.$viewer.remove())},bind:function(){var t=this.options,e=this.$element;i.isFunction(t.view)&&e.on(B,t.view),i.isFunction(t.viewed)&&e.on(U,t.viewed),this.$viewer.on(R,i.proxy(this.click,this)).on(D,i.proxy(this.wheel,this)),this.$canvas.on(P,i.proxy(this.mousedown,this)),u.on(X,this._mousemove=o(this.mousemove,this)).on(V,this._mouseup=o(this.mouseup,this)).on(L,this._keydown=o(this.keydown,this)),c.on(q,this._resize=o(this.resize,this))},unbind:function(){var t=this.options,e=this.$element;i.isFunction(t.view)&&e.off(B,t.view),i.isFunction(t.viewed)&&e.off(U,t.viewed),this.$viewer.off(R,this.click).off(D,this.wheel),this.$canvas.off(P,this.mousedown),u.off(X,this._mousemove).off(V,this._mouseup).off(L,this._keydown),c.off(q,this._resize)},render:function(){this.initContainer(),this.initViewer(),this.initList(),this.renderViewer()},initContainer:function(){this.container={width:c.innerWidth(),height:c.innerHeight()}},initViewer:function(){var t,e=this.options,s=this.$parent;e.inline&&(this.parent=t={width:G(s.width(),e.minWidth),height:G(s.height(),e.minHeight)}),(this.isFulled||!t)&&(t=this.container),this.viewer=i.extend({},t)},renderViewer:function(){this.options.inline&&!this.isFulled&&this.$viewer.css(this.viewer)},initList:function(){var e=this.options,s=this.$element,n=this.$list,o=[];this.$images.each(function(s){var n=this.src,a=this.alt||r(n),h=e.url;n&&(t(h)?h=this.getAttribute(h):i.isFunction(h)&&(h=h.call(this,this)),o.push('<li><img src="'+n+'" data-action="view" data-index="'+s+'" data-original-url="'+(h||n)+'" alt="'+a+'"></li>'))}),n.html(o.join("")).find(Y).one(E,{filled:!0},i.proxy(this.loadImage,this)),this.$items=n.children(),e.transition&&s.one(U,function(){n.addClass(F)})},renderList:function(i){var t=i||this.index,e=this.$items.eq(t).width(),s=e+1;this.$list.css({width:s*this.length,marginLeft:(this.viewer.width-e)/2-s*t})},resetList:function(){this.$list.empty().removeClass(F).css("margin-left",0)},initImage:function(t){var e=this.options,s=this.$image,n=this.viewer,o=this.$footer.height(),a=n.width,h=G(n.height-o,o),r=this.image||{};l(s[0],i.proxy(function(s,n){var o,l,d=s/n,c=a,u=h;h*d>a?u=a/d:c=h*d,c=Q(.9*c,s),u=Q(.9*u,n),l={naturalWidth:s,naturalHeight:n,aspectRatio:d,ratio:c/s,width:c,height:u,left:(a-c)/2,top:(h-u)/2},o=i.extend({},l),e.rotatable&&(l.rotate=r.rotate||0,o.rotate=0),e.scalable&&(l.scaleX=r.scaleX||1,l.scaleY=r.scaleY||1,o.scaleX=1,o.scaleY=1),this.image=l,this.initialImage=o,i.isFunction(t)&&t()},this))},renderImage:function(t){var e=this.image,s=this.$image;s.css({width:e.width,height:e.height,marginLeft:e.left,marginTop:e.top,transform:a(e)}),i.isFunction(t)&&(this.transitioning?s.one(S,t):t())},resetImage:function(){this.$image.remove(),this.$image=null},start:function(t){var e=t.target;i(e).hasClass(f)&&(this.target=e,this.show())},click:function(t){var e=i(t.target),s=e.data("action"),n=this.image;switch(s){case"mix":this.isPlayed?this.stop():this.options.inline?this.isFulled?this.exit():this.full():this.hide();break;case"view":this.view(e.data("index"));break;case"zoom-in":this.zoom(.1,!0);break;case"zoom-out":this.zoom(-.1,!0);break;case"one-to-one":1===n.ratio?this.zoomTo(this.initialImage.ratio):this.zoomTo(1);break;case"reset":this.reset();break;case"prev":this.prev();break;case"play":this.play();break;case"next":this.next();break;case"rotate-left":this.rotate(-90);break;case"rotate-right":this.rotate(90);break;case"flip-horizontal":this.scale(-n.scaleX||-1,n.scaleY||1);break;case"flip-vertical":this.scale(n.scaleX||1,-n.scaleY||-1);break;default:this.isPlayed&&this.stop()}},load:function(){var t=this.options,e=this.viewer,s=this.$image;this.timeout&&(clearTimeout(this.timeout),this.timeout=!1),s.removeClass(z).css("cssText","width:0;height:0;margin-left:"+e.width/2+"px;margin-top:"+e.height/2+"px;max-width:none!important;visibility:visible;"),this.initImage(i.proxy(function(){s.toggleClass(F,t.transition).toggleClass(x,t.movable),this.renderImage(i.proxy(function(){this.isViewed=!0,this.trigger(U)},this))},this))},loadImage:function(t){var e=t.target,s=i(e),n=s.parent(),o=n.width(),a=n.height(),h=t.data&&t.data.filled;l(e,function(i,t){var e=i/t,n=o,r=a;a*e>o?h?n=a*e:r=o/e:h?r=o/e:n=a*e,s.css({width:n,height:r,marginLeft:(o-n)/2,marginTop:(a-r)/2})})},resize:function(){this.initContainer(),this.initViewer(),this.renderViewer(),this.renderList(),this.initImage(i.proxy(function(){this.renderImage()},this)),this.isPlayed&&this.$player.find(Y).one(E,i.proxy(this.loadImage,this)).trigger(E)},wheel:function(t){var e=t.originalEvent,s=J(this.options.zoomRatio)||.1,n=1;this.isViewed&&(t.preventDefault(),this.wheeling||(this.wheeling=!0,setTimeout(i.proxy(function(){this.wheeling=!1},this),50),e.deltaY?n=e.deltaY>0?1:-1:e.wheelDelta?n=-e.wheelDelta/120:e.detail&&(n=e.detail>0?1:-1),this.zoom(-n*s,!0)))},keydown:function(i){var t=this.options,e=i.which;if(this.isFulled&&t.keyboard)switch(e){case 27:this.isPlayed?this.stop():t.inline?this.isFulled&&this.exit():this.hide();break;case 32:this.isPlayed&&this.stop();break;case 37:this.prev();break;case 38:i.preventDefault(),this.zoom(t.zoomRatio,!0);break;case 39:this.next();break;case 40:i.preventDefault(),this.zoom(-t.zoomRatio,!0);break;case 48:case 49:(i.ctrlKey||i.shiftKey)&&(i.preventDefault(),1===this.image.ratio?this.zoomTo(this.initialImage.ratio):this.zoomTo(1))}},mousedown:function(i){var t,e=this.options,s=i.originalEvent,n=s&&s.touches,o=i,a=e.movable?"move":!1;if(this.isViewed){if(n){if(t=n.length,t>1){if(!e.zoomable||2!==t)return;o=n[1],this.startX2=o.pageX,this.startY2=o.pageY,a="zoom"}else this.isSwitchable()&&(a="switch");o=n[0]}a&&(i.preventDefault(),this.action=a,this.startX=o.pageX||s&&s.pageX,this.startY=o.pageY||s&&s.pageY)}},mousemove:function(i){var t,e=this.options,s=this.action,n=this.$image,o=i.originalEvent,a=o&&o.touches,h=i;if(this.isViewed){if(a){if(t=a.length,t>1){if(!e.zoomable||2!==t)return;h=a[1],this.endX2=h.pageX,this.endY2=h.pageY}h=a[0]}s&&(i.preventDefault(),"move"===s&&e.transition&&n.hasClass(F)&&n.removeClass(F),this.endX=h.pageX||o&&o.pageX,this.endY=h.pageY||o&&o.pageY,this.change())}},mouseup:function(i){var t=this.action;t&&(i.preventDefault(),"move"===t&&this.options.transition&&this.$image.addClass(F),this.action=!1)},show:function(){var t,e=this.options;e.inline||this.transitioning||(this.isBuilt||this.build(),i.isFunction(e.show)&&this.$element.one(_,e.show),this.trigger(_).isDefaultPrevented()||(this.$body.addClass(w),t=this.$viewer.removeClass(b),this.$element.one(j,i.proxy(function(){this.view((this.target?this.$images.index(this.target):0)||this.index),this.target=!1},this)),e.transition?(this.transitioning=!0,t.addClass(F),h(t[0]),t.one(S,i.proxy(this.shown,this)).addClass($)):(t.addClass($),this.shown())))},hide:function(){var t=this.options,e=this.$viewer;t.inline||this.transitioning||!this.isShown||(i.isFunction(t.hide)&&this.$element.one(A,t.hide),this.trigger(A).isDefaultPrevented()||(this.isViewed&&t.transition?(this.transitioning=!0,this.$image.one(S,i.proxy(function(){e.one(S,i.proxy(this.hidden,this)).removeClass($)},this)),this.zoomTo(0,!1,!0)):(e.removeClass($),this.hidden())))},view:function(t){var e,s,n,o,a,h=this.$title;t=Number(t)||0,!this.isShown||this.isPlayed||0>t||t>=this.length||this.isViewed&&t===this.index||this.trigger(B).isDefaultPrevented()||(s=this.$items.eq(t),n=s.find(Y),o=n.data("originalUrl"),a=n.attr("alt"),this.$image=e=i('<img src="'+o+'" alt="'+a+'">'),this.$items.eq(this.index).removeClass(C),s.addClass(C),this.isViewed=!1,this.index=t,this.image=null,this.$canvas.html(e.addClass(z)),e[0].complete?this.load():(e.one(E,i.proxy(this.load,this)),this.timeout&&clearTimeout(this.timeout),this.timeout=setTimeout(function(){e.removeClass(z)},1e3)),h.empty(),this.renderList(),this.$element.one(U,i.proxy(function(){var i=this.image,t=i.naturalWidth,e=i.naturalHeight;h.html(a+" ("+t+" × "+e+")")},this)))},prev:function(){this.view(G(this.index-1,0))},next:function(){this.view(Q(this.index+1,this.length-1))},move:function(i,t){var e=this.image;this.moveTo(s(i)?i:e.left+J(i),s(t)?t:e.top+J(t))},moveTo:function(i,t){var n=this.image,o=!1;s(t)&&(t=i),i=J(i),t=J(t),this.isViewed&&!this.isPlayed&&this.options.movable&&(e(i)&&(n.left=i,o=!0),e(t)&&(n.top=t,o=!0),o&&this.renderImage())},zoom:function(i,t){var e=this.image;i=J(i),i=0>i?1/(1-i):1+i,this.zoomTo(e.width*i/e.naturalWidth,t)},zoomTo:function(i,t,s){var n,o,a=this.options,h=.01,r=100,l=this.image,d=l.width,c=l.height;i=G(0,i),e(i)&&this.isViewed&&!this.isPlayed&&(s||a.zoomable)&&(s||(h=G(h,a.minZoomRatio),r=Q(r,a.maxZoomRatio),i=Q(G(i,h),r)),i>.95&&1.05>i&&(i=1),n=l.naturalWidth*i,o=l.naturalHeight*i,l.left-=(n-d)/2,l.top-=(o-c)/2,l.width=n,l.height=o,l.ratio=i,this.renderImage(),t&&this.tooltip())},rotate:function(i){this.rotateTo((this.image.rotate||0)+J(i))},rotateTo:function(i){var t=this.image;i=J(i),e(i)&&this.isViewed&&!this.isPlayed&&this.options.rotatable&&(t.rotate=i,this.renderImage())},scale:function(i,t){var n=this.image,o=!1;s(t)&&(t=i),i=J(i),t=J(t),this.isViewed&&!this.isPlayed&&this.options.scalable&&(e(i)&&(n.scaleX=i,o=!0),e(t)&&(n.scaleY=t,o=!0),o&&this.renderImage())},scaleX:function(i){this.scale(i,this.image.scaleY)},scaleY:function(i){this.scale(this.image.scaleX,i)},play:function(){var t,s=this.options,n=this.$player,o=i.proxy(this.loadImage,this),a=[],h=0,r=0;this.isShown&&!this.isPlayed&&(s.fullscreen&&this.fullscreen(),this.isPlayed=!0,n.addClass(p),this.$items.each(function(t){var e=i(this),l=e.find(Y),d=i('<img src="'+l.data("originalUrl")+'" alt="'+l.attr("alt")+'">');h++,d.addClass(y).toggleClass(F,s.transition),e.hasClass(C)&&(d.addClass($),r=t),a.push(d),d.one(E,{filled:!1},o),n.append(d)}),e(s.interval)&&s.interval>0&&(t=i.proxy(function(){this.playing=setTimeout(function(){a[r].removeClass($),r++,r=h>r?r:0,a[r].addClass($),t()},s.interval)},this),h>1&&t()))},stop:function(){this.isPlayed&&(this.isPlayed=!1,clearTimeout(this.playing),this.$player.removeClass(p).empty())},full:function(){var t=this.options,e=this.$image,s=this.$list;this.isShown&&!this.isPlayed&&!this.isFulled&&t.inline&&(this.isFulled=!0,this.$body.addClass(w),this.$button.addClass(k),t.transition&&(e.removeClass(F),s.removeClass(F)),this.$viewer.addClass(g).removeAttr("style").css("z-index",t.zIndex),this.initContainer(),this.viewer=i.extend({},this.container),this.renderList(),this.initImage(i.proxy(function(){this.renderImage(function(){t.transition&&setTimeout(function(){e.addClass(F),s.addClass(F)},0)})},this)))},exit:function(){var t=this.options,e=this.$image,s=this.$list;this.isFulled&&(this.isFulled=!1,this.$body.removeClass(w),this.$button.removeClass(k),t.transition&&(e.removeClass(F),s.removeClass(F)),this.$viewer.removeClass(g).css("z-index",t.zIndexInline),this.viewer=i.extend({},this.parent),this.renderViewer(),this.renderList(),this.initImage(i.proxy(function(){this.renderImage(function(){t.transition&&setTimeout(function(){e.addClass(F),s.addClass(F)},0)})},this)))},tooltip:function(){var t=this.options,e=this.$tooltip,s=this.image,n=[p,y,F].join(" ");this.isViewed&&!this.isPlayed&&t.tooltip&&(e.text(O(100*s.ratio)+"%"),this.tooltiping?clearTimeout(this.tooltiping):t.transition?(this.fading&&e.trigger(S),e.addClass(n),h(e[0]),e.addClass($)):e.addClass(p),this.tooltiping=setTimeout(i.proxy(function(){t.transition?(e.one(S,i.proxy(function(){e.removeClass(n),this.fading=!1},this)).removeClass($),this.fading=!0):e.removeClass(p),this.tooltiping=!1},this),1e3))},toggle:function(){1===this.image.ratio?this.zoomTo(this.initialImage.ratio):this.zoomTo(1)},reset:function(){this.isViewed&&!this.isPlayed&&(this.image=i.extend({},this.initialImage),this.renderImage())},destroy:function(){var i=this.$element;this.options.inline?this.unbind():(this.isShown&&this.unbind(),this.$images.removeClass(f),i.off(R,this.start)),this.unbuild(),i.removeData(m)},trigger:function(t,e){var s=i.Event(t,e);return this.$element.trigger(s),s},shown:function(){var t=this.options;this.transitioning=!1,this.isFulled=!0,this.isShown=!0,this.isVisible=!0,this.render(),this.bind(),i.isFunction(t.shown)&&this.$element.one(j,t.shown),this.trigger(j)},hidden:function(){var t=this.options;this.transitioning=!1,this.isViewed=!1,this.isFulled=!1,this.isShown=!1,this.isVisible=!1,this.unbind(),this.$body.removeClass(w),this.$viewer.addClass(b),this.resetList(),this.resetImage(),i.isFunction(t.hidden)&&this.$element.one(H,t.hidden),this.trigger(H)},fullscreen:function(){var i=document.documentElement;!this.isFulled||document.fullscreenElement||document.mozFullScreenElement||document.webkitFullscreenElement||document.msFullscreenElement||(i.requestFullscreen?i.requestFullscreen():i.msRequestFullscreen?i.msRequestFullscreen():i.mozRequestFullScreen?i.mozRequestFullScreen():i.webkitRequestFullscreen&&i.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT))},change:function(){var i=this.endX-this.startX,t=this.endY-this.startY;switch(this.action){case"move":this.move(i,t);break;case"zoom":this.zoom(function(i,t,e,s){var n=Z(i*i+t*t),o=Z(e*e+s*s);return(o-n)/n}(K(this.startX-this.startX2),K(this.startY-this.startY2),K(this.endX-this.endX2),K(this.endY-this.endY2))),this.startX2=this.endX2,this.startY2=this.endY2;break;case"switch":this.action="switched",i>1?this.prev():-1>i&&this.next()}this.startX=this.endX,this.startY=this.endY},isSwitchable:function(){var i=this.image,t=this.viewer;return i.left>=0&&i.top>=0&&i.width<=t.width&&i.height<=t.height}},d.DEFAULTS={inline:!1,button:!0,navbar:!0,title:!0,toolbar:!0,tooltip:!0,movable:!0,zoomable:!0,rotatable:!0,scalable:!0,transition:!0,fullscreen:!0,keyboard:!0,interval:5e3,minWidth:200,minHeight:100,zoomRatio:.1,minZoomRatio:.01,maxZoomRatio:100,zIndex:2015,zIndexInline:0,url:"src",build:null,built:null,show:null,shown:null,hide:null,hidden:null,view:null,viewed:null},d.TEMPLATE='<div class="viewer-container"><div class="viewer-canvas"></div><div class="viewer-footer"><div class="viewer-title"></div><ul class="viewer-toolbar"><li class="viewer-zoom-in" data-action="zoom-in"></li><li class="viewer-zoom-out" data-action="zoom-out"></li><li class="viewer-one-to-one" data-action="one-to-one"></li><li class="viewer-reset" data-action="reset"></li><li class="viewer-prev" data-action="prev"></li><li class="viewer-play" data-action="play"></li><li class="viewer-next" data-action="next"></li><li class="viewer-rotate-left" data-action="rotate-left"></li><li class="viewer-rotate-right" data-action="rotate-right"></li><li class="viewer-flip-horizontal" data-action="flip-horizontal"></li><li class="viewer-flip-vertical" data-action="flip-vertical"></li></ul><div class="viewer-navbar"><ul class="viewer-list"></ul></div></div><div class="viewer-tooltip"></div><div class="viewer-button" data-action="mix"></div><div class="viewer-player"></div></div>',d.other=i.fn.viewer,i.fn.viewer=function(e){var o,a=n(arguments,1);return this.each(function(){var s,n=i(this),h=n.data(m);if(!h){if(/destroy|hide|exit|stop|reset/.test(e))return;n.data(m,h=new d(this,e))}t(e)&&i.isFunction(s=h[e])&&(o=s.apply(h,a))}),s(o)?this:o},i.fn.viewer.Constructor=d,i.fn.viewer.setDefaults=d.setDefaults,i.fn.viewer.noConflict=function(){return i.fn.viewer=d.other,this}}); | ||
| !function(i){"function"==typeof define&&define.amd?define("viewer",["jquery"],i):i("object"==typeof exports?require("jquery"):jQuery)}(function(i){"use strict";function t(i){return"string"==typeof i}function e(i){return"number"==typeof i&&!isNaN(i)}function s(i){return"undefined"==typeof i}function n(i,t){var s=[];return e(t)&&s.push(t),s.slice.apply(i,s)}function o(i,t){var e=n(arguments,2);return function(){return i.apply(t,e.concat(n(arguments)))}}function a(i){var t=[],s=i.rotate,n=i.scaleX,o=i.scaleY;return e(s)&&t.push("rotate("+s+"deg)"),e(n)&&e(o)&&t.push("scale("+n+","+o+")"),t.length?t.join(" "):"none"}function h(i){return i.offsetWidth}function r(i){return t(i)?i.replace(/^.*\//,"").replace(/[\?&#].*$/,""):""}function l(i,t){var e;return i.naturalWidth?t(i.naturalWidth,i.naturalHeight):(e=document.createElement("img"),e.onload=function(){t(this.width,this.height)},void(e.src=i.src))}function d(t){var e=t.length,s=0,n=0;return e&&(i.each(t,function(i,t){s+=t.pageX,n+=t.pageY}),s/=e,n/=e),{pageX:s,pageY:n}}function c(t,e){this.$element=i(t),this.options=i.extend({},c.DEFAULTS,i.isPlainObject(e)&&e),this.isImg=!1,this.isBuilt=!1,this.isShown=!1,this.isViewed=!1,this.isFulled=!1,this.isPlayed=!1,this.wheeling=!1,this.playing=!1,this.fading=!1,this.tooltiping=!1,this.transitioning=!1,this.action=!1,this.target=!1,this.timeout=!1,this.index=0,this.length=0,this.init()}var u=i(window),m=i(document),v="viewer",f=document.createElement(v),g="viewer-toggle",p="viewer-fixed",w="viewer-open",b="viewer-show",y="viewer-hide",$="viewer-fade",x="viewer-in",C="viewer-move",z="viewer-active",F="viewer-invisible",Y="viewer-transition",I="viewer-fullscreen",k="viewer-fullscreen-exit",X="viewer-close",P="img",T="mousedown touchstart pointerdown MSPointerDown",V="mousemove touchmove pointermove MSPointerMove",D="mouseup touchend touchcancel pointerup pointercancel MSPointerUp MSPointerCancel",S="wheel mousewheel DOMMouseScroll",E="transitionend",L="load."+v,R="keydown."+v,q="click."+v,M="resize."+v,W="build."+v,_="built."+v,j="show."+v,A="shown."+v,H="hide."+v,B="hidden."+v,U="view."+v,N="viewed."+v,O="undefined"!=typeof f.style.transition,Z=Math.round,K=Math.sqrt,Q=Math.abs,G=Math.min,J=Math.max,ii=Number;c.prototype={constructor:c,init:function(){var t=this.options,e=this.$element,s=e.is(P),n=s?e:e.find(P),o=n.length,a=i.proxy(this.ready,this);o&&(i.isFunction(t.build)&&e.one(W,t.build),this.trigger(W).isDefaultPrevented()||(O||(t.transition=!1),this.isImg=s,this.length=o,this.count=0,this.$images=n,this.$body=i("body"),t.inline?(e.one(_,i.proxy(function(){this.view()},this)),n.each(function(){this.complete?a():i(this).one(L,a)})):(n.addClass(g),e.on(q,i.proxy(this.start,this)))))},ready:function(){this.count++,this.count===this.length&&this.build()},build:function(){var t,e,s,n,o=this.options,a=this.$element;this.isBuilt||(this.$parent=t=a.parent(),this.$viewer=e=i(c.TEMPLATE),this.$canvas=e.find(".viewer-canvas"),this.$footer=e.find(".viewer-footer"),this.$title=e.find(".viewer-title").toggleClass(y,!o.title),this.$toolbar=n=e.find(".viewer-toolbar").toggleClass(y,!o.toolbar),this.$navbar=e.find(".viewer-navbar").toggleClass(y,!o.navbar),this.$button=s=e.find(".viewer-button").toggleClass(y,!o.button),this.$tooltip=e.find(".viewer-tooltip"),this.$player=e.find(".viewer-player"),this.$list=e.find(".viewer-list"),n.find("li[class*=zoom]").toggleClass(F,!o.zoomable),n.find("li[class*=flip]").toggleClass(F,!o.scalable),o.rotatable||n.find("li[class*=rotate]").addClass(F).appendTo(n),o.inline?(s.addClass(I),e.css("z-index",o.zIndexInline),"static"===t.css("position")&&t.css("position","relative")):(s.addClass(X),e.css("z-index",o.zIndex).addClass([p,$,y].join(" "))),a.after(e),o.inline&&(this.render(),this.bind(),this.isShown=!0),this.isBuilt=!0,i.isFunction(o.built)&&a.one(_,o.built),this.trigger(_))},unbuild:function(){var i=this.options,t=this.$element;this.isBuilt&&(i.inline&&t.removeClass(y),this.$viewer.remove())},bind:function(){var t=this.options,e=this.$element;i.isFunction(t.view)&&e.on(U,t.view),i.isFunction(t.viewed)&&e.on(N,t.viewed),this.$viewer.on(q,i.proxy(this.click,this)).on(S,i.proxy(this.wheel,this)),this.$canvas.on(T,i.proxy(this.mousedown,this)),m.on(V,this._mousemove=o(this.mousemove,this)).on(D,this._mouseup=o(this.mouseup,this)).on(R,this._keydown=o(this.keydown,this)),u.on(M,this._resize=o(this.resize,this))},unbind:function(){var t=this.options,e=this.$element;i.isFunction(t.view)&&e.off(U,t.view),i.isFunction(t.viewed)&&e.off(N,t.viewed),this.$viewer.off(q,this.click).off(S,this.wheel),this.$canvas.off(T,this.mousedown),m.off(V,this._mousemove).off(D,this._mouseup).off(R,this._keydown),u.off(M,this._resize)},render:function(){this.initContainer(),this.initViewer(),this.initList(),this.renderViewer()},initContainer:function(){this.container={width:u.innerWidth(),height:u.innerHeight()}},initViewer:function(){var t,e=this.options,s=this.$parent;e.inline&&(this.parent=t={width:J(s.width(),e.minWidth),height:J(s.height(),e.minHeight)}),(this.isFulled||!t)&&(t=this.container),this.viewer=i.extend({},t)},renderViewer:function(){this.options.inline&&!this.isFulled&&this.$viewer.css(this.viewer)},initList:function(){var e=this.options,s=this.$element,n=this.$list,o=[];this.$images.each(function(s){var n=this.src,a=this.alt||r(n),h=e.url;n&&(t(h)?h=this.getAttribute(h):i.isFunction(h)&&(h=h.call(this,this)),o.push('<li><img src="'+n+'" data-action="view" data-index="'+s+'" data-original-url="'+(h||n)+'" alt="'+a+'"></li>'))}),n.html(o.join("")).find(P).one(L,{filled:!0},i.proxy(this.loadImage,this)),this.$items=n.children(),e.transition&&s.one(N,function(){n.addClass(Y)})},renderList:function(i){var t=i||this.index,e=this.$items.eq(t).width(),s=e+1;this.$list.css({width:s*this.length,marginLeft:(this.viewer.width-e)/2-s*t})},resetList:function(){this.$list.empty().removeClass(Y).css("margin-left",0)},initImage:function(t){var e=this.options,s=this.$image,n=this.viewer,o=this.$footer.height(),a=n.width,h=J(n.height-o,o),r=this.image||{};l(s[0],i.proxy(function(s,n){var o,l,d=s/n,c=a,u=h;h*d>a?u=a/d:c=h*d,c=G(.9*c,s),u=G(.9*u,n),l={naturalWidth:s,naturalHeight:n,aspectRatio:d,ratio:c/s,width:c,height:u,left:(a-c)/2,top:(h-u)/2},o=i.extend({},l),e.rotatable&&(l.rotate=r.rotate||0,o.rotate=0),e.scalable&&(l.scaleX=r.scaleX||1,l.scaleY=r.scaleY||1,o.scaleX=1,o.scaleY=1),this.image=l,this.initialImage=o,i.isFunction(t)&&t()},this))},renderImage:function(t){var e=this.image,s=this.$image;s.css({width:e.width,height:e.height,marginLeft:e.left,marginTop:e.top,transform:a(e)}),i.isFunction(t)&&(this.transitioning?s.one(E,t):t())},resetImage:function(){this.$image.remove(),this.$image=null},start:function(t){var e=t.target;i(e).hasClass(g)&&(this.target=e,this.show())},click:function(t){var e=i(t.target),s=e.data("action"),n=this.image;switch(s){case"mix":this.isPlayed?this.stop():this.options.inline?this.isFulled?this.exit():this.full():this.hide();break;case"view":this.view(e.data("index"));break;case"zoom-in":this.zoom(.1,!0);break;case"zoom-out":this.zoom(-.1,!0);break;case"one-to-one":this.toggle();break;case"reset":this.reset();break;case"prev":this.prev();break;case"play":this.play();break;case"next":this.next();break;case"rotate-left":this.rotate(-90);break;case"rotate-right":this.rotate(90);break;case"flip-horizontal":this.scale(-n.scaleX||-1,n.scaleY||1);break;case"flip-vertical":this.scale(n.scaleX||1,-n.scaleY||-1);break;default:this.isPlayed&&this.stop()}},load:function(){var t=this.options,e=this.viewer,s=this.$image;this.timeout&&(clearTimeout(this.timeout),this.timeout=!1),s.removeClass(F).css("cssText","width:0;height:0;margin-left:"+e.width/2+"px;margin-top:"+e.height/2+"px;max-width:none!important;visibility:visible;"),this.initImage(i.proxy(function(){s.toggleClass(Y,t.transition).toggleClass(C,t.movable),this.renderImage(i.proxy(function(){this.isViewed=!0,this.trigger(N)},this))},this))},loadImage:function(t){var e=t.target,s=i(e),n=s.parent(),o=n.width(),a=n.height(),h=t.data&&t.data.filled;l(e,function(i,t){var e=i/t,n=o,r=a;a*e>o?h?n=a*e:r=o/e:h?r=o/e:n=a*e,s.css({width:n,height:r,marginLeft:(o-n)/2,marginTop:(a-r)/2})})},resize:function(){this.initContainer(),this.initViewer(),this.renderViewer(),this.renderList(),this.initImage(i.proxy(function(){this.renderImage()},this)),this.isPlayed&&this.$player.find(P).one(L,i.proxy(this.loadImage,this)).trigger(L)},wheel:function(t){var e=t.originalEvent||t,s=ii(this.options.zoomRatio)||.1,n=1;this.isViewed&&(t.preventDefault(),this.wheeling||(this.wheeling=!0,setTimeout(i.proxy(function(){this.wheeling=!1},this),50),e.deltaY?n=e.deltaY>0?1:-1:e.wheelDelta?n=-e.wheelDelta/120:e.detail&&(n=e.detail>0?1:-1),this.zoom(-n*s,!0,t)))},keydown:function(i){var t=this.options,e=i.which;if(this.isFulled&&t.keyboard)switch(e){case 27:this.isPlayed?this.stop():t.inline?this.isFulled&&this.exit():this.hide();break;case 32:this.isPlayed&&this.stop();break;case 37:this.prev();break;case 38:i.preventDefault(),this.zoom(t.zoomRatio,!0);break;case 39:this.next();break;case 40:i.preventDefault(),this.zoom(-t.zoomRatio,!0);break;case 48:case 49:(i.ctrlKey||i.shiftKey)&&(i.preventDefault(),this.toggle())}},mousedown:function(i){var t,e=this.options,s=i.originalEvent,n=s&&s.touches,o=i,a=e.movable?"move":!1;if(this.isViewed){if(n){if(t=n.length,t>1){if(!e.zoomable||2!==t)return;o=n[1],this.startX2=o.pageX,this.startY2=o.pageY,a="zoom"}else this.isSwitchable()&&(a="switch");o=n[0]}a&&(i.preventDefault(),this.action=a,this.startX=o.pageX||s&&s.pageX,this.startY=o.pageY||s&&s.pageY)}},mousemove:function(i){var t,e=this.options,s=this.action,n=this.$image,o=i.originalEvent,a=o&&o.touches,h=i;if(this.isViewed){if(a){if(t=a.length,t>1){if(!e.zoomable||2!==t)return;h=a[1],this.endX2=h.pageX,this.endY2=h.pageY}h=a[0]}s&&(i.preventDefault(),"move"===s&&e.transition&&n.hasClass(Y)&&n.removeClass(Y),this.endX=h.pageX||o&&o.pageX,this.endY=h.pageY||o&&o.pageY,this.change(i))}},mouseup:function(i){var t=this.action;t&&(i.preventDefault(),"move"===t&&this.options.transition&&this.$image.addClass(Y),this.action=!1)},show:function(){var t,e=this.options;e.inline||this.transitioning||(this.isBuilt||this.build(),i.isFunction(e.show)&&this.$element.one(j,e.show),this.trigger(j).isDefaultPrevented()||(this.$body.addClass(w),t=this.$viewer.removeClass(y),this.$element.one(A,i.proxy(function(){this.view(this.target?this.$images.index(this.target):this.index),this.target=!1},this)),e.transition?(this.transitioning=!0,t.addClass(Y),h(t[0]),t.one(E,i.proxy(this.shown,this)).addClass(x)):(t.addClass(x),this.shown())))},hide:function(){var t=this.options,e=this.$viewer;t.inline||this.transitioning||!this.isShown||(i.isFunction(t.hide)&&this.$element.one(H,t.hide),this.trigger(H).isDefaultPrevented()||(this.isViewed&&t.transition?(this.transitioning=!0,this.$image.one(E,i.proxy(function(){e.one(E,i.proxy(this.hidden,this)).removeClass(x)},this)),this.zoomTo(0,!1,!1,!0)):(e.removeClass(x),this.hidden())))},view:function(t){var e,s,n,o,a,h=this.$title;t=Number(t)||0,!this.isShown||this.isPlayed||0>t||t>=this.length||this.isViewed&&t===this.index||this.trigger(U).isDefaultPrevented()||(s=this.$items.eq(t),n=s.find(P),o=n.data("originalUrl"),a=n.attr("alt"),this.$image=e=i('<img src="'+o+'" alt="'+a+'">'),this.$items.eq(this.index).removeClass(z),s.addClass(z),this.isViewed=!1,this.index=t,this.image=null,this.$canvas.html(e.addClass(F)),e[0].complete?this.load():(e.one(L,i.proxy(this.load,this)),this.timeout&&clearTimeout(this.timeout),this.timeout=setTimeout(i.proxy(function(){e.removeClass(F),this.timeout=!1},this),1e3)),h.empty(),this.renderList(),this.$element.one(N,i.proxy(function(){var i=this.image,t=i.naturalWidth,e=i.naturalHeight;h.html(a+" ("+t+" × "+e+")")},this)))},prev:function(){this.view(J(this.index-1,0))},next:function(){this.view(G(this.index+1,this.length-1))},move:function(i,t){var e=this.image;this.moveTo(s(i)?i:e.left+ii(i),s(t)?t:e.top+ii(t))},moveTo:function(i,t){var n=this.image,o=!1;s(t)&&(t=i),i=ii(i),t=ii(t),this.isViewed&&!this.isPlayed&&this.options.movable&&(e(i)&&(n.left=i,o=!0),e(t)&&(n.top=t,o=!0),o&&this.renderImage())},zoom:function(i,t,e){var s=this.image;i=ii(i),i=0>i?1/(1-i):1+i,this.zoomTo(s.width*i/s.naturalWidth,t,e)},zoomTo:function(i,t,s,n){var o,a,h,r,l,c=this.options,u=.01,m=100,v=this.image,f=v.width,g=v.height;i=J(0,i),e(i)&&this.isViewed&&!this.isPlayed&&(n||c.zoomable)&&(n||(u=J(u,c.minZoomRatio),m=G(m,c.maxZoomRatio),i=G(J(i,u),m)),i>.95&&1.05>i&&(i=1),a=v.naturalWidth*i,h=v.naturalHeight*i,s&&(o=s.originalEvent)?(r=this.$viewer.offset(),l=o.touches?d(o.touches):{pageX:s.pageX||o.pageX||0,pageY:s.pageY||o.pageY||0},v.left-=(a-f)*((l.pageX-r.left-v.left)/f),v.top-=(h-g)*((l.pageY-r.top-v.top)/g)):(v.left-=(a-f)/2,v.top-=(h-g)/2),v.width=a,v.height=h,v.ratio=i,this.renderImage(),t&&this.tooltip())},rotate:function(i){this.rotateTo((this.image.rotate||0)+ii(i))},rotateTo:function(i){var t=this.image;i=ii(i),e(i)&&this.isViewed&&!this.isPlayed&&this.options.rotatable&&(t.rotate=i,this.renderImage())},scale:function(i,t){var n=this.image,o=!1;s(t)&&(t=i),i=ii(i),t=ii(t),this.isViewed&&!this.isPlayed&&this.options.scalable&&(e(i)&&(n.scaleX=i,o=!0),e(t)&&(n.scaleY=t,o=!0),o&&this.renderImage())},scaleX:function(i){this.scale(i,this.image.scaleY)},scaleY:function(i){this.scale(this.image.scaleX,i)},play:function(){var t,s=this.options,n=this.$player,o=i.proxy(this.loadImage,this),a=[],h=0,r=0;this.isShown&&!this.isPlayed&&(s.fullscreen&&this.fullscreen(),this.isPlayed=!0,n.addClass(b),this.$items.each(function(t){var e=i(this),l=e.find(P),d=i('<img src="'+l.data("originalUrl")+'" alt="'+l.attr("alt")+'">');h++,d.addClass($).toggleClass(Y,s.transition),e.hasClass(z)&&(d.addClass(x),r=t),a.push(d),d.one(L,{filled:!1},o),n.append(d)}),e(s.interval)&&s.interval>0&&(t=i.proxy(function(){this.playing=setTimeout(function(){a[r].removeClass(x),r++,r=h>r?r:0,a[r].addClass(x),t()},s.interval)},this),h>1&&t()))},stop:function(){this.isPlayed&&(this.isPlayed=!1,clearTimeout(this.playing),this.$player.removeClass(b).empty())},full:function(){var t=this.options,e=this.$image,s=this.$list;this.isShown&&!this.isPlayed&&!this.isFulled&&t.inline&&(this.isFulled=!0,this.$body.addClass(w),this.$button.addClass(k),t.transition&&(e.removeClass(Y),s.removeClass(Y)),this.$viewer.addClass(p).removeAttr("style").css("z-index",t.zIndex),this.initContainer(),this.viewer=i.extend({},this.container),this.renderList(),this.initImage(i.proxy(function(){this.renderImage(function(){t.transition&&setTimeout(function(){e.addClass(Y),s.addClass(Y)},0)})},this)))},exit:function(){var t=this.options,e=this.$image,s=this.$list;this.isFulled&&(this.isFulled=!1,this.$body.removeClass(w),this.$button.removeClass(k),t.transition&&(e.removeClass(Y),s.removeClass(Y)),this.$viewer.removeClass(p).css("z-index",t.zIndexInline),this.viewer=i.extend({},this.parent),this.renderViewer(),this.renderList(),this.initImage(i.proxy(function(){this.renderImage(function(){t.transition&&setTimeout(function(){e.addClass(Y),s.addClass(Y)},0)})},this)))},tooltip:function(){var t=this.options,e=this.$tooltip,s=this.image,n=[b,$,Y].join(" ");this.isViewed&&!this.isPlayed&&t.tooltip&&(e.text(Z(100*s.ratio)+"%"),this.tooltiping?clearTimeout(this.tooltiping):t.transition?(this.fading&&e.trigger(E),e.addClass(n),h(e[0]),e.addClass(x)):e.addClass(b),this.tooltiping=setTimeout(i.proxy(function(){t.transition?(e.one(E,i.proxy(function(){e.removeClass(n),this.fading=!1},this)).removeClass(x),this.fading=!0):e.removeClass(b),this.tooltiping=!1},this),1e3))},toggle:function(){1===this.image.ratio?this.zoomTo(this.initialImage.ratio,!0):this.zoomTo(1,!0)},reset:function(){this.isViewed&&!this.isPlayed&&(this.image=i.extend({},this.initialImage),this.renderImage())},destroy:function(){var i=this.$element;this.options.inline?this.unbind():(this.isShown&&this.unbind(),this.$images.removeClass(g),i.off(q,this.start)),this.unbuild(),i.removeData(v)},trigger:function(t,e){var s=i.Event(t,e);return this.$element.trigger(s),s},shown:function(){var t=this.options;this.transitioning=!1,this.isFulled=!0,this.isShown=!0,this.isVisible=!0,this.render(),this.bind(),i.isFunction(t.shown)&&this.$element.one(A,t.shown),this.trigger(A)},hidden:function(){var t=this.options;this.transitioning=!1,this.isViewed=!1,this.isFulled=!1,this.isShown=!1,this.isVisible=!1,this.unbind(),this.$body.removeClass(w),this.$viewer.addClass(y),this.resetList(),this.resetImage(),i.isFunction(t.hidden)&&this.$element.one(B,t.hidden),this.trigger(B)},fullscreen:function(){var i=document.documentElement;!this.isFulled||document.fullscreenElement||document.mozFullScreenElement||document.webkitFullscreenElement||document.msFullscreenElement||(i.requestFullscreen?i.requestFullscreen():i.msRequestFullscreen?i.msRequestFullscreen():i.mozRequestFullScreen?i.mozRequestFullScreen():i.webkitRequestFullscreen&&i.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT))},change:function(i){var t=this.endX-this.startX,e=this.endY-this.startY;switch(this.action){case"move":this.move(t,e);break;case"zoom":this.zoom(function(i,t,e,s){var n=K(i*i+t*t),o=K(e*e+s*s);return(o-n)/n}(Q(this.startX-this.startX2),Q(this.startY-this.startY2),Q(this.endX-this.endX2),Q(this.endY-this.endY2)),!1,i),this.startX2=this.endX2,this.startY2=this.endY2;break;case"switch":this.action="switched",t>1?this.prev():-1>t&&this.next()}this.startX=this.endX,this.startY=this.endY},isSwitchable:function(){var i=this.image,t=this.viewer;return i.left>=0&&i.top>=0&&i.width<=t.width&&i.height<=t.height}},c.DEFAULTS={inline:!1,button:!0,navbar:!0,title:!0,toolbar:!0,tooltip:!0,movable:!0,zoomable:!0,rotatable:!0,scalable:!0,transition:!0,fullscreen:!0,keyboard:!0,interval:5e3,minWidth:200,minHeight:100,zoomRatio:.1,minZoomRatio:.01,maxZoomRatio:100,zIndex:2015,zIndexInline:0,url:"src",build:null,built:null,show:null,shown:null,hide:null,hidden:null,view:null,viewed:null},c.TEMPLATE='<div class="viewer-container"><div class="viewer-canvas"></div><div class="viewer-footer"><div class="viewer-title"></div><ul class="viewer-toolbar"><li class="viewer-zoom-in" data-action="zoom-in"></li><li class="viewer-zoom-out" data-action="zoom-out"></li><li class="viewer-one-to-one" data-action="one-to-one"></li><li class="viewer-reset" data-action="reset"></li><li class="viewer-prev" data-action="prev"></li><li class="viewer-play" data-action="play"></li><li class="viewer-next" data-action="next"></li><li class="viewer-rotate-left" data-action="rotate-left"></li><li class="viewer-rotate-right" data-action="rotate-right"></li><li class="viewer-flip-horizontal" data-action="flip-horizontal"></li><li class="viewer-flip-vertical" data-action="flip-vertical"></li></ul><div class="viewer-navbar"><ul class="viewer-list"></ul></div></div><div class="viewer-tooltip"></div><div class="viewer-button" data-action="mix"></div><div class="viewer-player"></div></div>',c.other=i.fn.viewer,i.fn.viewer=function(e){var o,a=n(arguments,1);return this.each(function(){var s,n=i(this),h=n.data(v);if(!h){if(/destroy|hide|exit|stop|reset/.test(e))return;n.data(v,h=new c(this,e))}t(e)&&i.isFunction(s=h[e])&&(o=s.apply(h,a))}),s(o)?this:o},i.fn.viewer.Constructor=c,i.fn.viewer.setDefaults=c.setDefaults,i.fn.viewer.noConflict=function(){return i.fn.viewer=c.other,this}}); |
| { | ||
| "name": "imageviewer", | ||
| "description": "A simple jQuery image viewing plugin.", | ||
| "version": "0.3.0", | ||
| "version": "0.3.1", | ||
| "main": "dist/viewer.js", | ||
@@ -6,0 +6,0 @@ "keywords": [ |
@@ -46,8 +46,3 @@ start: function (e) { | ||
| case 'one-to-one': | ||
| if (image.ratio === 1) { | ||
| this.zoomTo(this.initialImage.ratio); | ||
| } else { | ||
| this.zoomTo(1); | ||
| } | ||
| this.toggle(); | ||
| break; | ||
@@ -179,3 +174,3 @@ | ||
| wheel: function (event) { | ||
| var e = event.originalEvent; | ||
| var e = event.originalEvent || event; | ||
| var ratio = num(this.options.zoomRatio) || 0.1; | ||
@@ -209,3 +204,3 @@ var delta = 1; | ||
| this.zoom(-delta * ratio, true); | ||
| this.zoom(-delta * ratio, true, event); | ||
| }, | ||
@@ -283,8 +278,3 @@ | ||
| e.preventDefault(); | ||
| if (this.image.ratio === 1) { | ||
| this.zoomTo(this.initialImage.ratio); | ||
| } else { | ||
| this.zoomTo(1); | ||
| } | ||
| this.toggle(); | ||
| } | ||
@@ -381,3 +371,3 @@ | ||
| this.change(); | ||
| this.change(event); | ||
| } | ||
@@ -384,0 +374,0 @@ }, |
@@ -26,3 +26,3 @@ // Show the viewer (only available in modal mode) | ||
| this.$element.one(EVENT_SHOWN, $.proxy(function () { | ||
| this.view((this.target ? this.$images.index(this.target) : 0) || this.index); | ||
| this.view(this.target ? this.$images.index(this.target) : this.index); | ||
| this.target = false; | ||
@@ -64,3 +64,3 @@ }, this)); | ||
| }, this)); | ||
| this.zoomTo(0, false, true); | ||
| this.zoomTo(0, false, false, true); | ||
| } else { | ||
@@ -120,5 +120,6 @@ $viewer.removeClass(CLASS_IN); | ||
| // Make the image visible if it fails to load within 1s | ||
| this.timeout = setTimeout(function () { | ||
| this.timeout = setTimeout($.proxy(function () { | ||
| $image.removeClass(CLASS_INVISIBLE); | ||
| }, 1000); | ||
| this.timeout = false; | ||
| }, this), 1000); | ||
| } | ||
@@ -206,4 +207,5 @@ | ||
| * @param {Boolean} hasTooltip (optional) | ||
| * @param {jQuery Event} _event (private) | ||
| */ | ||
| zoom: function (ratio, hasTooltip) { | ||
| zoom: function (ratio, hasTooltip, _event) { | ||
| var image = this.image; | ||
@@ -219,3 +221,3 @@ | ||
| this.zoomTo(image.width * ratio / image.naturalWidth, hasTooltip); | ||
| this.zoomTo(image.width * ratio / image.naturalWidth, hasTooltip, _event); | ||
| }, | ||
@@ -228,5 +230,6 @@ | ||
| * @param {Boolean} hasTooltip (optional) | ||
| * @param {jQuery Event} _event (private) | ||
| * @param {Boolean} _zoomable (private) | ||
| */ | ||
| zoomTo: function (ratio, hasTooltip, _zoomable) { | ||
| zoomTo: function (ratio, hasTooltip, _event, _zoomable) { | ||
| var options = this.options; | ||
@@ -238,4 +241,7 @@ var minZoomRatio = 0.01; | ||
| var height = image.height; | ||
| var originalEvent; | ||
| var newWidth; | ||
| var newHeight; | ||
| var offset; | ||
| var center; | ||
@@ -257,4 +263,24 @@ ratio = max(0, ratio); | ||
| newHeight = image.naturalHeight * ratio; | ||
| image.left -= (newWidth - width) / 2; | ||
| image.top -= (newHeight - height) / 2; | ||
| if (_event && (originalEvent = _event.originalEvent)) { | ||
| offset = this.$viewer.offset(); | ||
| center = originalEvent.touches ? getTouchesCenter(originalEvent.touches) : { | ||
| pageX: _event.pageX || originalEvent.pageX || 0, | ||
| pageY: _event.pageY || originalEvent.pageY || 0 | ||
| }; | ||
| // Zoom from the triggering point of the event | ||
| image.left -= (newWidth - width) * ( | ||
| ((center.pageX - offset.left) - image.left) / width | ||
| ); | ||
| image.top -= (newHeight - height) * ( | ||
| ((center.pageY - offset.top) - image.top) / height | ||
| ); | ||
| } else { | ||
| // Zoom from the center of the image | ||
| image.left -= (newWidth - width) / 2; | ||
| image.top -= (newHeight - height) / 2; | ||
| } | ||
| image.width = newWidth; | ||
@@ -544,5 +570,5 @@ image.height = newHeight; | ||
| if (this.image.ratio === 1) { | ||
| this.zoomTo(this.initialImage.ratio); | ||
| this.zoomTo(this.initialImage.ratio, true); | ||
| } else { | ||
| this.zoomTo(1); | ||
| this.zoomTo(1, true); | ||
| } | ||
@@ -549,0 +575,0 @@ }, |
@@ -66,3 +66,3 @@ // A shortcut for triggering custom events | ||
| change: function () { | ||
| change: function (event) { | ||
| var offsetX = this.endX - this.startX; | ||
@@ -90,3 +90,3 @@ var offsetY = this.endY - this.startY; | ||
| abs(this.endY - this.endY2) | ||
| )); | ||
| ), false, event); | ||
@@ -93,0 +93,0 @@ this.startX2 = this.endX2; |
@@ -76,1 +76,22 @@ function isString(s) { | ||
| } | ||
| function getTouchesCenter(touches) { | ||
| var length = touches.length; | ||
| var pageX = 0; | ||
| var pageY = 0; | ||
| if (length) { | ||
| $.each(touches, function (i, touch) { | ||
| pageX += touch.pageX; | ||
| pageY += touch.pageY; | ||
| }); | ||
| pageX /= length; | ||
| pageY /= length; | ||
| } | ||
| return { | ||
| pageX: pageX, | ||
| pageY: pageY | ||
| }; | ||
| } |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by1.27%
208036
- Lines of code
- increased by1.91%
3300
No dependency changes