From bae5fcfdab23275b218ad71b368c9a360ded3d34 Mon Sep 17 00:00:00 2001
From: Razunter <Razunter@gmail.com>
Date: Sun, 23 Jul 2023 02:42:15 +0400
Subject: [PATCH 1/2] fix Image Viewer for Firefox

---
 javascript/imageViewer.js | 41 +++++++++++++++++++++++----------------
 1 file changed, 24 insertions(+), 17 deletions(-)

diff --git a/javascript/imageViewer.js b/javascript/imageViewer.js
index cec604279..22e437176 100644
--- a/javascript/imageViewer.js
+++ b/javascript/imageViewer.js
@@ -85,21 +85,11 @@ function modalZoomSet(modalImage, enable) {
   if (modalImage) modalImage.classList.toggle('modalImageFullscreen', !!enable);
 }
 
-function setupImageForLightbox(e) {
-  if (e.dataset.modded) return;
-  console.log('setupImageForLightbox', e);
-  e.dataset.modded = true;
-  e.style.cursor = 'pointer';
-  e.style.userSelect = 'none';
-  const event = (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) ? 'mousedown' : 'click'; // silly firefox workaround since it triggers events in wrong order
-  e.addEventListener(event, (evt) => {
-    if (evt.button !== 0) return;
-    const initialZoom = (localStorage.getItem('modalZoom') || true) === 'yes';
-    modalZoomSet(gradioApp().getElementById('modalImage'), initialZoom);
-    evt.preventDefault();
-    evt.stopPropagation();
-    showModal(evt);
-  }, true);
+function setupImageForLightbox(image) {
+  if (image.dataset.modded) return;
+  image.dataset.modded = 'true';
+  image.style.cursor = 'pointer';
+  image.style.userSelect = 'none';
 }
 
 function modalZoomToggle(event) {
@@ -124,9 +114,26 @@ function modalTileToggle(event) {
 
 let imageViewerInitialized = false;
 
+function galleryClickEventHandler(event) {
+  if (event.button !== 0) return;
+  if (event.target.nodeName === 'IMG' && !event.target.parentNode.classList.contains('thumbnail-item')) {
+    const initialZoom = (localStorage.getItem('modalZoom') || true) === 'yes';
+    modalZoomSet(gradioApp().getElementById('modalImage'), initialZoom);
+    event.preventDefault();
+    showModal(event);
+  }
+}
+
 function initImageViewer() {
-  const fullImgPreview = gradioApp().querySelectorAll('.gradio-gallery > div > img');
-  if (fullImgPreview.length > 0) fullImgPreview.forEach(setupImageForLightbox);
+  const galleryPreview = gradioApp().querySelector('.gradio-gallery > div.preview')
+  if (galleryPreview) {
+    const fullImgPreview = galleryPreview.querySelectorAll('img');
+    if (fullImgPreview.length > 0) {
+      galleryPreview.addEventListener('click', galleryClickEventHandler, true);
+      fullImgPreview.forEach(setupImageForLightbox);
+    }
+  }
+
   if (imageViewerInitialized) return;
   imageViewerInitialized = true;
 

From e8a5276f93577674abeaeff37d44c7146fb1104d Mon Sep 17 00:00:00 2001
From: Razunter <Razunter@gmail.com>
Date: Sun, 23 Jul 2023 02:46:23 +0400
Subject: [PATCH 2/2] ensure that Image Viewer prev-next buttons are clickable

---
 javascript/style.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/javascript/style.css b/javascript/style.css
index e1e8c1747..dadc61a0d 100644
--- a/javascript/style.css
+++ b/javascript/style.css
@@ -379,6 +379,8 @@ table.settings-value-table td{
 
 .modalPrev, .modalNext {
   cursor: pointer;
+  position: relative;
+  z-index: 1;
   top: 0;
   width: auto;
   height: 100vh;