Add zoomMax option

Author: waynegm

README.md

@@ -75,6 +75,14 @@ $("#image1").imgViewer("option", "zoomStep", 0.05);
 ```javascript
 $("#image1").imgViewer("option", "zoom", 3);
 ```
+###zoomMax
+  * Get/Set the limit on the maximum zoom level of the image - values less than 1 have no affect
+  * Default: 0 (ie no limit on zoom)
+  * Example - to restrict zoom to 3x or less:
+
+```javascript
+$("#image1").imgViewer("option", "zoomMax", 3);
+```
 ###zoomable
   * Controls if image will be zoomable
   * Default: true
@@ -189,6 +197,9 @@ This plugin is provided under the [MIT License](http://opensource.org/licenses/M
 Copyright (c) 2013 Wayne Mogg.
 
 ## Release History
+### 0.9.1
+- Add zoomMax option to limit maximum possible zoom level
+
 ### 0.9.0
 - Replace jquery.event.ue with hammer.js and jquery.hammer.js for more flexibility with touch gesture support
 - Add dragable option allowing user to disable dragging 

demo.html

@@ -33,9 +33,10 @@ <h2>Centred in a div - Dynamic Width</h2>
 <script type="text/javascript">
 ;(function($) {
 		$("#image1").imgViewer({
+			zoomMax: 4,
 			onClick: function( e, self ) {
 				var pos = self.cursorToImg( e.pageX, e.pageY);
-				$("#position").html(e.pageX + " " + e.pageY + " " + pos.x + " " + pos.y);
+				$("#position").html(e.pageX + " " + e.pageY + " " + pos.x + " " + pos.y + "  zoom: " + self.options.zoom);
 			}
 		});
 		function test(e, self) {

dist/imgViewer.js

@@ -1,4 +1,4 @@
-/*! jQuery imgViewer - v0.9.0 - 2016-08-07
+/*! jQuery imgViewer - v0.9.1 - 2016-12-31
 * https://github.com/waynegm/imgViewer
 * Copyright (c) 2016 Wayne Mogg; Licensed MIT */
 /*
@@ -9,6 +9,7 @@
 		options: {
 			zoomStep: 0.1,
 			zoom: 1,
+			zoomMax: 0,
 			zoomable: true,
 			dragable: true,
 			onClick: null,
@@ -35,7 +36,7 @@
 //		the pixel coordinate of the original image at the center of the viewport
 			self.vCenter = {};
 //		a flag used to decide if a mouse click is part of a drag or a proper click
-			self.dragging = false;
+			self.drag = false;
 			self.pinch = false;
 //		a flag used to check the target image has loaded
 			self.ready = false;
@@ -211,27 +212,23 @@
 					self.update();
 				}
 			}
-
-			$zimg.on( "panstart" , function(ev) {
+			$zimg.on("pan", function(ev) {
 				ev.preventDefault();
-				if (!self.pinch) {
+				if (!self.drag) {
+					self.drag = true;
 					self.dragXorg = self.vCenter.x;
 					self.dragYorg = self.vCenter.y;
 					startRenderLoop();
-				}
-			});
-
-			$zimg.on( "panmove", function(ev) {
-				ev.preventDefault();
-				if (!self.pinch) {
+				} else {
 					self.vCenter.x = self.dragXorg - ev.gesture.deltaX/self.options.zoom;
 					self.vCenter.y = self.dragYorg - ev.gesture.deltaY/self.options.zoom;
 				}
 			});
-				
+
 			$zimg.on( "panend", function(ev) {
 				ev.preventDefault();
-				if (!self.pinch) {
+				if (self.drag) {
+					self.drag = false;
 					stopRenderLoop();
 					self.update();
 				}
@@ -253,8 +250,7 @@
 		_unbind_drag_events: function() {
 			var self = this;
 			var $zimg = $(self.zimg);
-			$zimg.off("panstart");
-			$zimg.off("panmove");
+			$zimg.off("pan");
 			$zimg.off("panend");
 		},	
 
@@ -282,6 +278,11 @@
 						return;
 					}
 					break;
+				case 'zoomMax':
+					if (parseFloat(value) < 0 || isNaN(parseFloat(value))) {
+						return;
+					}
+					break;
 			}
 			var version = $.ui.version.split('.');
 			if (version[0] > 1 || version[1] > 8) {
@@ -449,9 +450,14 @@
 					height = $img.height(),
 					offset = $img.offset(),
 					zoom = this.options.zoom,
+					zoomMax = this.options.zoomMax,
 					half_width = width/2,
 					half_height = height/2;
 
+				if (zoomMax !==0) {
+						zoom = Math.min(zoom, zoomMax);
+						this.options.zoom = zoom;
+				}
 				if (zoom <= 1) {
 					zTop = 0;
 					zLeft = 0;

dist/imgViewer.min.js

@@ -2,7 +2,7 @@
   "name": "imgViewer",
   "title": "jQuery imgViewer",
   "description": "jQuery plugin to zoom and pan images, even those with a size that is a percentage of their container.",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "homepage": "",
   "author": {
     "name": "Wayne Mogg"

imgViewer.jquery.json

@@ -1,6 +1,6 @@
 {
   "name": "jquery-imgViewer-plugin",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "engines": {
     "node": ">= 0.8.0"
   },

package.json

@@ -15,6 +15,7 @@
 		options: {
 			zoomStep: 0.1,
 			zoom: 1,
+			zoomMax: 0,
 			zoomable: true,
 			dragable: true,
 			onClick: null,
@@ -219,7 +220,6 @@
 			}
 			$zimg.on("pan", function(ev) {
 				ev.preventDefault();
-				console.log(ev.type);
 				if (!self.drag) {
 					self.drag = true;
 					self.dragXorg = self.vCenter.x;
@@ -239,36 +239,6 @@
 					self.update();
 				}
 			});
-
-/*			$zimg.on( "panstart" , function(ev) {
-				ev.preventDefault();
-				if (!self.pinch) {
-					self.drag = true;
-					self.dragXorg = self.vCenter.x;
-					self.dragYorg = self.vCenter.y;
-					startRenderLoop();
-					console.log("panstart");
-				}
-			});
-
-			$zimg.on( "panmove", function(ev) {
-				ev.preventDefault();
-				if (!self.pinch) {
-					self.vCenter.x = self.dragXorg - ev.gesture.deltaX/self.options.zoom;
-					self.vCenter.y = self.dragYorg - ev.gesture.deltaY/self.options.zoom;
-					console.log("panmove");
-				}
-			});
-				
-			$zimg.on( "panend", function(ev) {
-				ev.preventDefault();
-				if (!self.pinch) {
-					self.drag = false;
-					stopRenderLoop();
-					self.update();
-				}
-			});
-*/	
 		},
 /*
  *	Unbind events
@@ -314,6 +284,11 @@
 						return;
 					}
 					break;
+				case 'zoomMax':
+					if (parseFloat(value) < 0 || isNaN(parseFloat(value))) {
+						return;
+					}
+					break;
 			}
 			var version = $.ui.version.split('.');
 			if (version[0] > 1 || version[1] > 8) {
@@ -481,9 +456,14 @@
 					height = $img.height(),
 					offset = $img.offset(),
 					zoom = this.options.zoom,
+					zoomMax = this.options.zoomMax,
 					half_width = width/2,
 					half_height = height/2;
 
+				if (zoomMax !==0) {
+						zoom = Math.min(zoom, zoomMax);
+						this.options.zoom = zoom;
+				}
 				if (zoom <= 1) {
 					zTop = 0;
 					zLeft = 0;