From a44d88dd551cc8301cccbcb3cbccc55498926fef Mon Sep 17 00:00:00 2001 From: Indri Muska Date: Tue, 10 Nov 2015 10:37:23 +0100 Subject: [PATCH] Support to natural width/height Maximum zoom limits to natural image dimensions (width & height). --- README.md | 2 +- bower.json | 3 +-- dist/zoomify.js | 8 +++++--- dist/zoomify.min.js | 4 ++-- package.json | 4 ++-- src/zoomify.js | 8 +++++--- 6 files changed, 16 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index b75f7b5..dd0166d 100644 --- a/README.md +++ b/README.md @@ -31,7 +31,7 @@ Property | Type | Default | Description ---|---|---|--- duration | `integer` | `200` | Transition duration in milliseconds. easing | `string` | `"linear"` | Transition property name. -scale | `float` | `0.9` | Maximum zoom scale (1 means full screen). +scale | `float` | `0.9` | If the image is bigger than the size of the page, it represent the maximum zoom scale according to page width/height (from 0 to 1). Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-duration=""`. diff --git a/bower.json b/bower.json index 7909e03..5ce3aa9 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "zoomify", - "version": "0.2.3", + "version": "0.2.4", "authors": [ "Indri Muska " ], @@ -25,7 +25,6 @@ "tests" ], "dependencies": { - "angular": "~1.4.3", "jquery": "~1.7.1" } } diff --git a/dist/zoomify.js b/dist/zoomify.js index 80cba40..572f2cf 100644 --- a/dist/zoomify.js +++ b/dist/zoomify.js @@ -82,11 +82,13 @@ var offset = this.$image.offset(), width = this.$image.outerWidth(), height = this.$image.outerHeight(), + nWidth = this.$image[0].naturalWidth || +Infinity, + nHeight = this.$image[0].naturalHeight || +Infinity, wWidth = $(window).width(), wHeight = $(window).height(), - scaleX = wWidth / width, - scaleY = wHeight / height, - scale = Math.min(scaleX, scaleY) * this.options.scale, + scaleX = Math.min(nWidth, wWidth * this.options.scale) / width, + scaleY = Math.min(nHeight, wHeight * this.options.scale) / height, + scale = Math.min(scaleX, scaleY), translateX = (-offset.left + (wWidth - width) / 2) / scale, translateY = (-offset.top + (wHeight - height) / 2 + $(document).scrollTop()) / scale; diff --git a/dist/zoomify.min.js b/dist/zoomify.min.js index 0f3884e..6583d48 100644 --- a/dist/zoomify.min.js +++ b/dist/zoomify.min.js @@ -1,2 +1,2 @@ -/*! Zoomify - v0.2.3 - https://github.com/indrimuska/zoomify - (c) 2015 Indri Muska - MIT */ -!function(a){Zoomify=function(b,c){var d=this;this._zooming=!1,this._zoomed=!1,this._timeout=null,this.$shadow=null,this.$image=a(b).addClass("zoomify"),this.options=a.extend({},Zoomify.DEFAULTS,this.$image.data(),c),this.$image.on("click",function(){d.zoom()}),a(window).on("resize",function(){d.reposition()}),a(document).on("scroll",function(){d.reposition()})},Zoomify.DEFAULTS={duration:200,easing:"linear",scale:.9},Zoomify.prototype.transition=function(a,b){a.css({"-webkit-transition":b,"-moz-transition":b,"-ms-transition":b,"-o-transition":b,transition:b})},Zoomify.prototype.addTransition=function(a){this.transition(a,"all "+this.options.duration+"ms "+this.options.easing)},Zoomify.prototype.removeTransition=function(b,c){var d=this;clearTimeout(this._timeout),this._timeout=setTimeout(function(){d.transition(b,""),a.isFunction(c)&&c.call(d)},this.options.duration)},Zoomify.prototype.transform=function(a){this.$image.css({"-webkit-transform":a,"-moz-transform":a,"-ms-transform":a,"-o-transform":a,transform:a})},Zoomify.prototype.transformScaleAndTranslate=function(a,b,c,d){this.addTransition(this.$image),this.transform("scale("+a+") translate("+b+"px, "+c+"px)"),this.removeTransition(this.$image,d)},Zoomify.prototype.zoom=function(){this._zooming||(this._zoomed?this.zoomOut():this.zoomIn())},Zoomify.prototype.zoomIn=function(){var b=this,c=this.$image.css("transform");this.transition(this.$image,"none"),this.transform("none");var d=this.$image.offset(),e=this.$image.outerWidth(),f=this.$image.outerHeight(),g=a(window).width(),h=a(window).height(),i=g/e,j=h/f,k=Math.min(i,j)*this.options.scale,l=(-d.left+(g-e)/2)/k,m=(-d.top+(h-f)/2+a(document).scrollTop())/k;this.transform(c),this._zooming=!0,this.$image.addClass("zoomed").trigger("zoom-in.zoomify"),setTimeout(function(){b.addShadow(),b.transformScaleAndTranslate(k,l,m,function(){b._zooming=!1,b.$image.trigger("zoom-in-complete.zoomify")}),b._zoomed=!0})},Zoomify.prototype.zoomOut=function(){var a=this;this._zooming=!0,this.$image.trigger("zoom-out.zoomify"),this.transformScaleAndTranslate(1,0,0,function(){a._zooming=!1,a.$image.removeClass("zoomed").trigger("zoom-out-complete.zoomify")}),this.removeShadow(),this._zoomed=!1},Zoomify.prototype.reposition=function(){this._zoomed&&(this.transition(this.$image,"none"),this.zoomIn())},Zoomify.prototype.addShadow=function(){var b=this;this._zoomed||(b.$shadow&&b.$shadow.remove(),this.$shadow=a('
'),a("body").append(this.$shadow),this.addTransition(this.$shadow),this.$shadow.on("click",function(){b.zoomOut()}),setTimeout(function(){b.$shadow.addClass("zoomed")},10))},Zoomify.prototype.removeShadow=function(){var a=this;this.$shadow&&(this.addTransition(this.$shadow),this.$shadow.removeClass("zoomed"),this.$image.one("zoom-out-complete.zoomify",function(){a.$shadow&&a.$shadow.remove(),a.$shadow=null}))},a.fn.zoomify=function(b){return this.each(function(){var c=a(this),d=c.data("zoomify");d||c.data("zoomify",d=new Zoomify(this,"object"==typeof b&&b)),"string"==typeof b&&["zoom","zoomIn","zoomOut","reposition"].indexOf(b)>=0&&d[b]()})}}(jQuery); \ No newline at end of file +/*! Zoomify - v0.2.4 - https://github.com/indrimuska/zoomify - (c) 2015 Indri Muska - MIT */ +!function(a){Zoomify=function(b,c){var d=this;this._zooming=!1,this._zoomed=!1,this._timeout=null,this.$shadow=null,this.$image=a(b).addClass("zoomify"),this.options=a.extend({},Zoomify.DEFAULTS,this.$image.data(),c),this.$image.on("click",function(){d.zoom()}),a(window).on("resize",function(){d.reposition()}),a(document).on("scroll",function(){d.reposition()})},Zoomify.DEFAULTS={duration:200,easing:"linear",scale:.9},Zoomify.prototype.transition=function(a,b){a.css({"-webkit-transition":b,"-moz-transition":b,"-ms-transition":b,"-o-transition":b,transition:b})},Zoomify.prototype.addTransition=function(a){this.transition(a,"all "+this.options.duration+"ms "+this.options.easing)},Zoomify.prototype.removeTransition=function(b,c){var d=this;clearTimeout(this._timeout),this._timeout=setTimeout(function(){d.transition(b,""),a.isFunction(c)&&c.call(d)},this.options.duration)},Zoomify.prototype.transform=function(a){this.$image.css({"-webkit-transform":a,"-moz-transform":a,"-ms-transform":a,"-o-transform":a,transform:a})},Zoomify.prototype.transformScaleAndTranslate=function(a,b,c,d){this.addTransition(this.$image),this.transform("scale("+a+") translate("+b+"px, "+c+"px)"),this.removeTransition(this.$image,d)},Zoomify.prototype.zoom=function(){this._zooming||(this._zoomed?this.zoomOut():this.zoomIn())},Zoomify.prototype.zoomIn=function(){var b=this,c=this.$image.css("transform");this.transition(this.$image,"none"),this.transform("none");var d=this.$image.offset(),e=this.$image.outerWidth(),f=this.$image.outerHeight(),g=this.$image[0].naturalWidth||+(1/0),h=this.$image[0].naturalHeight||+(1/0),i=a(window).width(),j=a(window).height(),k=Math.min(g,i*this.options.scale)/e,l=Math.min(h,j*this.options.scale)/f,m=Math.min(k,l),n=(-d.left+(i-e)/2)/m,o=(-d.top+(j-f)/2+a(document).scrollTop())/m;this.transform(c),this._zooming=!0,this.$image.addClass("zoomed").trigger("zoom-in.zoomify"),setTimeout(function(){b.addShadow(),b.transformScaleAndTranslate(m,n,o,function(){b._zooming=!1,b.$image.trigger("zoom-in-complete.zoomify")}),b._zoomed=!0})},Zoomify.prototype.zoomOut=function(){var a=this;this._zooming=!0,this.$image.trigger("zoom-out.zoomify"),this.transformScaleAndTranslate(1,0,0,function(){a._zooming=!1,a.$image.removeClass("zoomed").trigger("zoom-out-complete.zoomify")}),this.removeShadow(),this._zoomed=!1},Zoomify.prototype.reposition=function(){this._zoomed&&(this.transition(this.$image,"none"),this.zoomIn())},Zoomify.prototype.addShadow=function(){var b=this;this._zoomed||(b.$shadow&&b.$shadow.remove(),this.$shadow=a('
'),a("body").append(this.$shadow),this.addTransition(this.$shadow),this.$shadow.on("click",function(){b.zoomOut()}),setTimeout(function(){b.$shadow.addClass("zoomed")},10))},Zoomify.prototype.removeShadow=function(){var a=this;this.$shadow&&(this.addTransition(this.$shadow),this.$shadow.removeClass("zoomed"),this.$image.one("zoom-out-complete.zoomify",function(){a.$shadow&&a.$shadow.remove(),a.$shadow=null}))},a.fn.zoomify=function(b){return this.each(function(){var c=a(this),d=c.data("zoomify");d||c.data("zoomify",d=new Zoomify(this,"object"==typeof b&&b)),"string"==typeof b&&["zoom","zoomIn","zoomOut","reposition"].indexOf(b)>=0&&d[b]()})}}(jQuery); \ No newline at end of file diff --git a/package.json b/package.json index 0540a76..3261c12 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "zoomify", - "version": "0.2.3", + "version": "0.2.4", "description": "Zoomify is a jQuery plugin for simple lightboxes with zoom effect.", "main": "Gruntfile.js", "repository": { @@ -21,7 +21,7 @@ }, "homepage": "http://indrimuska.github.io/zoomify", "dependencies": { - "angular": "~1.4.3" + "jquery": "~1.7.1" }, "devDependencies": { "grunt": "^0.4.5", diff --git a/src/zoomify.js b/src/zoomify.js index 80cba40..572f2cf 100644 --- a/src/zoomify.js +++ b/src/zoomify.js @@ -82,11 +82,13 @@ var offset = this.$image.offset(), width = this.$image.outerWidth(), height = this.$image.outerHeight(), + nWidth = this.$image[0].naturalWidth || +Infinity, + nHeight = this.$image[0].naturalHeight || +Infinity, wWidth = $(window).width(), wHeight = $(window).height(), - scaleX = wWidth / width, - scaleY = wHeight / height, - scale = Math.min(scaleX, scaleY) * this.options.scale, + scaleX = Math.min(nWidth, wWidth * this.options.scale) / width, + scaleY = Math.min(nHeight, wHeight * this.options.scale) / height, + scale = Math.min(scaleX, scaleY), translateX = (-offset.left + (wWidth - width) / 2) / scale, translateY = (-offset.top + (wHeight - height) / 2 + $(document).scrollTop()) / scale;