imageviewer - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

CHANGELOG.md

 # Changelog
 
 
+## 0.2.0 (Oct 18, 2015)
+
+- Added one new method: "moveTo"
+- Improved the image loading and showing.
+
+
 ## 0.1.1 (Oct 7, 2015)
@@ -5,0 +11,0 @@

dist/viewer.js

 /*!
- * Viewer v0.1.1
+ * Viewer v0.2.0
  * https://github.com/fengyuanchen/viewer
@@ -8,3 +8,3 @@ *
  *
- * Date: 2015-10-07T06:34:31.917Z
+ * Date: 2015-10-18T11:12:56.198Z
  */
@@ -81,3 +81,3 @@
   var max = Math.max;
-  var num = parseFloat;
+  var num = Number;
 
@@ -172,2 +172,3 @@ // Prototype
     this.target = false;
+    this.timeout = false;
     this.index = 0;
@@ -635,3 +636,25 @@ this.length = 0;
     load: function () {
+      var options = this.options;
+      var viewer = this.viewer;
+      var $image = this.$image;
+
+      if (this.timeout) {
+        clearTimeout(this.timeout);
+        this.timeout = false;
+      }
+
+      $image.removeClass(CLASS_INVISIBLE).css('cssText', (
+        'width:0;' +
+        'height:0;' +
+        'margin-left:' + viewer.width / 2 + 'px;' +
+        'margin-top:' + viewer.height / 2 + 'px;' +
+        'max-width:none!important;' +
+        'visibility:visible;'
+      ));
+
       this.initImage($.proxy(function () {
+        $image.
+          toggleClass(CLASS_TRANSITION, options.transition).
+          toggleClass(CLASS_MOVE, options.movable);
+
         this.renderImage($.proxy(function () {
@@ -967,4 +990,2 @@ this.isViewed = true;
     view: function (index) {
-      var options = this.options;
-      var viewer = this.viewer;
       var $title = this.$title;
@@ -994,13 +1015,2 @@ var $image;
       this.$image = $image = $('<img src="' + url + '" alt="' + alt + '">');
-
-      $image.
-        toggleClass(CLASS_TRANSITION, options.transition).
-        toggleClass(CLASS_MOVE, options.movable).
-        css({
-          width: 0,
-          height: 0,
-          marginLeft: viewer.width / 2,
-          marginTop: viewer.height / 2
-        });
-
       this.$items.eq(this.index).removeClass(CLASS_ACTIVE);
@@ -1012,4 +1022,19 @@ $item.addClass(CLASS_ACTIVE);
       this.image = null;
-      $image.one(EVENT_LOAD, $.proxy(this.load, this));
-      this.$canvas.html($image);
+      this.$canvas.html($image.addClass(CLASS_INVISIBLE));
+
+      if ($image[0].complete) {
+        this.load();
+      } else {
+        $image.one(EVENT_LOAD, $.proxy(this.load, this));
+
+        if (this.timeout) {
+          clearTimeout(this.timeout);
+        }
+
+        // Make the image visible if it fails to load within 1s
+        this.timeout = setTimeout(function () {
+          $image.removeClass(CLASS_INVISIBLE);
+        }, 1000);
+      }
+
       $title.empty();
@@ -1041,3 +1066,3 @@
     /**
-     * Move the image
+     * Move the image with relative offsets
      *
@@ -1050,14 +1075,40 @@ * @param {Number} offsetX
 
-      // If "offsetY" is not present, its default value is "offsetX"
-      if (isUndefined(offsetY)) {
-        offsetY = offsetX;
+      this.moveTo(
+        isUndefined(offsetX) ? offsetX : image.left + num(offsetX),
+        isUndefined(offsetY) ? offsetY : image.top + num(offsetY)
+      );
+    },
+
+    /**
+     * Move the image to an absolute point
+     *
+     * @param {Number} x
+     * @param {Number} y (optional)
+     */
+    moveTo: function (x, y) {
+      var image = this.image;
+      var changed = false;
+
+      // If "y" is not present, its default value is "x"
+      if (isUndefined(y)) {
+        y = x;
       }
 
-      offsetX = num(offsetX);
-      offsetY = num(offsetY);
+      x = num(x);
+      y = num(y);
 
       if (this.isShown && !this.isPlayed && this.options.movable) {
-        image.left += isNumber(offsetX) ? offsetX : 0;
-        image.top += isNumber(offsetY) ? offsetY : 0;
-        this.renderImage();
+        if (isNumber(x)) {
+          image.left = x;
+          changed = true;
+        }
+
+        if (isNumber(y)) {
+          image.top = y;
+          changed = true;
+        }
+
+        if (changed) {
+          this.renderImage();
+        }
       }
@@ -1067,3 +1118,3 @@ },
     /**
-     * Zoom the image
+     * Zoom the image with a relative ratio
      *
@@ -1074,44 +1125,17 @@ * @param {Number} ratio
     zoom: function (ratio, hasTooltip) {
-      var options = this.options;
-      var minZoomRatio = max(0.01, options.minZoomRatio);
-      var maxZoomRatio = min(100, options.maxZoomRatio);
       var image = this.image;
-      var width;
-      var height;
 
       ratio = num(ratio);
 
-      if (isNumber(ratio) && this.isShown && !this.isPlayed && options.zoomable) {
-        if (ratio < 0) {
-          ratio =  1 / (1 - ratio);
-        } else {
-          ratio = 1 + ratio;
-        }
+      if (ratio < 0) {
+        ratio =  1 / (1 - ratio);
+      } else {
+        ratio = 1 + ratio;
+      }
 
-        width = image.width * ratio;
-        height = image.height * ratio;
-        ratio = width / image.naturalWidth;
-        ratio = min(max(ratio, minZoomRatio), maxZoomRatio);
-
-        if (ratio > 0.95 && ratio < 1.05) {
-          ratio = 1;
-          width = image.naturalWidth;
-          height = image.naturalHeight;
-        }
-
-        image.left -= (width - image.width) / 2;
-        image.top -= (height - image.height) / 2;
-        image.width = width;
-        image.height = height;
-        image.ratio = ratio;
-        this.renderImage();
-
-        if (hasTooltip) {
-          this.tooltip();
-        }
-      }
+      this.zoomTo(image.width * ratio / image.naturalWidth, hasTooltip);
     },
 
     /**
-     * Zoom the image to a special ratio
+     * Zoom the image to an absolute ratio
      *
@@ -1123,15 +1147,30 @@ * @param {Number} ratio
     zoomTo: function (ratio, hasTooltip, _zoomable) {
+      var options = this.options;
+      var minZoomRatio = 0.01;
+      var maxZoomRatio = 100;
       var image = this.image;
-      var width;
-      var height;
+      var width = image.width;
+      var height = image.height;
+      var newWidth;
+      var newHeight;
 
-      ratio = max(ratio, 0);
+      ratio = max(0, ratio);
 
-      if (isNumber(ratio) && this.isShown && !this.isPlayed && (_zoomable || this.options.zoomable)) {
-        width = image.naturalWidth * ratio;
-        height = image.naturalHeight * ratio;
-        image.left -= (width - image.width) / 2;
-        image.top -= (height - image.height) / 2;
-        image.width = width;
-        image.height = height;
+      if (isNumber(ratio) && this.isShown && !this.isPlayed && (_zoomable || options.zoomable)) {
+        if (!_zoomable) {
+          minZoomRatio = max(minZoomRatio, options.minZoomRatio);
+          maxZoomRatio = min(maxZoomRatio, options.maxZoomRatio);
+          ratio = min(max(ratio, minZoomRatio), maxZoomRatio);
+        }
+
+        if (ratio > 0.95 && ratio < 1.05) {
+          ratio = 1;
+        }
+
+        newWidth = image.naturalWidth * ratio;
+        newHeight = image.naturalHeight * ratio;
+        image.left -= (newWidth - width) / 2;
+        image.top -= (newHeight - height) / 2;
+        image.width = newWidth;
+        image.height = newHeight;
         image.ratio = ratio;
@@ -1147,30 +1186,23 @@ this.renderImage();
     /**
-     * Rotate the image
-     * https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#rotate()
+     * Rotate the image with a relative degree
      *
-     * @param {Number} degrees
+     * @param {Number} degree
      */
-    rotate: function (degrees) {
-      var image = this.image;
-
-      degrees = num(degrees);
-
-      if (isNumber(degrees) && this.isShown && !this.isPlayed && this.options.rotatable) {
-        image.rotate = ((image.rotate || 0) + degrees);
-        this.renderImage();
-      }
+    rotate: function (degree) {
+      this.rotateTo((this.image.rotate || 0) + num(degree));
     },
 
     /**
-     * Rotate the image to a special angle
+     * Rotate the image to an absolute degree
+     * https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#rotate()
      *
-     * @param {Number} degrees
+     * @param {Number} degree
      */
-    rotateTo: function (degrees) {
+    rotateTo: function (degree) {
       var image = this.image;
 
-      degrees = num(degrees);
+      degree = num(degree);
 
-      if (isNumber(degrees) && this.isShown && !this.isPlayed && this.options.rotatable) {
-        image.rotate = degrees;
+      if (isNumber(degree) && this.isShown && !this.isPlayed && this.options.rotatable) {
+        image.rotate = degree;
         this.renderImage();
@@ -1189,2 +1221,3 @@ }
       var image = this.image;
+      var changed = false;
 
@@ -1200,5 +1233,15 @@ // If "scaleY" is not present, its default value is "scaleX"
       if (this.isShown && !this.isPlayed && this.options.scalable) {
-        image.scaleX = isNumber(scaleX) ? scaleX : 1;
-        image.scaleY = isNumber(scaleY) ? scaleY : 1;
-        this.renderImage();
+        if (isNumber(scaleX)) {
+          image.scaleX = scaleX;
+          changed = true;
+        }
+
+        if (isNumber(scaleY)) {
+          image.scaleY = scaleY;
+          changed = true;
+        }
+
+        if (changed) {
+          this.renderImage();
+        }
       }
@@ -1205,0 +1248,0 @@ },

dist/viewer.min.js

 /*!
- * Viewer v0.1.1
+ * Viewer v0.2.0
  * https://github.com/fengyuanchen/viewer
@@ -8,4 +8,4 @@ *
  *
- * Date: 2015-10-07T06:34:31.917Z
+ * Date: 2015-10-18T11:12:56.198Z
  */
-!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 a(i,t){var e=n(arguments,2);return function(){return i.apply(t,e.concat(n(arguments)))}}function o(i){var t=[],s=i.rotate,n=i.scaleX,a=i.scaleY;return e(s)&&t.push("rotate("+s+"deg)"),e(n)&&e(a)&&t.push("scale("+n+","+a+")"),t.length?t.join(" "):"none"}function h(i){return t(i)?i.replace(/^.*\//,"").replace(/[\?&#].*$/,""):""}function r(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 l(t,e){this.$element=i(t),this.options=i.extend({},l.DEFAULTS,i.isPlainObject(e)&&e),this.isImg=!1,this.isBuilt=!1,this.isShown=!1,this.isViewed=!1,this.isFulled=!1,this.isPlayed=!1,this.playing=!1,this.fading=!1,this.transitioning=!1,this.action=!1,this.target=!1,this.index=0,this.length=0,this.init()}var d=i(window),c=i(document),u="viewer",m=document.createElement(u),v="viewer-toggle",f="viewer-fixed",g="viewer-open",w="viewer-show",p="viewer-hide",b="viewer-fade",y="viewer-in",x="viewer-move",$="viewer-active",C="viewer-invisible",z="viewer-transition",I="viewer-fullscreen",F="viewer-fullscreen-exit",k="viewer-close",Y="img",P="mousedown touchstart pointerdown MSPointerDown",S="mousemove touchmove pointermove MSPointerMove",X="mouseup touchend touchcancel pointerup pointercancel MSPointerUp MSPointerCancel",T="wheel mousewheel DOMMouseScroll",D="transitionend",E="load."+u,L="keydown."+u,V="click."+u,R="resize."+u,q="build."+u,M="built."+u,W="show."+u,_="shown."+u,j="hide."+u,A="hidden."+u,H="view."+u,B="viewed."+u,U="undefined"!=typeof m.style.transition,N=Math.round,O=Math.sqrt,Z=Math.abs,K=Math.min,Q=Math.max,G=parseFloat,J={};i.extend(J,{init:function(){var t=this.options,e=this.$element,s=e.is(Y),n=s?e:e.find(Y),a=n.length,o=i.proxy(this.ready,this);a&&(i.isFunction(t.build)&&e.one(q,t.build),this.trigger(q).isDefaultPrevented()||(U||(t.transition=!1),this.isImg=s,this.length=a,this.count=0,this.$images=n,this.$body=i("body"),t.inline?(e.one(M,i.proxy(function(){this.view()},this)),n.each(function(){this.complete?o():i(this).one(E,o)})):(n.addClass(v),e.on(V,i.proxy(this.start,this)))))},ready:function(){this.count++,this.count===this.length&&this.build()}}),i.extend(J,{build:function(){var t,e,s,n,a=this.options,o=this.$element;this.isBuilt||(t&&t.length||(t=o.parent()),this.$parent=t,this.$viewer=e=i(l.TEMPLATE),this.$canvas=e.find(".viewer-canvas"),this.$footer=e.find(".viewer-footer"),this.$title=e.find(".viewer-title").toggleClass(p,!a.title),this.$toolbar=n=e.find(".viewer-toolbar").toggleClass(p,!a.toolbar),this.$navbar=e.find(".viewer-navbar").toggleClass(p,!a.navbar),this.$button=s=e.find(".viewer-button").toggleClass(p,!a.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(C,!a.zoomable),n.find("li[class*=flip]").toggleClass(C,!a.scalable),a.rotatable||n.find("li[class*=rotate]").addClass(C).appendTo(n),a.inline?(s.addClass(I),e.css("z-index",a.zIndexInline),"static"===t.css("position")&&t.css("position","relative")):(s.addClass(k),e.css("z-index",a.zIndex).addClass([f,b,p].join(" "))),o.after(e),a.inline&&(this.render(),this.bind(),this.isShown=!0),this.isBuilt=!0,i.isFunction(a.built)&&o.one(M,a.built),this.trigger(M))},unbuild:function(){var i=this.options,t=this.$element;this.isBuilt&&(i.inline&&!i.container&&t.removeClass(p),this.$viewer.remove())}}),i.extend(J,{bind:function(){this.$viewer.on(V,i.proxy(this.click,this)).on(T,i.proxy(this.wheel,this)),this.$canvas.on(P,i.proxy(this.mousedown,this)),c.on(S,this._mousemove=a(this.mousemove,this)).on(X,this._mouseup=a(this.mouseup,this)).on(L,this._keydown=a(this.keydown,this)),d.on(R,this._resize=a(this.resize,this))},unbind:function(){this.$viewer.off(V,this.click).off(T,this.wheel),this.$canvas.off(P,this.mousedown),c.off(S,this._mousemove).off(X,this._mouseup).off(L,this._keydown),d.off(R,this._resize)}}),i.extend(J,{render:function(){this.initContainer(),this.initViewer(),this.initList(),this.renderViewer()},initContainer:function(){this.container={width:d.innerWidth(),height:d.innerHeight()}},initViewer:function(){var t,e=this.options,s=this.$parent;e.inline&&(this.parent=t={width:Q(s.width(),e.minWidth),height:Q(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,a=[];this.$images.each(function(s){var n=this.src,o=this.alt||h(n),r=e.url;n&&(t(r)?r=this.getAttribute(r):i.isFunction(r)&&(r=r.call(this,this)),a.push('<li><img src="'+n+'" data-action="view" data-index="'+s+'" data-original-url="'+(r||n)+'" alt="'+o+'"></li>'))}),n.html(a.join("")).find(Y).one(E,{filled:!0},i.proxy(this.loadImage,this)),this.$items=n.children(),e.transition&&s.one(B,function(){n.addClass(z)})},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(z).css("margin-left",0)},initImage:function(t){var e=this.options,s=this.$image,n=this.viewer,a=this.$footer.height(),o=n.width,h=Q(n.height-a,a),l=this.image||{};r(s[0],i.proxy(function(s,n){var a,r,d=s/n,c=o,u=h;h*d>o?u=o/d:c=h*d,c=K(.9*c,s),u=K(.9*u,n),r={naturalWidth:s,naturalHeight:n,aspectRatio:d,ratio:c/s,width:c,height:u,left:(o-c)/2,top:(h-u)/2},a=i.extend({},r),e.rotatable&&(r.rotate=l.rotate||0,a.rotate=0),e.scalable&&(r.scaleX=l.scaleX||1,r.scaleY=l.scaleY||1,a.scaleX=1,a.scaleY=1),this.image=r,this.initialImage=a,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:o(e)}),i.isFunction(t)&&(this.options.transition?s.one(D,t):t())},resetImage:function(){this.$image.remove(),this.$image=null}}),i.extend(J,{start:function(t){var e=t.target;i(e).hasClass(v)&&(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===this.image.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(){this.initImage(i.proxy(function(){this.renderImage(i.proxy(function(){this.isViewed=!0,this.trigger(B)},this))},this))},loadImage:function(t){var e=t.target,s=i(e),n=s.parent(),a=n.width(),o=n.height(),h=t.data&&t.data.filled;r(e,i.proxy(function(i,t){var e=i/t,n=a,r=o;o*e>a?h?n=o*e:r=a/e:h?r=a/e:n=o*e,s.css({width:n,height:r,marginLeft:(a-n)/2,marginTop:(o-r)/2})},this))},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(i){var t=i.originalEvent,e=G(this.options.zoomRatio)||.1,s=1;this.isViewed&&(i.preventDefault(),t.deltaY?s=t.deltaY>0?1:-1:t.wheelDelta?s=-t.wheelDelta/120:t.detail&&(s=t.detail>0?1:-1),this.zoom(-s*e,!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 37:this.prev();break;case 38:this.zoom(t.zoomRatio,!0);break;case 39:this.next();break;case 40: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,a=i,o=e.movable?"move":!1;if(this.isViewed){if(n){if(t=n.length,t>1){if(!e.zoomable||2!==t)return;a=n[1],this.startX2=a.pageX,this.startY2=a.pageY,o="zoom"}else this.isSwitchable()&&(o="switch");a=n[0]}o&&(i.preventDefault(),this.action=o,this.startX=a.pageX||s&&s.pageX,this.startY=a.pageY||s&&s.pageY)}},mousemove:function(i){var t,e=this.options,s=this.action,n=this.$image,a=i.originalEvent,o=a&&a.touches,h=i;if(this.isViewed){if(o){if(t=o.length,t>1){if(!e.zoomable||2!==t)return;h=o[1],this.endX2=h.pageX,this.endY2=h.pageY}h=o[0]}s&&(i.preventDefault(),"move"===s&&e.transition&&n.hasClass(z)&&n.removeClass(z),this.endX=h.pageX||a&&a.pageX,this.endY=h.pageY||a&&a.pageY,this.change())}},mouseup:function(i){var t=this.action;t&&(i.preventDefault(),"move"===t&&this.options.transition&&this.$image.addClass(z),this.action=!1)}}),i.extend(J,{show:function(){var t,e=this.options;e.inline||this.transitioning||(this.isBuilt||this.build(),i.isFunction(e.show)&&this.$element.one(W,e.show),this.trigger(W).isDefaultPrevented()||(this.$body.addClass(g),t=this.$viewer.removeClass(p),this.$element.one(_,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(z).get(0).offsetWidth,t.one(D,i.proxy(this.shown,this)).addClass(y)):(t.addClass(y),this.shown())))},hide:function(){var t=this.options,e=this.$viewer;t.inline||this.transitioning||!this.isShown||(i.isFunction(t.hide)&&this.$element.one(j,t.hide),this.trigger(j).isDefaultPrevented()||(this.isViewed&&t.transition?(this.transitioning=!0,this.$image.one(D,i.proxy(function(){e.one(D,i.proxy(this.hidden,this)).removeClass(y)},this)),this.zoomTo(0,!1,!0)):(e.removeClass(y),this.hidden())))},view:function(t){var e,s,n,a,o,h=this.options,r=this.viewer,l=this.$title;t=Number(t)||0,!this.isShown||this.isPlayed||0>t||t>=this.length||this.isViewed&&t===this.index||this.trigger(H).isDefaultPrevented()||(s=this.$items.eq(t),n=s.find(Y),a=n.data("originalUrl"),o=n.attr("alt"),this.$image=e=i('<img src="'+a+'" alt="'+o+'">'),e.toggleClass(z,h.transition).toggleClass(x,h.movable).css({width:0,height:0,marginLeft:r.width/2,marginTop:r.height/2}),this.$items.eq(this.index).removeClass($),s.addClass($),this.isViewed=!1,this.index=t,this.image=null,e.one(E,i.proxy(this.load,this)),this.$canvas.html(e),l.empty(),this.renderList(),this.$element.one(B,i.proxy(function(){var i=this.image,t=i.naturalWidth,e=i.naturalHeight;l.html(o+" ("+t+" &times; "+e+")")},this)))},prev:function(){this.view(Q(this.index-1,0))},next:function(){this.view(K(this.index+1,this.length-1))},move:function(i,t){var n=this.image;s(t)&&(t=i),i=G(i),t=G(t),this.isShown&&!this.isPlayed&&this.options.movable&&(n.left+=e(i)?i:0,n.top+=e(t)?t:0,this.renderImage())},zoom:function(i,t){var s,n,a=this.options,o=Q(.01,a.minZoomRatio),h=K(100,a.maxZoomRatio),r=this.image;i=G(i),e(i)&&this.isShown&&!this.isPlayed&&a.zoomable&&(i=0>i?1/(1-i):1+i,s=r.width*i,n=r.height*i,i=s/r.naturalWidth,i=K(Q(i,o),h),i>.95&&1.05>i&&(i=1,s=r.naturalWidth,n=r.naturalHeight),r.left-=(s-r.width)/2,r.top-=(n-r.height)/2,r.width=s,r.height=n,r.ratio=i,this.renderImage(),t&&this.tooltip())},zoomTo:function(i,t,s){var n,a,o=this.image;i=Q(i,0),e(i)&&this.isShown&&!this.isPlayed&&(s||this.options.zoomable)&&(n=o.naturalWidth*i,a=o.naturalHeight*i,o.left-=(n-o.width)/2,o.top-=(a-o.height)/2,o.width=n,o.height=a,o.ratio=i,this.renderImage(),t&&this.tooltip())},rotate:function(i){var t=this.image;i=G(i),e(i)&&this.isShown&&!this.isPlayed&&this.options.rotatable&&(t.rotate=(t.rotate||0)+i,this.renderImage())},rotateTo:function(i){var t=this.image;i=G(i),e(i)&&this.isShown&&!this.isPlayed&&this.options.rotatable&&(t.rotate=i,this.renderImage())},scale:function(i,t){var n=this.image;s(t)&&(t=i),i=G(i),t=G(t),this.isShown&&!this.isPlayed&&this.options.scalable&&(n.scaleX=e(i)?i:1,n.scaleY=e(t)?t:1,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,a=i.proxy(this.loadImage,this),o=[],h=0,r=0;this.isShown&&!this.isPlayed&&(s.fullscreen&&this.fullscreen(),this.isPlayed=!0,n.addClass(w),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(b).toggleClass(z,s.transition),e.hasClass($)&&(d.addClass(y),r=t),o.push(d),d.one(E,{filled:!1},a),n.append(d)}),e(s.interval)&&s.interval>0&&(t=i.proxy(function(){this.playing=setTimeout(function(){o[r].removeClass(y),r++,r=h>r?r:0,o[r].addClass(y),t()},s.interval)},this),h>1&&t()))},stop:function(){this.isPlayed&&(this.isPlayed=!1,clearTimeout(this.playing),this.$player.removeClass(w).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(g),this.$button.addClass(F),t.transition&&(e.removeClass(z),s.removeClass(z)),this.$viewer.addClass(f).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(z),s.addClass(z)},0)})},this)))},exit:function(){var t=this.options,e=this.$image,s=this.$list;this.isFulled&&(this.isFulled=!1,this.$body.removeClass(g),this.$button.removeClass(F),t.transition&&(e.removeClass(z),s.removeClass(z)),this.$viewer.removeClass(f).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(z),s.addClass(z)},0)})},this)))},tooltip:function(){var t=this.options,e=this.$tooltip,s=this.image,n=[w,b,z].join(" ");this.isShown&&!this.isPlayed&&t.tooltip&&(e.text(N(100*s.ratio)+"%"),this.fading?clearTimeout(this.fading):t.transition?(e.addClass(n).get(0).offsetWidth,e.addClass(y)):e.addClass(w),this.fading=setTimeout(i.proxy(function(){t.transition?e.one(D,function(){e.removeClass(n)}).removeClass(y):e.removeClass(w),this.fading=!1},this),1e3))},toggle:function(){1===this.image.ratio?this.zoomTo(this.initialImage.ratio):this.zoomTo(1)},reset:function(){this.isShown&&!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(v),i.off(V,this.start)),this.unbuild(),i.removeData(u)}}),i.extend(J,{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(_,t.shown),this.trigger(_)},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(g),this.$viewer.addClass(p),this.resetList(),this.resetImage(),i.isFunction(t.hidden)&&this.$element.one(A,t.hidden),this.trigger(A)},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=O(i*i+t*t),a=O(e*e+s*s);return(a-n)/n}(Z(this.startX-this.startX2),Z(this.startY-this.startY2),Z(this.endX-this.endX2),Z(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}}),i.extend(l.prototype,J),l.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},l.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>',l.other=i.fn.viewer,i.fn.viewer=function(e){var a,o=n(arguments,1);return this.each(function(){var s,n=i(this),h=n.data(u);if(!h){if(/destroy|hide|exit|stop|reset/.test(e))return;n.data(u,h=new l(this,e))}t(e)&&i.isFunction(s=h[e])&&(a=s.apply(h,o))}),s(a)?this:a},i.fn.viewer.Constructor=l,i.fn.viewer.setDefaults=l.setDefaults,i.fn.viewer.noConflict=function(){return i.fn.viewer=l.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 t(i)?i.replace(/^.*\//,"").replace(/[\?&#].*$/,""):""}function r(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 l(t,e){this.$element=i(t),this.options=i.extend({},l.DEFAULTS,i.isPlainObject(e)&&e),this.isImg=!1,this.isBuilt=!1,this.isShown=!1,this.isViewed=!1,this.isFulled=!1,this.isPlayed=!1,this.playing=!1,this.fading=!1,this.transitioning=!1,this.action=!1,this.target=!1,this.timeout=!1,this.index=0,this.length=0,this.init()}var d=i(window),c=i(document),u="viewer",m=document.createElement(u),v="viewer-toggle",f="viewer-fixed",g="viewer-open",w="viewer-show",p="viewer-hide",b="viewer-fade",y="viewer-in",x="viewer-move",$="viewer-active",C="viewer-invisible",z="viewer-transition",I="viewer-fullscreen",F="viewer-fullscreen-exit",k="viewer-close",T="img",Y="mousedown touchstart pointerdown MSPointerDown",P="mousemove touchmove pointermove MSPointerMove",X="mouseup touchend touchcancel pointerup pointercancel MSPointerUp MSPointerCancel",S="wheel mousewheel DOMMouseScroll",D="transitionend",E="load."+u,L="keydown."+u,V="click."+u,R="resize."+u,q="build."+u,M="built."+u,W="show."+u,_="shown."+u,j="hide."+u,A="hidden."+u,H="view."+u,B="viewed."+u,U="undefined"!=typeof m.style.transition,N=Math.round,O=Math.sqrt,Z=Math.abs,K=Math.min,Q=Math.max,G=Number,J={};i.extend(J,{init:function(){var t=this.options,e=this.$element,s=e.is(T),n=s?e:e.find(T),o=n.length,a=i.proxy(this.ready,this);o&&(i.isFunction(t.build)&&e.one(q,t.build),this.trigger(q).isDefaultPrevented()||(U||(t.transition=!1),this.isImg=s,this.length=o,this.count=0,this.$images=n,this.$body=i("body"),t.inline?(e.one(M,i.proxy(function(){this.view()},this)),n.each(function(){this.complete?a():i(this).one(E,a)})):(n.addClass(v),e.on(V,i.proxy(this.start,this)))))},ready:function(){this.count++,this.count===this.length&&this.build()}}),i.extend(J,{build:function(){var t,e,s,n,o=this.options,a=this.$element;this.isBuilt||(t&&t.length||(t=a.parent()),this.$parent=t,this.$viewer=e=i(l.TEMPLATE),this.$canvas=e.find(".viewer-canvas"),this.$footer=e.find(".viewer-footer"),this.$title=e.find(".viewer-title").toggleClass(p,!o.title),this.$toolbar=n=e.find(".viewer-toolbar").toggleClass(p,!o.toolbar),this.$navbar=e.find(".viewer-navbar").toggleClass(p,!o.navbar),this.$button=s=e.find(".viewer-button").toggleClass(p,!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(C,!o.zoomable),n.find("li[class*=flip]").toggleClass(C,!o.scalable),o.rotatable||n.find("li[class*=rotate]").addClass(C).appendTo(n),o.inline?(s.addClass(I),e.css("z-index",o.zIndexInline),"static"===t.css("position")&&t.css("position","relative")):(s.addClass(k),e.css("z-index",o.zIndex).addClass([f,b,p].join(" "))),a.after(e),o.inline&&(this.render(),this.bind(),this.isShown=!0),this.isBuilt=!0,i.isFunction(o.built)&&a.one(M,o.built),this.trigger(M))},unbuild:function(){var i=this.options,t=this.$element;this.isBuilt&&(i.inline&&!i.container&&t.removeClass(p),this.$viewer.remove())}}),i.extend(J,{bind:function(){this.$viewer.on(V,i.proxy(this.click,this)).on(S,i.proxy(this.wheel,this)),this.$canvas.on(Y,i.proxy(this.mousedown,this)),c.on(P,this._mousemove=o(this.mousemove,this)).on(X,this._mouseup=o(this.mouseup,this)).on(L,this._keydown=o(this.keydown,this)),d.on(R,this._resize=o(this.resize,this))},unbind:function(){this.$viewer.off(V,this.click).off(S,this.wheel),this.$canvas.off(Y,this.mousedown),c.off(P,this._mousemove).off(X,this._mouseup).off(L,this._keydown),d.off(R,this._resize)}}),i.extend(J,{render:function(){this.initContainer(),this.initViewer(),this.initList(),this.renderViewer()},initContainer:function(){this.container={width:d.innerWidth(),height:d.innerHeight()}},initViewer:function(){var t,e=this.options,s=this.$parent;e.inline&&(this.parent=t={width:Q(s.width(),e.minWidth),height:Q(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||h(n),r=e.url;n&&(t(r)?r=this.getAttribute(r):i.isFunction(r)&&(r=r.call(this,this)),o.push('<li><img src="'+n+'" data-action="view" data-index="'+s+'" data-original-url="'+(r||n)+'" alt="'+a+'"></li>'))}),n.html(o.join("")).find(T).one(E,{filled:!0},i.proxy(this.loadImage,this)),this.$items=n.children(),e.transition&&s.one(B,function(){n.addClass(z)})},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(z).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=Q(n.height-o,o),l=this.image||{};r(s[0],i.proxy(function(s,n){var o,r,d=s/n,c=a,u=h;h*d>a?u=a/d:c=h*d,c=K(.9*c,s),u=K(.9*u,n),r={naturalWidth:s,naturalHeight:n,aspectRatio:d,ratio:c/s,width:c,height:u,left:(a-c)/2,top:(h-u)/2},o=i.extend({},r),e.rotatable&&(r.rotate=l.rotate||0,o.rotate=0),e.scalable&&(r.scaleX=l.scaleX||1,r.scaleY=l.scaleY||1,o.scaleX=1,o.scaleY=1),this.image=r,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.options.transition?s.one(D,t):t())},resetImage:function(){this.$image.remove(),this.$image=null}}),i.extend(J,{start:function(t){var e=t.target;i(e).hasClass(v)&&(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===this.image.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(C).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(z,t.transition).toggleClass(x,t.movable),this.renderImage(i.proxy(function(){this.isViewed=!0,this.trigger(B)},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;r(e,i.proxy(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})},this))},resize:function(){this.initContainer(),this.initViewer(),this.renderViewer(),this.renderList(),this.initImage(i.proxy(function(){this.renderImage()},this)),this.isPlayed&&this.$player.find(T).one(E,i.proxy(this.loadImage,this)).trigger(E)},wheel:function(i){var t=i.originalEvent,e=G(this.options.zoomRatio)||.1,s=1;this.isViewed&&(i.preventDefault(),t.deltaY?s=t.deltaY>0?1:-1:t.wheelDelta?s=-t.wheelDelta/120:t.detail&&(s=t.detail>0?1:-1),this.zoom(-s*e,!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 37:this.prev();break;case 38:this.zoom(t.zoomRatio,!0);break;case 39:this.next();break;case 40: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(z)&&n.removeClass(z),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(z),this.action=!1)}}),i.extend(J,{show:function(){var t,e=this.options;e.inline||this.transitioning||(this.isBuilt||this.build(),i.isFunction(e.show)&&this.$element.one(W,e.show),this.trigger(W).isDefaultPrevented()||(this.$body.addClass(g),t=this.$viewer.removeClass(p),this.$element.one(_,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(z).get(0).offsetWidth,t.one(D,i.proxy(this.shown,this)).addClass(y)):(t.addClass(y),this.shown())))},hide:function(){var t=this.options,e=this.$viewer;t.inline||this.transitioning||!this.isShown||(i.isFunction(t.hide)&&this.$element.one(j,t.hide),this.trigger(j).isDefaultPrevented()||(this.isViewed&&t.transition?(this.transitioning=!0,this.$image.one(D,i.proxy(function(){e.one(D,i.proxy(this.hidden,this)).removeClass(y)},this)),this.zoomTo(0,!1,!0)):(e.removeClass(y),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(H).isDefaultPrevented()||(s=this.$items.eq(t),n=s.find(T),o=n.data("originalUrl"),a=n.attr("alt"),this.$image=e=i('<img src="'+o+'" alt="'+a+'">'),this.$items.eq(this.index).removeClass($),s.addClass($),this.isViewed=!1,this.index=t,this.image=null,this.$canvas.html(e.addClass(C)),e[0].complete?this.load():(e.one(E,i.proxy(this.load,this)),this.timeout&&clearTimeout(this.timeout),this.timeout=setTimeout(function(){e.removeClass(C)},1e3)),h.empty(),this.renderList(),this.$element.one(B,i.proxy(function(){var i=this.image,t=i.naturalWidth,e=i.naturalHeight;h.html(a+" ("+t+" &times; "+e+")")},this)))},prev:function(){this.view(Q(this.index-1,0))},next:function(){this.view(K(this.index+1,this.length-1))},move:function(i,t){var e=this.image;this.moveTo(s(i)?i:e.left+G(i),s(t)?t:e.top+G(t))},moveTo:function(i,t){var n=this.image,o=!1;s(t)&&(t=i),i=G(i),t=G(t),this.isShown&&!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=G(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=Q(0,i),e(i)&&this.isShown&&!this.isPlayed&&(s||a.zoomable)&&(s||(h=Q(h,a.minZoomRatio),r=K(r,a.maxZoomRatio),i=K(Q(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)+G(i))},rotateTo:function(i){var t=this.image;i=G(i),e(i)&&this.isShown&&!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=G(i),t=G(t),this.isShown&&!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(w),this.$items.each(function(t){var e=i(this),l=e.find(T),d=i('<img src="'+l.data("originalUrl")+'" alt="'+l.attr("alt")+'">');h++,d.addClass(b).toggleClass(z,s.transition),e.hasClass($)&&(d.addClass(y),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(y),r++,r=h>r?r:0,a[r].addClass(y),t()},s.interval)},this),h>1&&t()))},stop:function(){this.isPlayed&&(this.isPlayed=!1,clearTimeout(this.playing),this.$player.removeClass(w).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(g),this.$button.addClass(F),t.transition&&(e.removeClass(z),s.removeClass(z)),this.$viewer.addClass(f).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(z),s.addClass(z)},0)})},this)))},exit:function(){var t=this.options,e=this.$image,s=this.$list;this.isFulled&&(this.isFulled=!1,this.$body.removeClass(g),this.$button.removeClass(F),t.transition&&(e.removeClass(z),s.removeClass(z)),this.$viewer.removeClass(f).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(z),s.addClass(z)},0)})},this)))},tooltip:function(){var t=this.options,e=this.$tooltip,s=this.image,n=[w,b,z].join(" ");this.isShown&&!this.isPlayed&&t.tooltip&&(e.text(N(100*s.ratio)+"%"),this.fading?clearTimeout(this.fading):t.transition?(e.addClass(n).get(0).offsetWidth,e.addClass(y)):e.addClass(w),this.fading=setTimeout(i.proxy(function(){t.transition?e.one(D,function(){e.removeClass(n)}).removeClass(y):e.removeClass(w),this.fading=!1},this),1e3))},toggle:function(){1===this.image.ratio?this.zoomTo(this.initialImage.ratio):this.zoomTo(1)},reset:function(){this.isShown&&!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(v),i.off(V,this.start)),this.unbuild(),i.removeData(u)}}),i.extend(J,{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(_,t.shown),this.trigger(_)},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(g),this.$viewer.addClass(p),this.resetList(),this.resetImage(),i.isFunction(t.hidden)&&this.$element.one(A,t.hidden),this.trigger(A)},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=O(i*i+t*t),o=O(e*e+s*s);return(o-n)/n}(Z(this.startX-this.startX2),Z(this.startY-this.startY2),Z(this.endX-this.endX2),Z(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}}),i.extend(l.prototype,J),l.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},l.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>',l.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(u);if(!h){if(/destroy|hide|exit|stop|reset/.test(e))return;n.data(u,h=new l(this,e))}t(e)&&i.isFunction(s=h[e])&&(o=s.apply(h,a))}),s(o)?this:o},i.fn.viewer.Constructor=l,i.fn.viewer.setDefaults=l.setDefaults,i.fn.viewer.noConflict=function(){return i.fn.viewer=l.other,this}});

package.json

 {
   "name": "imageviewer",
   "description": "A simple jQuery image viewing plugin.",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "main": "dist/viewer.js",
@@ -6,0 +6,0 @@ "keywords": [

README.md

@@ -1,6 +0,6 @@
-# [Image Viewer](https://github.com/fengyuanchen/viewer)
+# [Viewer](https://github.com/fengyuanchen/viewer)
 
 > A simple jQuery image viewing plugin.
 
-- [Demo](http://fengyuanchen.github.io/viewer)
+- [Demo](https://fengyuanchen.github.io/viewer)
 
@@ -67,3 +67,2 @@
 <!-- a block container is required -->
-
 <div>
@@ -393,3 +392,2 @@ <img class="image" src="picture.jpg" alt="Picture">
   - Type: `Number`
-  - Default: `0`
   - Moving size (px) in the horizontal direction
@@ -402,3 +400,3 @@
 
-Move the image.
+Move the image with relative offsets.
 
@@ -414,2 +412,16 @@ ```js
 
+### moveTo(x[, y])
+
+- **x**:
+  - Type: `Number`
+  - The `left` value of the image
+
+- **y** (optional):
+  - Type: `Number`
+  - The `top` value of the image
+  - If not present, its default value is `x`.
+
+Move the image to an absolute point.
+
+
 ### zoom(ratio[, hasTooltip])
@@ -427,3 +439,3 @@
 
-Zoom the image.
+Zoom the image with a relative ratio
 
@@ -447,3 +459,3 @@ ```js
 
-Zoom the image to a special ratio.
+Zoom the image to an absolute ratio.
 
@@ -463,3 +475,3 @@ ```js
 
-Rotate the image.
+Rotate the image with a relative degree.
 
@@ -479,3 +491,3 @@ > Requires [CSS3 2D Transforms](http://caniuse.com/transforms2d) support (IE 9+).
 
-Rotate the image to a special angle.
+Rotate the image to an absolute degree.
 
@@ -482,0 +494,0 @@ > Requires [CSS3 2D Transforms](http://caniuse.com/transforms2d) support (IE 9+).

src/js/handlers.js

@@ -95,3 +95,25 @@ $.extend(prototype, {
     load: function () {
+      var options = this.options;
+      var viewer = this.viewer;
+      var $image = this.$image;
+
+      if (this.timeout) {
+        clearTimeout(this.timeout);
+        this.timeout = false;
+      }
+
+      $image.removeClass(CLASS_INVISIBLE).css('cssText', (
+        'width:0;' +
+        'height:0;' +
+        'margin-left:' + viewer.width / 2 + 'px;' +
+        'margin-top:' + viewer.height / 2 + 'px;' +
+        'max-width:none!important;' +
+        'visibility:visible;'
+      ));
+
       this.initImage($.proxy(function () {
+        $image.
+          toggleClass(CLASS_TRANSITION, options.transition).
+          toggleClass(CLASS_MOVE, options.movable);
+
         this.renderImage($.proxy(function () {
@@ -98,0 +120,0 @@ this.isViewed = true;

src/js/methods.js

@@ -79,4 +79,2 @@ $.extend(prototype, {
     view: function (index) {
-      var options = this.options;
-      var viewer = this.viewer;
       var $title = this.$title;
@@ -106,13 +104,2 @@ var $image;
       this.$image = $image = $('<img src="' + url + '" alt="' + alt + '">');
-
-      $image.
-        toggleClass(CLASS_TRANSITION, options.transition).
-        toggleClass(CLASS_MOVE, options.movable).
-        css({
-          width: 0,
-          height: 0,
-          marginLeft: viewer.width / 2,
-          marginTop: viewer.height / 2
-        });
-
       this.$items.eq(this.index).removeClass(CLASS_ACTIVE);
@@ -124,4 +111,19 @@ $item.addClass(CLASS_ACTIVE);
       this.image = null;
-      $image.one(EVENT_LOAD, $.proxy(this.load, this));
-      this.$canvas.html($image);
+      this.$canvas.html($image.addClass(CLASS_INVISIBLE));
+
+      if ($image[0].complete) {
+        this.load();
+      } else {
+        $image.one(EVENT_LOAD, $.proxy(this.load, this));
+
+        if (this.timeout) {
+          clearTimeout(this.timeout);
+        }
+
+        // Make the image visible if it fails to load within 1s
+        this.timeout = setTimeout(function () {
+          $image.removeClass(CLASS_INVISIBLE);
+        }, 1000);
+      }
+
       $title.empty();
@@ -153,3 +155,3 @@
     /**
-     * Move the image
+     * Move the image with relative offsets
      *
@@ -162,14 +164,40 @@ * @param {Number} offsetX
 
-      // If "offsetY" is not present, its default value is "offsetX"
-      if (isUndefined(offsetY)) {
-        offsetY = offsetX;
+      this.moveTo(
+        isUndefined(offsetX) ? offsetX : image.left + num(offsetX),
+        isUndefined(offsetY) ? offsetY : image.top + num(offsetY)
+      );
+    },
+
+    /**
+     * Move the image to an absolute point
+     *
+     * @param {Number} x
+     * @param {Number} y (optional)
+     */
+    moveTo: function (x, y) {
+      var image = this.image;
+      var changed = false;
+
+      // If "y" is not present, its default value is "x"
+      if (isUndefined(y)) {
+        y = x;
       }
 
-      offsetX = num(offsetX);
-      offsetY = num(offsetY);
+      x = num(x);
+      y = num(y);
 
       if (this.isShown && !this.isPlayed && this.options.movable) {
-        image.left += isNumber(offsetX) ? offsetX : 0;
-        image.top += isNumber(offsetY) ? offsetY : 0;
-        this.renderImage();
+        if (isNumber(x)) {
+          image.left = x;
+          changed = true;
+        }
+
+        if (isNumber(y)) {
+          image.top = y;
+          changed = true;
+        }
+
+        if (changed) {
+          this.renderImage();
+        }
       }
@@ -179,3 +207,3 @@ },
     /**
-     * Zoom the image
+     * Zoom the image with a relative ratio
      *
@@ -186,44 +214,17 @@ * @param {Number} ratio
     zoom: function (ratio, hasTooltip) {
-      var options = this.options;
-      var minZoomRatio = max(0.01, options.minZoomRatio);
-      var maxZoomRatio = min(100, options.maxZoomRatio);
       var image = this.image;
-      var width;
-      var height;
 
       ratio = num(ratio);
 
-      if (isNumber(ratio) && this.isShown && !this.isPlayed && options.zoomable) {
-        if (ratio < 0) {
-          ratio =  1 / (1 - ratio);
-        } else {
-          ratio = 1 + ratio;
-        }
+      if (ratio < 0) {
+        ratio =  1 / (1 - ratio);
+      } else {
+        ratio = 1 + ratio;
+      }
 
-        width = image.width * ratio;
-        height = image.height * ratio;
-        ratio = width / image.naturalWidth;
-        ratio = min(max(ratio, minZoomRatio), maxZoomRatio);
-
-        if (ratio > 0.95 && ratio < 1.05) {
-          ratio = 1;
-          width = image.naturalWidth;
-          height = image.naturalHeight;
-        }
-
-        image.left -= (width - image.width) / 2;
-        image.top -= (height - image.height) / 2;
-        image.width = width;
-        image.height = height;
-        image.ratio = ratio;
-        this.renderImage();
-
-        if (hasTooltip) {
-          this.tooltip();
-        }
-      }
+      this.zoomTo(image.width * ratio / image.naturalWidth, hasTooltip);
     },
 
     /**
-     * Zoom the image to a special ratio
+     * Zoom the image to an absolute ratio
      *
@@ -235,15 +236,30 @@ * @param {Number} ratio
     zoomTo: function (ratio, hasTooltip, _zoomable) {
+      var options = this.options;
+      var minZoomRatio = 0.01;
+      var maxZoomRatio = 100;
       var image = this.image;
-      var width;
-      var height;
+      var width = image.width;
+      var height = image.height;
+      var newWidth;
+      var newHeight;
 
-      ratio = max(ratio, 0);
+      ratio = max(0, ratio);
 
-      if (isNumber(ratio) && this.isShown && !this.isPlayed && (_zoomable || this.options.zoomable)) {
-        width = image.naturalWidth * ratio;
-        height = image.naturalHeight * ratio;
-        image.left -= (width - image.width) / 2;
-        image.top -= (height - image.height) / 2;
-        image.width = width;
-        image.height = height;
+      if (isNumber(ratio) && this.isShown && !this.isPlayed && (_zoomable || options.zoomable)) {
+        if (!_zoomable) {
+          minZoomRatio = max(minZoomRatio, options.minZoomRatio);
+          maxZoomRatio = min(maxZoomRatio, options.maxZoomRatio);
+          ratio = min(max(ratio, minZoomRatio), maxZoomRatio);
+        }
+
+        if (ratio > 0.95 && ratio < 1.05) {
+          ratio = 1;
+        }
+
+        newWidth = image.naturalWidth * ratio;
+        newHeight = image.naturalHeight * ratio;
+        image.left -= (newWidth - width) / 2;
+        image.top -= (newHeight - height) / 2;
+        image.width = newWidth;
+        image.height = newHeight;
         image.ratio = ratio;
@@ -259,30 +275,23 @@ this.renderImage();
     /**
-     * Rotate the image
-     * https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#rotate()
+     * Rotate the image with a relative degree
      *
-     * @param {Number} degrees
+     * @param {Number} degree
      */
-    rotate: function (degrees) {
-      var image = this.image;
-
-      degrees = num(degrees);
-
-      if (isNumber(degrees) && this.isShown && !this.isPlayed && this.options.rotatable) {
-        image.rotate = ((image.rotate || 0) + degrees);
-        this.renderImage();
-      }
+    rotate: function (degree) {
+      this.rotateTo((this.image.rotate || 0) + num(degree));
     },
 
     /**
-     * Rotate the image to a special angle
+     * Rotate the image to an absolute degree
+     * https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#rotate()
      *
-     * @param {Number} degrees
+     * @param {Number} degree
      */
-    rotateTo: function (degrees) {
+    rotateTo: function (degree) {
       var image = this.image;
 
-      degrees = num(degrees);
+      degree = num(degree);
 
-      if (isNumber(degrees) && this.isShown && !this.isPlayed && this.options.rotatable) {
-        image.rotate = degrees;
+      if (isNumber(degree) && this.isShown && !this.isPlayed && this.options.rotatable) {
+        image.rotate = degree;
         this.renderImage();
@@ -301,2 +310,3 @@ }
       var image = this.image;
+      var changed = false;
 
@@ -312,5 +322,15 @@ // If "scaleY" is not present, its default value is "scaleX"
       if (this.isShown && !this.isPlayed && this.options.scalable) {
-        image.scaleX = isNumber(scaleX) ? scaleX : 1;
-        image.scaleY = isNumber(scaleY) ? scaleY : 1;
-        this.renderImage();
+        if (isNumber(scaleX)) {
+          image.scaleX = scaleX;
+          changed = true;
+        }
+
+        if (isNumber(scaleY)) {
+          image.scaleY = scaleY;
+          changed = true;
+        }
+
+        if (changed) {
+          this.renderImage();
+        }
       }
@@ -317,0 +337,0 @@ },

src/js/variables.js

@@ -55,5 +55,5 @@ var $window = $(window);
   var max = Math.max;
-  var num = parseFloat;
+  var num = Number;
 
   // Prototype
   var prototype = {};

src/js/viewer.js

@@ -15,2 +15,3 @@ function Viewer(element, options) {
     this.target = false;
+    this.timeout = false;
     this.index = 0;
@@ -17,0 +18,0 @@ this.length = 0;

New alerts

License Policy Violation

License

This 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

License

This 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

203515

increased by1.26%

Lines of code

3178

increased by2.38%

Number of lines in readme file

675

increased by1.81%

No dependency changes