From 2ad0e3d9bbe9d8a184e9ff24f8615d827b57c757 Mon Sep 17 00:00:00 2001
From: Matias Haber <matihaber@gmail.com>
Date: Thu, 27 Jun 2024 10:27:34 -0300
Subject: [PATCH] better on=click & transparent image support

---
 jquery.zoom.js | 54 ++++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 44 insertions(+), 10 deletions(-)

diff --git a/jquery.zoom.js b/jquery.zoom.js
index 653eb49..377ce71 100644
--- a/jquery.zoom.js
+++ b/jquery.zoom.js
@@ -82,7 +82,7 @@
 
 	$.fn.zoom = function (options) {
 		return this.each(function () {
-			var
+			let
 			settings = $.extend({}, defaults, options || {}),
 			//target will display the zoomed image
 			target = settings.target && $(settings.target)[0] || this,
@@ -95,9 +95,10 @@
 			clicked = false,
 			touched = false;
 
+			const srcElement = source.querySelector('img');
+
 			// If a url wasn't specified, look for an image element.
 			if (!settings.url) {
-				var srcElement = source.querySelector('img');
 				if (srcElement) {
 					settings.url = srcElement.getAttribute('data-src') || srcElement.currentSrc || srcElement.src;
 				}
@@ -115,7 +116,7 @@
 			}.bind(this, target.style.position, target.style.overflow));
 
 			img.onload = function () {
-				var zoom = $.zoom(target, source, img, settings.magnify);
+				let zoom = $.zoom(target, source, img, settings.magnify);
 
 				function start(e) {
 					zoom.init();
@@ -125,11 +126,22 @@
 					// and changing position based on mousemovement at the same time.
 					$img.stop()
 					.fadeTo($.support.opacity ? settings.duration : 0, 1, $.isFunction(settings.onZoomIn) ? settings.onZoomIn.call(img) : false);
+
+					
+					//opacity background image
+					if (srcElement) {
+						$(srcElement).css('opacity', '0.2');
+					}
 				}
 
 				function stop() {
 					$img.stop()
 					.fadeTo(settings.duration, 0, $.isFunction(settings.onZoomOut) ? settings.onZoomOut.call(img) : false);
+
+					//opacity background image
+					if (srcElement) {
+						$(srcElement).css('opacity', '1');
+					}
 				}
 
 				// Mouse events
@@ -197,16 +209,31 @@
 
 				// Touch fallback
 				if (settings.touch) {
+					let touchStart = new Date().getTime();
+					let firstTouch = false;
 					$source
 						.on('touchstart.zoom', function (e) {
 							e.preventDefault();
-							if (touched) {
-								touched = false;
-								stop();
-							} else {
-								touched = true;
-								start( e.originalEvent.touches[0] || e.originalEvent.changedTouches[0] );
+
+							if(settings.on === 'click') {
+								firstTouch = false;
+								touchStart = new Date().getTime();
+								if (!touched) {
+									firstTouch = true;
+									touched = true;
+									start( e.originalEvent.touches[0] || e.originalEvent.changedTouches[0] );
+								}
+							}
+							else {								
+								if (touched) {
+									touched = false;
+									stop();
+								} else {
+									touched = true;
+									start( e.originalEvent.touches[0] || e.originalEvent.changedTouches[0] );
+								}
 							}
+							
 						})
 						.on('touchmove.zoom', function (e) {
 							e.preventDefault();
@@ -214,7 +241,14 @@
 						})
 						.on('touchend.zoom', function (e) {
 							e.preventDefault();
-							if (touched) {
+
+							if(settings.on === 'click') {
+								if(touched && !firstTouch && new Date().getTime()-touchStart < 100) {
+									touched = false
+									stop();
+								}	
+							}
+							else if (touched) {
 								touched = false;
 								stop();
 							}