Added simple fallback for touch events. Fixes #37 #39

Renamed minified file to jquery.zoom.min.js to match jQuery's convention.
jackmoore · Oct 16, 2013 · b662f50 · b662f50
1 parent e7ec63f
commit b662f50
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 43 deletions.
diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
 	"name": "jquery-zoom",
 	"description": "Enlarge images on click or mouseover.",
-	"version": "1.7.8",
+	"version": "1.7.9",
 	"dependencies": {
 		"jquery": ">=1.7"
 	},

diff --git a/demo.html b/demo.html
@@ -35,7 +35,7 @@
 		#ex2 img:hover { cursor: url(grab.cur), default; }
 		#ex2 img:active { cursor: url(grabbed.cur), default; }
 	</style>
-	<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
+	<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
 	<script src='jquery.zoom.js'></script>
 	<script>
 		$(document).ready(function(){

diff --git a/jquery.zoom-min.js b/jquery.zoom-min.js
diff --git a/jquery.zoom.js b/jquery.zoom.js
@@ -1,5 +1,5 @@
 /*!
-	Zoom v1.7.8 - 2013-07-30
+	Zoom v1.7.9 - 2013-10-16
 	Enlarge images on click or mouseover.
 	(c) 2013 Jack Moore - http://www.jacklmoore.com/zoom
 	license: http://www.opensource.org/licenses/mit-license.php
@@ -10,7 +10,8 @@
 		callback: false,
 		target: false,
 		duration: 120,
-		on: 'mouseover', // other options: 'grab', 'click', 'toggle'
+		on: 'mouseover', // other options: grab, click, toggle
+		touch: true, // enables a touch fallback
 		onZoomIn: false,
 		onZoomOut: false
 	};
@@ -79,6 +80,7 @@
 			$img = $(img),
 			mousemove = 'mousemove.zoom',
 			clicked = false,
+			touched = false,
 			$urlElement;
 
 			// If a url wasn't specified, look for an image element.
@@ -110,6 +112,7 @@
 					.fadeTo(settings.duration, 0, $.isFunction(settings.onZoomOut) ? settings.onZoomOut.call(img) : false);
 				}
 
+				// Mouse events
 				if (settings.on === 'grab') {
 					$(source)
 						.on('mousedown.zoom',
@@ -130,17 +133,7 @@
 									e.preventDefault();
 								}
 							}
-						)
-						.on('touchstart.zoom', function (e) { 
-							e.preventDefault();
-							start( e.originalEvent.touches[0] || e.originalEvent.changedTouches[0] );
-						})
-						.on('touchmove.zoom', function (e) { 
-							e.preventDefault();
-							zoom.move( e.originalEvent.touches[0] || e.originalEvent.changedTouches[0] );
-						})
-						.on('touchend.zoom', stop);
-
+						);
 				} else if (settings.on === 'click') {
 					$(source).on('click.zoom',
 						function (e) {
@@ -150,24 +143,12 @@
 							} else {
 								clicked = true;
 								start(e);
-								$(document)
-									.on(mousemove, zoom.move)
-									.on('touchstart.zoom', function (e) { 
-										// no e.preventDefault() cause it will be impossible to turn off with a click
-										start( e.originalEvent.touches[0] || e.originalEvent.changedTouches[0] );
-									})
-									.on('touchmove.zoom', function (e) { 
-										e.preventDefault();
-										zoom.move( e.originalEvent.touches[0] || e.originalEvent.changedTouches[0] );
-									});
+								$(document).on(mousemove, zoom.move);
 								$(document).one('click.zoom',
 									function () {
 										stop();
 										clicked = false;
-										$(document)
-											.off(mousemove, zoom.move)
-											.off('touchstart.zoom')
-											.off('touchmove.zoom');
+										$(document).off(mousemove, zoom.move);
 									}
 								);
 								return false;
@@ -185,24 +166,34 @@
 							clicked = !clicked;
 						}
 					);
-				} else {
+				} else if (settings.on === 'mouseover') {
 					zoom.init(); // Preemptively call init because IE7 will fire the mousemove handler before the hover handler.
 
 					$(source)
 						.on('mouseenter.zoom', start)
 						.on('mouseleave.zoom', stop)
-						.on(mousemove, zoom.move)
+						.on(mousemove, zoom.move);
+				}
+
+				// Touch fallback
+				if (settings.touch) {
+					$(source)
 						.on('touchstart.zoom', function (e) { 
 							e.preventDefault();
-							start( e.originalEvent.touches[0] || e.originalEvent.changedTouches[0] );
+							if (touched) {
+								touched = false;
+								stop();
+							} else {
+								touched = true;
+								start( e.originalEvent.touches[0] || e.originalEvent.changedTouches[0] );
+							}
 						})
 						.on('touchmove.zoom', function (e) { 
 							e.preventDefault();
 							zoom.move( e.originalEvent.touches[0] || e.originalEvent.changedTouches[0] );
-						})
-						.on('touchend.zoom', stop);
+						});
 				}
-
+				
 				if ($.isFunction(settings.callback)) {
 					settings.callback.call(img);
 				}

diff --git a/jquery.zoom.min.js b/jquery.zoom.min.js
diff --git a/readme.md b/readme.md
@@ -4,6 +4,10 @@ A small jQuery plugin for zooming images on mouseover or mousedown. See the [pro
 
 ## Changelog:
 
+### v1.7.9 - 2013/10/16
+* Added simple fallback for touch events. Fixes #37 #39
+* Renamed minified file to jquery.zoom.min.js to match jQuery's convention.
+
 ### v1.7.8 - 2013/7/30
 * Will use data-src attribute if present before checking for the presence of an src attribute.
 

diff --git a/zoom.jquery.json b/zoom.jquery.json
@@ -2,7 +2,7 @@
 	"name": "zoom",
 	"title": "Zoom",
 	"description": "Enlarge images on click or mouseover.",
-	"version": "1.7.8",
+	"version": "1.7.9",
 	"dependencies": {
 		"jquery": ">=1.7"
 	},