From 14069e447111744b7d4ddc7ad3b17eb71c0c5d4f Mon Sep 17 00:00:00 2001
From: Dmitriy NB <support@1000.menu>
Date: Thu, 10 Nov 2016 16:02:10 +0100
Subject: [PATCH 1/2] Custom zoom range

---
 demo/demo.css                |  4 +++
 demo/index.html              | 33 +++++++++++++++----
 js/jquery.guillotine.js      | 64 ++++++++++++++++++++++++++----------
 js/jquery.guillotine.min.js  |  2 +-
 src/jquery.guillotine.coffee | 31 ++++++++++++++---
 5 files changed, 104 insertions(+), 30 deletions(-)

diff --git a/demo/demo.css b/demo/demo.css
index 6a8740c..b5f4909 100644
--- a/demo/demo.css
+++ b/demo/demo.css
@@ -48,6 +48,10 @@ body {
 
 #controls button:hover { color: #333; }
 
+#controls input[type="range"]{
+    width:100%;
+}
+
 #data {
   list-style: none;
   display: inline-block;
diff --git a/demo/index.html b/demo/index.html
index 1e9bf41..bd59dd0 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -25,6 +25,8 @@ <h1>Guillotine demo</h1>
       <button id='fit'          type='button' title='Fit image'> [ ]  </button>
       <button id='zoom_in'      type='button' title='Zoom in'> + </button>
       <button id='rotate_right' type='button' title='Rotate right'> &gt; </button>
+      <br><br> Custom zoom:
+      <br> <input id='custom_zoom' type='range' min='0' max='2' value='1' step='0.01'>
     </div>
 
     <ul id='data'>
@@ -52,22 +54,41 @@ <h1>Guillotine demo</h1>
       // Make sure the image is completely loaded before calling the plugin
       picture.one('load', function(){
         // Initialize plugin (with custom event)
-        picture.guillotine({eventOnChange: 'guillotinechange'});
+        picture.guillotine({eventOnChange: 'guillotinechange', maxScale:2});
 
         // Display inital data
         var data = picture.guillotine('getData');
+        console.log(data);
         for(var key in data) { $('#'+key).html(data[key]); }
 
         // Bind button actions
-        $('#rotate_left').click(function(){ picture.guillotine('rotateLeft'); });
-        $('#rotate_right').click(function(){ picture.guillotine('rotateRight'); });
-        $('#fit').click(function(){ picture.guillotine('fit'); });
-        $('#zoom_in').click(function(){ picture.guillotine('zoomIn'); });
-        $('#zoom_out').click(function(){ picture.guillotine('zoomOut'); });
+        $('#rotate_left').click(function(){ 
+            picture.guillotine('rotateLeft'); 
+            $("#custom_zoom").prop({min:data.minScale});
+        });
+        $('#rotate_right').click(function(){ 
+            picture.guillotine('rotateRight'); 
+            $("#custom_zoom").prop({min:data.minScale});
+        });
+        $('#fit').click(function(){ 
+            picture.guillotine('fit'); 
+            $('#custom_zoom')[0].value = data.scale;
+        });
+        $('#zoom_in').click(function(){ 
+            picture.guillotine('zoomIn');
+            $('#custom_zoom')[0].value -= -data.zoomStep;
+        });
+        $('#zoom_out').click(function(){ 
+            picture.guillotine('zoomOut'); 
+            $('#custom_zoom')[0].value -= +data.zoomStep;
+        });
+		
+		$("#custom_zoom").prop({min:data.minScale, max:data.maxScale, value:data.scale}).on("input change", function(){ picture.guillotine('zoomCustom', $(this).val()); });
 
         // Update data on change
         picture.on('guillotinechange', function(ev, data, action) {
           data.scale = parseFloat(data.scale.toFixed(4));
+          data.minScale = parseFloat(data.minScale.toFixed(4));
           for(var k in data) { $('#'+k).html(data[k]); }
         });
       });
diff --git a/js/jquery.guillotine.js b/js/jquery.guillotine.js
index 34bcbc9..ad93aa3 100644
--- a/js/jquery.guillotine.js
+++ b/js/jquery.guillotine.js
@@ -1,4 +1,4 @@
-// Generated by CoffeeScript 1.8.0
+// Generated by CoffeeScript 1.11.0
 
 /*
  * jQuery Guillotine Plugin v1.3.1
@@ -14,8 +14,8 @@
 (function() {
   "use strict";
   var $, Guillotine, canTransform, defaults, events, getPointerPosition, hardwareAccelerate, isTouch, pluginName, scope, touchRegExp, validEvent, whitelist,
-    __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
-    __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
+    bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
+    indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
 
   $ = jQuery;
 
@@ -63,14 +63,14 @@
   };
 
   canTransform = function() {
-    var hasTransform, helper, prefix, prefixes, prop, test, tests, value, _i, _len;
+    var hasTransform, helper, i, len, prefix, prefixes, prop, test, tests, value;
     hasTransform = false;
     prefixes = ['webkit', 'Moz', 'O', 'ms', 'Khtml'];
     tests = {
       transform: 'transform'
     };
-    for (_i = 0, _len = prefixes.length; _i < _len; _i++) {
-      prefix = prefixes[_i];
+    for (i = 0, len = prefixes.length; i < len; i++) {
+      prefix = prefixes[i];
       tests[prefix + 'Transform'] = '-' + prefix.toLowerCase() + '-transform';
     }
     helper = document.createElement('img');
@@ -107,9 +107,9 @@
 
   Guillotine = (function() {
     function Guillotine(element, options) {
-      this._drag = __bind(this._drag, this);
-      this._unbind = __bind(this._unbind, this);
-      this._start = __bind(this._start, this);
+      this._drag = bind(this._drag, this);
+      this._unbind = bind(this._unbind, this);
+      this._start = bind(this._start, this);
       this.op = $.extend(true, {}, defaults, options, $(element).data(pluginName));
       this.enabled = true;
       this.zoomInFactor = 1 + this.op.zoomStep;
@@ -122,7 +122,10 @@
         x: 0,
         y: 0,
         w: this.op.width,
-        h: this.op.height
+        h: this.op.height,
+        minScale: 1,
+        zoomStep: +this.op.zoomStep.toFixed(2),
+        maxScale: +this.op.maxScale.toFixed(2)
       };
       this._wrap(element);
       if (this.op.init != null) {
@@ -162,6 +165,11 @@
         left: 0
       });
       canvas = el.wrap(canvas).parent();
+      this.widthReal = width;
+      this.heightReal = height;
+      this.widthOrig = this.width;
+      this.heightOrig = this.height;
+      this.data.minScale = +(Math.max.apply(this, [this.op.width / this.widthReal, this.op.height / this.heightReal])).toFixed(2);
       paddingTop = this.op.height / this.op.width * 100 + '%';
       guillotine = $('<div>').addClass('guillotine-window');
       guillotine.css({
@@ -277,6 +285,9 @@
       }
       w = this.width;
       h = this.height;
+      if (this.op.maxScale && this.data.scale * factor > this.op.maxScale) {
+        return;
+      }
       if (w * factor > 1 && h * factor > 1) {
         this.width *= factor;
         this.height *= factor;
@@ -292,6 +303,13 @@
       return this._offset(left, top);
     };
 
+    Guillotine.prototype._zoomScale = function(scale) {
+      var factor;
+      scale = parseFloat(scale);
+      factor = scale / this.data.scale;
+      return this._zoom(factor);
+    };
+
     Guillotine.prototype._fit = function() {
       var prevWidth, relativeRatio;
       prevWidth = this.width;
@@ -313,7 +331,7 @@
     };
 
     Guillotine.prototype._rotate = function(angle) {
-      var canvasRatio, glltRatio, h, w, _ref, _ref1, _ref2;
+      var canvasRatio, glltRatio, h, ref, ref1, ref2, ref3, w;
       if (!canTransform()) {
         return;
       }
@@ -325,8 +343,14 @@
         this.angle = 360 + this.angle;
       }
       if (angle % 180 !== 0) {
+        w = this.widthReal;
+        h = this.heightReal;
+        if (this.angle % 180 !== 0) {
+          ref = [h, w], w = ref[0], h = ref[1];
+        }
+        this.data.minScale = +(Math.max.apply(this, [this.op.width / w, this.op.height / h])).toFixed(2);
         glltRatio = this.op.height / this.op.width;
-        _ref = [this.height * glltRatio, this.width / glltRatio], this.width = _ref[0], this.height = _ref[1];
+        ref1 = [this.height * glltRatio, this.width / glltRatio], this.width = ref1[0], this.height = ref1[1];
         if (this.width >= 1 && this.height >= 1) {
           this.canvas.style.width = this.width * 100 + '%';
           this.canvas.style.height = this.height * 100 + '%';
@@ -334,10 +358,10 @@
           this._fit();
         }
       }
-      _ref1 = [1, 1], w = _ref1[0], h = _ref1[1];
+      ref2 = [1, 1], w = ref2[0], h = ref2[1];
       if (this.angle % 180 !== 0) {
         canvasRatio = this.height / this.width * glltRatio;
-        _ref2 = [canvasRatio, 1 / canvasRatio], w = _ref2[0], h = _ref2[1];
+        ref3 = [canvasRatio, 1 / canvasRatio], w = ref3[0], h = ref3[1];
       }
       this.el.style.width = w * 100 + '%';
       this.el.style.height = h * 100 + '%';
@@ -374,6 +398,10 @@
       return this.enabled && (this._zoom(this.zoomOutFactor), this._trigger('zoomOut'));
     };
 
+    Guillotine.prototype.zoomCustom = function(f) {
+      return this.enabled && (this._zoomScale(f), this._trigger('zoomCustom'));
+    };
+
     Guillotine.prototype.getData = function() {
       return this.data;
     };
@@ -398,9 +426,9 @@
 
   })();
 
-  whitelist = ['rotateLeft', 'rotateRight', 'center', 'fit', 'zoomIn', 'zoomOut', 'instance', 'getData', 'enable', 'disable', 'remove'];
+  whitelist = ['rotateLeft', 'rotateRight', 'center', 'fit', 'zoomIn', 'zoomOut', 'zoomCustom', 'instance', 'getData', 'enable', 'disable', 'remove'];
 
-  $.fn[pluginName] = function(options) {
+  $.fn[pluginName] = function(options, param) {
     if (typeof options !== 'string') {
       return this.each(function() {
         var guillotine;
@@ -409,7 +437,7 @@
           return $.data(this, pluginName + 'Instance', guillotine);
         }
       });
-    } else if (__indexOf.call(whitelist, options) >= 0) {
+    } else if (indexOf.call(whitelist, options) >= 0) {
       if (options === 'instance') {
         return $.data(this[0], pluginName + 'Instance');
       }
@@ -420,7 +448,7 @@
         var guillotine;
         guillotine = $.data(this, pluginName + 'Instance');
         if (guillotine) {
-          return guillotine[options]();
+          return guillotine[options](param);
         }
       });
     }
diff --git a/js/jquery.guillotine.min.js b/js/jquery.guillotine.min.js
index ce2be67..31363b8 100644
--- a/js/jquery.guillotine.min.js
+++ b/js/jquery.guillotine.min.js
@@ -9,4 +9,4 @@
  *
  */
 
-(function(){"use strict";var t,i,e,h,s,n,o,r,a,l,d,u,g,p=function(t,i){return function(){return t.apply(i,arguments)}},c=[].indexOf||function(t){for(var i=0,e=this.length;e>i;i++)if(i in this&&this[i]===t)return i;return-1};t=jQuery,a="guillotine",l="guillotine",s={start:"touchstart."+l+" mousedown."+l,move:"touchmove."+l+" mousemove."+l,stop:"touchend."+l+" mouseup."+l},h={width:400,height:300,zoomStep:.1,init:null,eventOnChange:null,onChange:null},d=/touch/i,r=function(t){return d.test(t.type)},u=function(t){return r(t)?1===t.originalEvent.changedTouches.length:1===t.which},n=function(t){return r(t)&&(t=t.originalEvent.touches[0]),{x:t.pageX,y:t.pageY}},e=function(){var t,i,h,s,n,o,r,a,l,d;for(t=!1,s=["webkit","Moz","O","ms","Khtml"],r={transform:"transform"},l=0,d=s.length;d>l;l++)h=s[l],r[h+"Transform"]="-"+h.toLowerCase()+"-transform";i=document.createElement("img"),document.body.insertBefore(i,null);for(o in r)if(n=r[o],void 0!==i.style[o]&&(i.style[o]="rotate(90deg)",a=window.getComputedStyle(i).getPropertyValue(n),null!=a&&a.length&&"none"!==a)){t=!0;break}return document.body.removeChild(i),(e=t?function(){return!0}:function(){return!1})()},o=function(i){return t(i).css({"-webkit-perspective":1e3,perspective:1e3,"-webkit-backface-visibility":"hidden","backface-visibility":"hidden"})},i=function(){function i(i,e){this._drag=p(this._drag,this),this._unbind=p(this._unbind,this),this._start=p(this._start,this),this.op=t.extend(!0,{},h,e,t(i).data(a)),this.enabled=!0,this.zoomInFactor=1+this.op.zoomStep,this.zoomOutFactor=1/this.zoomInFactor,this.glltRatio=this.op.height/this.op.width,this.width=this.height=this.left=this.top=this.angle=0,this.data={scale:1,angle:0,x:0,y:0,w:this.op.width,h:this.op.height},this._wrap(i),null!=this.op.init&&this._init(),(this.width<1||this.height<1)&&this._fit()&&this._center(),o(this.$el),this.$el.on(s.start,this._start)}return i.prototype._wrap=function(i){var e,h,s,n,o,r;return h=t(i),"IMG"===i.tagName?i.naturalWidth?(r=i.naturalWidth,n=i.naturalHeight):(h.addClass("guillotine-sample"),r=h.width(),n=h.height(),h.removeClass("guillotine-sample")):(r=h.width(),n=h.height()),this.width=r/this.op.width,this.height=n/this.op.height,e=t("<div>").addClass("guillotine-canvas"),e.css({width:100*this.width+"%",height:100*this.height+"%",top:0,left:0}),e=h.wrap(e).parent(),o=this.op.height/this.op.width*100+"%",s=t("<div>").addClass("guillotine-window"),s.css({width:"100%",height:"auto","padding-top":o}),s=e.wrap(s).parent(),this.$el=h,this.el=h[0],this.$canvas=e,this.canvas=e[0],this.$gllt=s,this.gllt=s[0],this.$document=t(i.ownerDocument),this.$body=t("body",this.$document)},i.prototype._unwrap=function(){return this.$el.removeAttr("style"),this.$el.insertBefore(this.gllt),this.$gllt.remove()},i.prototype._init=function(){var t,i,e;return i=this.op.init,(e=parseFloat(i.scale))&&this._zoom(e),(t=parseInt(i.angle))&&this._rotate(t),this._offset(parseInt(i.x)/this.op.width||0,parseInt(i.y)/this.op.height||0)},i.prototype._start=function(t){return this.enabled&&u(t)?(t.preventDefault(),t.stopImmediatePropagation(),this.p=n(t),this._bind()):void 0},i.prototype._bind=function(){return this.$body.addClass("guillotine-dragging"),this.$document.on(s.move,this._drag),this.$document.on(s.stop,this._unbind)},i.prototype._unbind=function(t){return this.$body.removeClass("guillotine-dragging"),this.$document.off(s.move,this._drag),this.$document.off(s.stop,this._unbind),null!=t?this._trigger("drag"):void 0},i.prototype._trigger=function(t){return null!=this.op.eventOnChange&&this.$el.trigger(this.op.eventOnChange,[this.data,t]),"function"==typeof this.op.onChange?this.op.onChange.call(this.el,this.data,t):void 0},i.prototype._drag=function(t){var i,e,h,s,o;return t.preventDefault(),t.stopImmediatePropagation(),s=n(t),i=s.x-this.p.x,e=s.y-this.p.y,this.p=s,h=0===i?null:this.left-i/this.gllt.clientWidth,o=0===e?null:this.top-e/this.gllt.clientHeight,this._offset(h,o)},i.prototype._offset=function(t,i){return(t||0===t)&&(0>t&&(t=0),t>this.width-1&&(t=this.width-1),this.canvas.style.left=(100*-t).toFixed(2)+"%",this.left=t,this.data.x=Math.round(t*this.op.width)),i||0===i?(0>i&&(i=0),i>this.height-1&&(i=this.height-1),this.canvas.style.top=(100*-i).toFixed(2)+"%",this.top=i,this.data.y=Math.round(i*this.op.height)):void 0},i.prototype._zoom=function(t){var i,e,h,s;if(!(0>=t||1===t))return s=this.width,i=this.height,s*t>1&&i*t>1?(this.width*=t,this.height*=t,this.canvas.style.width=(100*this.width).toFixed(2)+"%",this.canvas.style.height=(100*this.height).toFixed(2)+"%",this.data.scale*=t):(this._fit(),t=this.width/s),e=(this.left+.5)*t-.5,h=(this.top+.5)*t-.5,this._offset(e,h)},i.prototype._fit=function(){var t,i;return t=this.width,i=this.height/this.width,i>1?(this.width=1,this.height=i):(this.width=1/i,this.height=1),this.canvas.style.width=(100*this.width).toFixed(2)+"%",this.canvas.style.height=(100*this.height).toFixed(2)+"%",this.data.scale*=this.width/t},i.prototype._center=function(){return this._offset((this.width-1)/2,(this.height-1)/2)},i.prototype._rotate=function(t){var i,h,s,n,o,r,a;if(e()&&0!==t&&t%90===0)return this.angle=(this.angle+t)%360,this.angle<0&&(this.angle=360+this.angle),t%180!==0&&(h=this.op.height/this.op.width,o=[this.height*h,this.width/h],this.width=o[0],this.height=o[1],this.width>=1&&this.height>=1?(this.canvas.style.width=100*this.width+"%",this.canvas.style.height=100*this.height+"%"):this._fit()),r=[1,1],n=r[0],s=r[1],this.angle%180!==0&&(i=this.height/this.width*h,a=[i,1/i],n=a[0],s=a[1]),this.el.style.width=100*n+"%",this.el.style.height=100*s+"%",this.el.style.left=(1-n)/2*100+"%",this.el.style.top=(1-s)/2*100+"%",this.$el.css({transform:"rotate("+this.angle+"deg)"}),this._center(),this.data.angle=this.angle},i.prototype.rotateLeft=function(){return this.enabled&&(this._rotate(-90),this._trigger("rotateLeft"))},i.prototype.rotateRight=function(){return this.enabled&&(this._rotate(90),this._trigger("rotateRight"))},i.prototype.center=function(){return this.enabled&&(this._center(),this._trigger("center"))},i.prototype.fit=function(){return this.enabled&&(this._fit(),this._center(),this._trigger("fit"))},i.prototype.zoomIn=function(){return this.enabled&&(this._zoom(this.zoomInFactor),this._trigger("zoomIn"))},i.prototype.zoomOut=function(){return this.enabled&&(this._zoom(this.zoomOutFactor),this._trigger("zoomOut"))},i.prototype.getData=function(){return this.data},i.prototype.enable=function(){return this.enabled=!0},i.prototype.disable=function(){return this.enabled=!1},i.prototype.remove=function(){return this._unbind(),this._unwrap(),this.disable(),this.$el.off(s.start,this._start),this.$el.removeData(a+"Instance")},i}(),g=["rotateLeft","rotateRight","center","fit","zoomIn","zoomOut","instance","getData","enable","disable","remove"],t.fn[a]=function(e){return"string"!=typeof e?this.each(function(){var h;return t.data(this,a+"Instance")?void 0:(h=new i(this,e),t.data(this,a+"Instance",h))}):c.call(g,e)>=0?"instance"===e?t.data(this[0],a+"Instance"):"getData"===e?t.data(this[0],a+"Instance")[e]():this.each(function(){var i;return i=t.data(this,a+"Instance"),i?i[e]():void 0}):void 0}}).call(this);
+(function(){"use strict";var t,i,e,h,s,o,n,a,r,l,d,u,p,g=function(t,i){return function(){return t.apply(i,arguments)}},c=[].indexOf||function(t){for(var i=0,e=this.length;e>i;i++)if(i in this&&this[i]===t)return i;return-1};t=jQuery,r="guillotine",l="guillotine",s={start:"touchstart."+l+" mousedown."+l,move:"touchmove."+l+" mousemove."+l,stop:"touchend."+l+" mouseup."+l},h={width:400,height:300,zoomStep:.1,init:null,eventOnChange:null,onChange:null},d=/touch/i,a=function(t){return d.test(t.type)},u=function(t){return a(t)?1===t.originalEvent.changedTouches.length:1===t.which},o=function(t){return a(t)&&(t=t.originalEvent.touches[0]),{x:t.pageX,y:t.pageY}},e=function(){var t,i,h,s,o,n,a,r,l,d;for(t=!1,n=["webkit","Moz","O","ms","Khtml"],l={transform:"transform"},h=0,s=n.length;s>h;h++)o=n[h],l[o+"Transform"]="-"+o.toLowerCase()+"-transform";i=document.createElement("img"),document.body.insertBefore(i,null);for(r in l)if(a=l[r],void 0!==i.style[r]&&(i.style[r]="rotate(90deg)",d=window.getComputedStyle(i).getPropertyValue(a),null!=d&&d.length&&"none"!==d)){t=!0;break}return document.body.removeChild(i),(e=t?function(){return!0}:function(){return!1})()},n=function(i){return t(i).css({"-webkit-perspective":1e3,perspective:1e3,"-webkit-backface-visibility":"hidden","backface-visibility":"hidden"})},i=function(){function i(i,e){this._drag=g(this._drag,this),this._unbind=g(this._unbind,this),this._start=g(this._start,this),this.op=t.extend(!0,{},h,e,t(i).data(r)),this.enabled=!0,this.zoomInFactor=1+this.op.zoomStep,this.zoomOutFactor=1/this.zoomInFactor,this.glltRatio=this.op.height/this.op.width,this.width=this.height=this.left=this.top=this.angle=0,this.data={scale:1,angle:0,x:0,y:0,w:this.op.width,h:this.op.height,minScale:1,zoomStep:+this.op.zoomStep.toFixed(2),maxScale:+this.op.maxScale.toFixed(2)},this._wrap(i),null!=this.op.init&&this._init(),(this.width<1||this.height<1)&&this._fit()&&this._center(),n(this.$el),this.$el.on(s.start,this._start)}return i.prototype._wrap=function(i){var e,h,s,o,n,a;return h=t(i),"IMG"===i.tagName?i.naturalWidth?(a=i.naturalWidth,o=i.naturalHeight):(h.addClass("guillotine-sample"),a=h.width(),o=h.height(),h.removeClass("guillotine-sample")):(a=h.width(),o=h.height()),this.width=a/this.op.width,this.height=o/this.op.height,e=t("<div>").addClass("guillotine-canvas"),e.css({width:100*this.width+"%",height:100*this.height+"%",top:0,left:0}),e=h.wrap(e).parent(),this.widthReal=a,this.heightReal=o,this.widthOrig=this.width,this.heightOrig=this.height,this.data.minScale=+Math.max.apply(this,[this.op.width/this.widthReal,this.op.height/this.heightReal]).toFixed(2),n=this.op.height/this.op.width*100+"%",s=t("<div>").addClass("guillotine-window"),s.css({width:"100%",height:"auto","padding-top":n}),s=e.wrap(s).parent(),this.$el=h,this.el=h[0],this.$canvas=e,this.canvas=e[0],this.$gllt=s,this.gllt=s[0],this.$document=t(i.ownerDocument),this.$body=t("body",this.$document)},i.prototype._unwrap=function(){return this.$el.removeAttr("style"),this.$el.insertBefore(this.gllt),this.$gllt.remove()},i.prototype._init=function(){var t,i,e;return i=this.op.init,(e=parseFloat(i.scale))&&this._zoom(e),(t=parseInt(i.angle))&&this._rotate(t),this._offset(parseInt(i.x)/this.op.width||0,parseInt(i.y)/this.op.height||0)},i.prototype._start=function(t){return this.enabled&&u(t)?(t.preventDefault(),t.stopImmediatePropagation(),this.p=o(t),this._bind()):void 0},i.prototype._bind=function(){return this.$body.addClass("guillotine-dragging"),this.$document.on(s.move,this._drag),this.$document.on(s.stop,this._unbind)},i.prototype._unbind=function(t){return this.$body.removeClass("guillotine-dragging"),this.$document.off(s.move,this._drag),this.$document.off(s.stop,this._unbind),null!=t?this._trigger("drag"):void 0},i.prototype._trigger=function(t){return null!=this.op.eventOnChange&&this.$el.trigger(this.op.eventOnChange,[this.data,t]),"function"==typeof this.op.onChange?this.op.onChange.call(this.el,this.data,t):void 0},i.prototype._drag=function(t){var i,e,h,s,n;return t.preventDefault(),t.stopImmediatePropagation(),s=o(t),i=s.x-this.p.x,e=s.y-this.p.y,this.p=s,h=0===i?null:this.left-i/this.gllt.clientWidth,n=0===e?null:this.top-e/this.gllt.clientHeight,this._offset(h,n)},i.prototype._offset=function(t,i){return(t||0===t)&&(0>t&&(t=0),t>this.width-1&&(t=this.width-1),this.canvas.style.left=(100*-t).toFixed(2)+"%",this.left=t,this.data.x=Math.round(t*this.op.width)),i||0===i?(0>i&&(i=0),i>this.height-1&&(i=this.height-1),this.canvas.style.top=(100*-i).toFixed(2)+"%",this.top=i,this.data.y=Math.round(i*this.op.height)):void 0},i.prototype._zoom=function(t){var i,e,h,s;if(t>0&&1!==t&&(s=this.width,i=this.height,!this.op.maxScale||this.data.scale*t<=this.op.maxScale))return s*t>1&&i*t>1?(this.width*=t,this.height*=t,this.canvas.style.width=(100*this.width).toFixed(2)+"%",this.canvas.style.height=(100*this.height).toFixed(2)+"%",this.data.scale*=t):(this._fit(),t=this.width/s),e=(this.left+.5)*t-.5,h=(this.top+.5)*t-.5,this._offset(e,h)},i.prototype._zoomScale=function(t){var i;return t=parseFloat(t),i=t/this.data.scale,this._zoom(i)},i.prototype._fit=function(){var t,i;return t=this.width,i=this.height/this.width,i>1?(this.width=1,this.height=i):(this.width=1/i,this.height=1),this.canvas.style.width=(100*this.width).toFixed(2)+"%",this.canvas.style.height=(100*this.height).toFixed(2)+"%",this.data.scale*=this.width/t},i.prototype._center=function(){return this._offset((this.width-1)/2,(this.height-1)/2)},i.prototype._rotate=function(t){var i,h,s,o,n,a,r,l;if(e()&&0!==t&&t%90===0)return this.angle=(this.angle+t)%360,this.angle<0&&(this.angle=360+this.angle),t%180!==0&&(l=this.widthReal,s=this.heightReal,this.angle%180!==0&&(o=[s,l],l=o[0],s=o[1]),this.data.minScale=+Math.max.apply(this,[this.op.width/l,this.op.height/s]).toFixed(2),h=this.op.height/this.op.width,n=[this.height*h,this.width/h],this.width=n[0],this.height=n[1],this.width<1||this.height<1?this._fit():(this.canvas.style.width=100*this.width+"%",this.canvas.style.height=100*this.height+"%")),a=[1,1],l=a[0],s=a[1],this.angle%180!==0&&(i=this.height/this.width*h,r=[i,1/i],l=r[0],s=r[1]),this.el.style.width=100*l+"%",this.el.style.height=100*s+"%",this.el.style.left=(1-l)/2*100+"%",this.el.style.top=(1-s)/2*100+"%",this.$el.css({transform:"rotate("+this.angle+"deg)"}),this._center(),this.data.angle=this.angle},i.prototype.rotateLeft=function(){return this.enabled&&(this._rotate(-90),this._trigger("rotateLeft"))},i.prototype.rotateRight=function(){return this.enabled&&(this._rotate(90),this._trigger("rotateRight"))},i.prototype.center=function(){return this.enabled&&(this._center(),this._trigger("center"))},i.prototype.fit=function(){return this.enabled&&(this._fit(),this._center(),this._trigger("fit"))},i.prototype.zoomIn=function(){return this.enabled&&(this._zoom(this.zoomInFactor),this._trigger("zoomIn"))},i.prototype.zoomOut=function(){return this.enabled&&(this._zoom(this.zoomOutFactor),this._trigger("zoomOut"))},i.prototype.zoomCustom=function(t){return this.enabled&&(this._zoomScale(t),this._trigger("zoomCustom"))},i.prototype.getData=function(){return this.data},i.prototype.enable=function(){return this.enabled=!0},i.prototype.disable=function(){return this.enabled=!1},i.prototype.remove=function(){return this._unbind(),this._unwrap(),this.disable(),this.$el.off(s.start,this._start),this.$el.removeData(r+"Instance")},i}(),p=["rotateLeft","rotateRight","center","fit","zoomIn","zoomOut","zoomCustom","instance","getData","enable","disable","remove"],t.fn[r]=function(e,h){return"string"!=typeof e?this.each(function(){var h;return t.data(this,r+"Instance")?void 0:(h=new i(this,e),t.data(this,r+"Instance",h))}):c.call(p,e)<0?void 0:"instance"===e?t.data(this[0],r+"Instance"):"getData"===e?t.data(this[0],r+"Instance")[e]():this.each(function(){var i;return i=t.data(this,r+"Instance"),i?i[e](h):void 0})}}).call(this);
diff --git a/src/jquery.guillotine.coffee b/src/jquery.guillotine.coffee
index 7551483..942a32f 100644
--- a/src/jquery.guillotine.coffee
+++ b/src/jquery.guillotine.coffee
@@ -130,7 +130,7 @@ class Guillotine
     @width = @height = @left = @top = @angle = 0
 
     # Transformation instructions
-    @data = { scale: 1, angle: 0, x: 0, y: 0, w: @op.width, h: @op.height }
+    @data = { scale: 1, angle: 0, x: 0, y: 0, w: @op.width, h: @op.height, minScale: 1, zoomStep: +@op.zoomStep.toFixed(2), maxScale: +@op.maxScale.toFixed(2)}
 
     # Markup
     @_wrap(element)
@@ -169,6 +169,13 @@ class Guillotine
     canvas = $('<div>').addClass('guillotine-canvas')
     canvas.css width: @width*100+'%', height: @height*100+'%', top: 0, left: 0
     canvas = el.wrap(canvas).parent()
+    
+    # Store additional data for zooming
+    @widthReal = width
+    @heightReal = height
+    @widthOrig = @width     #0-1
+    @heightOrig = @height   #0-1
+    @data.minScale = +(Math.max.apply @, [@op.width/@widthReal, @op.height/@heightReal]).toFixed(2)
 
     # Guillotine (window)
     ## Responsive with fixed aspect ratio.
@@ -276,6 +283,7 @@ class Guillotine
     return if factor <= 0 or factor == 1
     w = @width; h = @height
 
+    return if @op.maxScale and @data.scale * factor > @op.maxScale
     # Zoom
     if w * factor > 1 and h * factor > 1
       @width  *= factor
@@ -302,6 +310,12 @@ class Guillotine
     top  = (@top + 0.5) * factor - 0.5
     @_offset left, top
 
+    
+  _zoomScale: (scale) ->
+    scale = parseFloat(scale);
+    factor = scale / @data.scale;
+    @_zoom factor
+
 
   # Adjust the element (canvas) to the edges of the window keeping aspect ratio.
   _fit: ->
@@ -329,9 +343,15 @@ class Guillotine
     # Smallest positive equivalent angle (total rotation)
     @angle = (@angle + angle) % 360
     @angle = 360 + @angle if @angle < 0
-
+    
     # Different dimensions?
     if (angle % 180 isnt 0)
+      # Calc new min scale
+      w = @widthReal ; h = @heightReal
+      if @angle % 180 isnt 0 
+        [w,h] = [h,w]
+      @data.minScale = +(Math.max.apply @, [@op.width/w, @op.height/h]).toFixed(2)
+
       # Switch canvas dimensions (as percentages)
       #
       # canvasWidth = @width * glltWidth; canvasHeight = @height * glltHeigth
@@ -375,6 +395,7 @@ class Guillotine
   fit:         -> @enabled and (@_fit(); @_center();    @_trigger('fit'))
   zoomIn:      -> @enabled and (@_zoom(@zoomInFactor);  @_trigger('zoomIn'))
   zoomOut:     -> @enabled and (@_zoom(@zoomOutFactor); @_trigger('zoomOut'))
+  zoomCustom:(f) -> @enabled and (@_zoomScale(f); @_trigger('zoomCustom'))
 
   # Utilities
   getData: -> @data
@@ -392,10 +413,10 @@ class Guillotine
 #           The Plugin
 # ______________________________
 #
-whitelist = ['rotateLeft', 'rotateRight', 'center', 'fit', 'zoomIn', 'zoomOut', \
+whitelist = ['rotateLeft', 'rotateRight', 'center', 'fit', 'zoomIn', 'zoomOut', 'zoomCustom', \
              'instance', 'getData', 'enable', 'disable', 'remove']
 
-$.fn[pluginName] = (options) ->
+$.fn[pluginName] = (options, param) ->
   # Plug it! Lightweight plugin wrapper around the constructor.
   if typeof options isnt 'string'
     @each ->
@@ -412,4 +433,4 @@ $.fn[pluginName] = (options) ->
     return $.data(@[0], pluginName+'Instance')[options]() if options is 'getData'
     @each ->
       guillotine = $.data(@, pluginName + 'Instance')
-      guillotine[options]() if guillotine
+      guillotine[options](param) if guillotine

From 1b91624658762aa22ff6f763c10507f4ca06d513 Mon Sep 17 00:00:00 2001
From: Dmitriy NB <support@1000.menu>
Date: Wed, 14 Jun 2017 19:27:47 +0200
Subject: [PATCH 2/2] Forced pass element width and height

---
 js/jquery.guillotine.js      |  7 +++++--
 js/jquery.guillotine.min.js  | 13 +------------
 src/jquery.guillotine.coffee |  6 +++++-
 3 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/js/jquery.guillotine.js b/js/jquery.guillotine.js
index ad93aa3..0311286 100644
--- a/js/jquery.guillotine.js
+++ b/js/jquery.guillotine.js
@@ -1,4 +1,4 @@
-// Generated by CoffeeScript 1.11.0
+// Generated by CoffeeScript 1.12.6
 
 /*
  * jQuery Guillotine Plugin v1.3.1
@@ -142,7 +142,10 @@
       var canvas, el, guillotine, height, paddingTop, width;
       el = $(element);
       if (element.tagName === 'IMG') {
-        if (element.naturalWidth) {
+        if (element.width && element.height) {
+          width = element.width;
+          height = element.height;
+        } else if (element.naturalWidth) {
           width = element.naturalWidth;
           height = element.naturalHeight;
         } else {
diff --git a/js/jquery.guillotine.min.js b/js/jquery.guillotine.min.js
index 31363b8..7a21a79 100644
--- a/js/jquery.guillotine.min.js
+++ b/js/jquery.guillotine.min.js
@@ -1,12 +1 @@
-/*
- * jQuery Guillotine Plugin v1.3.1
- * http://matiasgagliano.github.com/guillotine/
- *
- * Copyright 2014, Matías Gagliano.
- * Dual licensed under the MIT or GPLv3 licenses.
- * http://opensource.org/licenses/MIT
- * http://opensource.org/licenses/GPL-3.0
- *
- */
-
-(function(){"use strict";var t,i,e,h,s,o,n,a,r,l,d,u,p,g=function(t,i){return function(){return t.apply(i,arguments)}},c=[].indexOf||function(t){for(var i=0,e=this.length;e>i;i++)if(i in this&&this[i]===t)return i;return-1};t=jQuery,r="guillotine",l="guillotine",s={start:"touchstart."+l+" mousedown."+l,move:"touchmove."+l+" mousemove."+l,stop:"touchend."+l+" mouseup."+l},h={width:400,height:300,zoomStep:.1,init:null,eventOnChange:null,onChange:null},d=/touch/i,a=function(t){return d.test(t.type)},u=function(t){return a(t)?1===t.originalEvent.changedTouches.length:1===t.which},o=function(t){return a(t)&&(t=t.originalEvent.touches[0]),{x:t.pageX,y:t.pageY}},e=function(){var t,i,h,s,o,n,a,r,l,d;for(t=!1,n=["webkit","Moz","O","ms","Khtml"],l={transform:"transform"},h=0,s=n.length;s>h;h++)o=n[h],l[o+"Transform"]="-"+o.toLowerCase()+"-transform";i=document.createElement("img"),document.body.insertBefore(i,null);for(r in l)if(a=l[r],void 0!==i.style[r]&&(i.style[r]="rotate(90deg)",d=window.getComputedStyle(i).getPropertyValue(a),null!=d&&d.length&&"none"!==d)){t=!0;break}return document.body.removeChild(i),(e=t?function(){return!0}:function(){return!1})()},n=function(i){return t(i).css({"-webkit-perspective":1e3,perspective:1e3,"-webkit-backface-visibility":"hidden","backface-visibility":"hidden"})},i=function(){function i(i,e){this._drag=g(this._drag,this),this._unbind=g(this._unbind,this),this._start=g(this._start,this),this.op=t.extend(!0,{},h,e,t(i).data(r)),this.enabled=!0,this.zoomInFactor=1+this.op.zoomStep,this.zoomOutFactor=1/this.zoomInFactor,this.glltRatio=this.op.height/this.op.width,this.width=this.height=this.left=this.top=this.angle=0,this.data={scale:1,angle:0,x:0,y:0,w:this.op.width,h:this.op.height,minScale:1,zoomStep:+this.op.zoomStep.toFixed(2),maxScale:+this.op.maxScale.toFixed(2)},this._wrap(i),null!=this.op.init&&this._init(),(this.width<1||this.height<1)&&this._fit()&&this._center(),n(this.$el),this.$el.on(s.start,this._start)}return i.prototype._wrap=function(i){var e,h,s,o,n,a;return h=t(i),"IMG"===i.tagName?i.naturalWidth?(a=i.naturalWidth,o=i.naturalHeight):(h.addClass("guillotine-sample"),a=h.width(),o=h.height(),h.removeClass("guillotine-sample")):(a=h.width(),o=h.height()),this.width=a/this.op.width,this.height=o/this.op.height,e=t("<div>").addClass("guillotine-canvas"),e.css({width:100*this.width+"%",height:100*this.height+"%",top:0,left:0}),e=h.wrap(e).parent(),this.widthReal=a,this.heightReal=o,this.widthOrig=this.width,this.heightOrig=this.height,this.data.minScale=+Math.max.apply(this,[this.op.width/this.widthReal,this.op.height/this.heightReal]).toFixed(2),n=this.op.height/this.op.width*100+"%",s=t("<div>").addClass("guillotine-window"),s.css({width:"100%",height:"auto","padding-top":n}),s=e.wrap(s).parent(),this.$el=h,this.el=h[0],this.$canvas=e,this.canvas=e[0],this.$gllt=s,this.gllt=s[0],this.$document=t(i.ownerDocument),this.$body=t("body",this.$document)},i.prototype._unwrap=function(){return this.$el.removeAttr("style"),this.$el.insertBefore(this.gllt),this.$gllt.remove()},i.prototype._init=function(){var t,i,e;return i=this.op.init,(e=parseFloat(i.scale))&&this._zoom(e),(t=parseInt(i.angle))&&this._rotate(t),this._offset(parseInt(i.x)/this.op.width||0,parseInt(i.y)/this.op.height||0)},i.prototype._start=function(t){return this.enabled&&u(t)?(t.preventDefault(),t.stopImmediatePropagation(),this.p=o(t),this._bind()):void 0},i.prototype._bind=function(){return this.$body.addClass("guillotine-dragging"),this.$document.on(s.move,this._drag),this.$document.on(s.stop,this._unbind)},i.prototype._unbind=function(t){return this.$body.removeClass("guillotine-dragging"),this.$document.off(s.move,this._drag),this.$document.off(s.stop,this._unbind),null!=t?this._trigger("drag"):void 0},i.prototype._trigger=function(t){return null!=this.op.eventOnChange&&this.$el.trigger(this.op.eventOnChange,[this.data,t]),"function"==typeof this.op.onChange?this.op.onChange.call(this.el,this.data,t):void 0},i.prototype._drag=function(t){var i,e,h,s,n;return t.preventDefault(),t.stopImmediatePropagation(),s=o(t),i=s.x-this.p.x,e=s.y-this.p.y,this.p=s,h=0===i?null:this.left-i/this.gllt.clientWidth,n=0===e?null:this.top-e/this.gllt.clientHeight,this._offset(h,n)},i.prototype._offset=function(t,i){return(t||0===t)&&(0>t&&(t=0),t>this.width-1&&(t=this.width-1),this.canvas.style.left=(100*-t).toFixed(2)+"%",this.left=t,this.data.x=Math.round(t*this.op.width)),i||0===i?(0>i&&(i=0),i>this.height-1&&(i=this.height-1),this.canvas.style.top=(100*-i).toFixed(2)+"%",this.top=i,this.data.y=Math.round(i*this.op.height)):void 0},i.prototype._zoom=function(t){var i,e,h,s;if(t>0&&1!==t&&(s=this.width,i=this.height,!this.op.maxScale||this.data.scale*t<=this.op.maxScale))return s*t>1&&i*t>1?(this.width*=t,this.height*=t,this.canvas.style.width=(100*this.width).toFixed(2)+"%",this.canvas.style.height=(100*this.height).toFixed(2)+"%",this.data.scale*=t):(this._fit(),t=this.width/s),e=(this.left+.5)*t-.5,h=(this.top+.5)*t-.5,this._offset(e,h)},i.prototype._zoomScale=function(t){var i;return t=parseFloat(t),i=t/this.data.scale,this._zoom(i)},i.prototype._fit=function(){var t,i;return t=this.width,i=this.height/this.width,i>1?(this.width=1,this.height=i):(this.width=1/i,this.height=1),this.canvas.style.width=(100*this.width).toFixed(2)+"%",this.canvas.style.height=(100*this.height).toFixed(2)+"%",this.data.scale*=this.width/t},i.prototype._center=function(){return this._offset((this.width-1)/2,(this.height-1)/2)},i.prototype._rotate=function(t){var i,h,s,o,n,a,r,l;if(e()&&0!==t&&t%90===0)return this.angle=(this.angle+t)%360,this.angle<0&&(this.angle=360+this.angle),t%180!==0&&(l=this.widthReal,s=this.heightReal,this.angle%180!==0&&(o=[s,l],l=o[0],s=o[1]),this.data.minScale=+Math.max.apply(this,[this.op.width/l,this.op.height/s]).toFixed(2),h=this.op.height/this.op.width,n=[this.height*h,this.width/h],this.width=n[0],this.height=n[1],this.width<1||this.height<1?this._fit():(this.canvas.style.width=100*this.width+"%",this.canvas.style.height=100*this.height+"%")),a=[1,1],l=a[0],s=a[1],this.angle%180!==0&&(i=this.height/this.width*h,r=[i,1/i],l=r[0],s=r[1]),this.el.style.width=100*l+"%",this.el.style.height=100*s+"%",this.el.style.left=(1-l)/2*100+"%",this.el.style.top=(1-s)/2*100+"%",this.$el.css({transform:"rotate("+this.angle+"deg)"}),this._center(),this.data.angle=this.angle},i.prototype.rotateLeft=function(){return this.enabled&&(this._rotate(-90),this._trigger("rotateLeft"))},i.prototype.rotateRight=function(){return this.enabled&&(this._rotate(90),this._trigger("rotateRight"))},i.prototype.center=function(){return this.enabled&&(this._center(),this._trigger("center"))},i.prototype.fit=function(){return this.enabled&&(this._fit(),this._center(),this._trigger("fit"))},i.prototype.zoomIn=function(){return this.enabled&&(this._zoom(this.zoomInFactor),this._trigger("zoomIn"))},i.prototype.zoomOut=function(){return this.enabled&&(this._zoom(this.zoomOutFactor),this._trigger("zoomOut"))},i.prototype.zoomCustom=function(t){return this.enabled&&(this._zoomScale(t),this._trigger("zoomCustom"))},i.prototype.getData=function(){return this.data},i.prototype.enable=function(){return this.enabled=!0},i.prototype.disable=function(){return this.enabled=!1},i.prototype.remove=function(){return this._unbind(),this._unwrap(),this.disable(),this.$el.off(s.start,this._start),this.$el.removeData(r+"Instance")},i}(),p=["rotateLeft","rotateRight","center","fit","zoomIn","zoomOut","zoomCustom","instance","getData","enable","disable","remove"],t.fn[r]=function(e,h){return"string"!=typeof e?this.each(function(){var h;return t.data(this,r+"Instance")?void 0:(h=new i(this,e),t.data(this,r+"Instance",h))}):c.call(p,e)<0?void 0:"instance"===e?t.data(this[0],r+"Instance"):"getData"===e?t.data(this[0],r+"Instance")[e]():this.each(function(){var i;return i=t.data(this,r+"Instance"),i?i[e](h):void 0})}}).call(this);
+(function(){"use strict";var t,i,e,h,s,n,o,a,r,l,d,u,g,p=function(t,i){return function(){return t.apply(i,arguments)}},c=[].indexOf||function(t){for(var i=0,e=this.length;i<e;i++)if(i in this&&this[i]===t)return i;return-1};t=jQuery,r="guillotine",s={start:"touchstart."+(l="guillotine")+" mousedown."+l,move:"touchmove."+l+" mousemove."+l,stop:"touchend."+l+" mouseup."+l},h={width:400,height:300,zoomStep:.1,init:null,eventOnChange:null,onChange:null},d=/touch/i,a=function(t){return d.test(t.type)},u=function(t){return a(t)?1===t.originalEvent.changedTouches.length:1===t.which},n=function(t){return a(t)&&(t=t.originalEvent.touches[0]),{x:t.pageX,y:t.pageY}},e=function(){var t,i,h,s,n,o,a,r,l,d;for(t=!1,l={transform:"transform"},h=0,s=(o=["webkit","Moz","O","ms","Khtml"]).length;h<s;h++)l[(n=o[h])+"Transform"]="-"+n.toLowerCase()+"-transform";i=document.createElement("img"),document.body.insertBefore(i,null);for(r in l)if(a=l[r],void 0!==i.style[r]&&(i.style[r]="rotate(90deg)",null!=(d=window.getComputedStyle(i).getPropertyValue(a))&&d.length&&"none"!==d)){t=!0;break}return document.body.removeChild(i),(e=t?function(){return!0}:function(){return!1})()},o=function(i){return t(i).css({"-webkit-perspective":1e3,perspective:1e3,"-webkit-backface-visibility":"hidden","backface-visibility":"hidden"})},i=function(){function i(i,e){this._drag=p(this._drag,this),this._unbind=p(this._unbind,this),this._start=p(this._start,this),this.op=t.extend(!0,{},h,e,t(i).data(r)),this.enabled=!0,this.zoomInFactor=1+this.op.zoomStep,this.zoomOutFactor=1/this.zoomInFactor,this.glltRatio=this.op.height/this.op.width,this.width=this.height=this.left=this.top=this.angle=0,this.data={scale:1,angle:0,x:0,y:0,w:this.op.width,h:this.op.height,minScale:1,zoomStep:+this.op.zoomStep.toFixed(2),maxScale:+this.op.maxScale.toFixed(2)},this._wrap(i),null!=this.op.init&&this._init(),(this.width<1||this.height<1)&&this._fit()&&this._center(),o(this.$el),this.$el.on(s.start,this._start)}return i.prototype._wrap=function(i){var e,h,s,n,o,a;return h=t(i),"IMG"===i.tagName?i.width&&i.height?(a=i.width,n=i.height):i.naturalWidth?(a=i.naturalWidth,n=i.naturalHeight):(h.addClass("guillotine-sample"),a=h.width(),n=h.height(),h.removeClass("guillotine-sample")):(a=h.width(),n=h.height()),this.width=a/this.op.width,this.height=n/this.op.height,(e=t("<div>").addClass("guillotine-canvas")).css({width:100*this.width+"%",height:100*this.height+"%",top:0,left:0}),e=h.wrap(e).parent(),this.widthReal=a,this.heightReal=n,this.widthOrig=this.width,this.heightOrig=this.height,this.data.minScale=+Math.max.apply(this,[this.op.width/this.widthReal,this.op.height/this.heightReal]).toFixed(2),o=this.op.height/this.op.width*100+"%",(s=t("<div>").addClass("guillotine-window")).css({width:"100%",height:"auto","padding-top":o}),s=e.wrap(s).parent(),this.$el=h,this.el=h[0],this.$canvas=e,this.canvas=e[0],this.$gllt=s,this.gllt=s[0],this.$document=t(i.ownerDocument),this.$body=t("body",this.$document)},i.prototype._unwrap=function(){return this.$el.removeAttr("style"),this.$el.insertBefore(this.gllt),this.$gllt.remove()},i.prototype._init=function(){var t,i,e;return i=this.op.init,(e=parseFloat(i.scale))&&this._zoom(e),(t=parseInt(i.angle))&&this._rotate(t),this._offset(parseInt(i.x)/this.op.width||0,parseInt(i.y)/this.op.height||0)},i.prototype._start=function(t){if(this.enabled&&u(t))return t.preventDefault(),t.stopImmediatePropagation(),this.p=n(t),this._bind()},i.prototype._bind=function(){return this.$body.addClass("guillotine-dragging"),this.$document.on(s.move,this._drag),this.$document.on(s.stop,this._unbind)},i.prototype._unbind=function(t){if(this.$body.removeClass("guillotine-dragging"),this.$document.off(s.move,this._drag),this.$document.off(s.stop,this._unbind),null!=t)return this._trigger("drag")},i.prototype._trigger=function(t){if(null!=this.op.eventOnChange&&this.$el.trigger(this.op.eventOnChange,[this.data,t]),"function"==typeof this.op.onChange)return this.op.onChange.call(this.el,this.data,t)},i.prototype._drag=function(t){var i,e,h,s,o;return t.preventDefault(),t.stopImmediatePropagation(),s=n(t),i=s.x-this.p.x,e=s.y-this.p.y,this.p=s,h=0===i?null:this.left-i/this.gllt.clientWidth,o=0===e?null:this.top-e/this.gllt.clientHeight,this._offset(h,o)},i.prototype._offset=function(t,i){if((t||0===t)&&(t<0&&(t=0),t>this.width-1&&(t=this.width-1),this.canvas.style.left=(100*-t).toFixed(2)+"%",this.left=t,this.data.x=Math.round(t*this.op.width)),i||0===i)return i<0&&(i=0),i>this.height-1&&(i=this.height-1),this.canvas.style.top=(100*-i).toFixed(2)+"%",this.top=i,this.data.y=Math.round(i*this.op.height)},i.prototype._zoom=function(t){var i,e,h,s;if(!(t<=0||1===t||(s=this.width,i=this.height,this.op.maxScale&&this.data.scale*t>this.op.maxScale)))return s*t>1&&i*t>1?(this.width*=t,this.height*=t,this.canvas.style.width=(100*this.width).toFixed(2)+"%",this.canvas.style.height=(100*this.height).toFixed(2)+"%",this.data.scale*=t):(this._fit(),t=this.width/s),e=(this.left+.5)*t-.5,h=(this.top+.5)*t-.5,this._offset(e,h)},i.prototype._zoomScale=function(t){var i;return t=parseFloat(t),i=t/this.data.scale,this._zoom(i)},i.prototype._fit=function(){var t,i;return t=this.width,i=this.height/this.width,i>1?(this.width=1,this.height=i):(this.width=1/i,this.height=1),this.canvas.style.width=(100*this.width).toFixed(2)+"%",this.canvas.style.height=(100*this.height).toFixed(2)+"%",this.data.scale*=this.width/t},i.prototype._center=function(){return this._offset((this.width-1)/2,(this.height-1)/2)},i.prototype._rotate=function(t){var i,h,s,n,o,a,r,l;if(e()&&0!==t&&t%90==0)return this.angle=(this.angle+t)%360,this.angle<0&&(this.angle=360+this.angle),t%180!=0&&(l=this.widthReal,s=this.heightReal,this.angle%180!=0&&(l=(n=[s,l])[0],s=n[1]),this.data.minScale=+Math.max.apply(this,[this.op.width/l,this.op.height/s]).toFixed(2),h=this.op.height/this.op.width,o=[this.height*h,this.width/h],this.width=o[0],this.height=o[1],this.width>=1&&this.height>=1?(this.canvas.style.width=100*this.width+"%",this.canvas.style.height=100*this.height+"%"):this._fit()),a=[1,1],l=a[0],s=a[1],this.angle%180!=0&&(l=(r=[i=this.height/this.width*h,1/i])[0],s=r[1]),this.el.style.width=100*l+"%",this.el.style.height=100*s+"%",this.el.style.left=(1-l)/2*100+"%",this.el.style.top=(1-s)/2*100+"%",this.$el.css({transform:"rotate("+this.angle+"deg)"}),this._center(),this.data.angle=this.angle},i.prototype.rotateLeft=function(){return this.enabled&&(this._rotate(-90),this._trigger("rotateLeft"))},i.prototype.rotateRight=function(){return this.enabled&&(this._rotate(90),this._trigger("rotateRight"))},i.prototype.center=function(){return this.enabled&&(this._center(),this._trigger("center"))},i.prototype.fit=function(){return this.enabled&&(this._fit(),this._center(),this._trigger("fit"))},i.prototype.zoomIn=function(){return this.enabled&&(this._zoom(this.zoomInFactor),this._trigger("zoomIn"))},i.prototype.zoomOut=function(){return this.enabled&&(this._zoom(this.zoomOutFactor),this._trigger("zoomOut"))},i.prototype.zoomCustom=function(t){return this.enabled&&(this._zoomScale(t),this._trigger("zoomCustom"))},i.prototype.getData=function(){return this.data},i.prototype.enable=function(){return this.enabled=!0},i.prototype.disable=function(){return this.enabled=!1},i.prototype.remove=function(){return this._unbind(),this._unwrap(),this.disable(),this.$el.off(s.start,this._start),this.$el.removeData(r+"Instance")},i}(),g=["rotateLeft","rotateRight","center","fit","zoomIn","zoomOut","zoomCustom","instance","getData","enable","disable","remove"],t.fn[r]=function(e,h){return"string"!=typeof e?this.each(function(){var h;if(!t.data(this,r+"Instance"))return h=new i(this,e),t.data(this,r+"Instance",h)}):c.call(g,e)>=0?"instance"===e?t.data(this[0],r+"Instance"):"getData"===e?t.data(this[0],r+"Instance")[e]():this.each(function(){var i;if(i=t.data(this,r+"Instance"))return i[e](h)}):void 0}}).call(this);
\ No newline at end of file
diff --git a/src/jquery.guillotine.coffee b/src/jquery.guillotine.coffee
index 942a32f..bc64015 100644
--- a/src/jquery.guillotine.coffee
+++ b/src/jquery.guillotine.coffee
@@ -151,7 +151,11 @@ class Guillotine
 
     # Get image's real dimensions
     if element.tagName is 'IMG'
-      if element.naturalWidth
+      # Forced image params 
+      if element.width and element.height
+        width  = element.width
+        height = element.height
+      else if element.naturalWidth
         width  = element.naturalWidth
         height = element.naturalHeight
       else