2 files changed, 104 insertions, 7 deletions

diff --git a/script.js b/script.js
index a016eb4e..113d4335 100644
--- a/script.js
+++ b/script.js
@@ -80,9 +80,57 @@ function closeModal() {
   gradioApp().getElementById("lightboxModal").style.display = "none";
 }
 
-function showModal(elem) {
-  gradioApp().getElementById("modalImage").src = elem.src
-  gradioApp().getElementById("lightboxModal").style.display = "block";
+function showModal(event) {
+  var source = event.target || event.srcElement;
+  gradioApp().getElementById("modalImage").src = source.src
+  var lb = gradioApp().getElementById("lightboxModal")
+  lb.style.display = "block";
+  lb.focus()
+  event.stopPropagation()
+}
+
+function negmod(n, m) {
+  return ((n % m) + m) % m;
+}
+
+function modalImageSwitch(offset){
+  var galleryButtons = gradioApp().querySelectorAll(".gallery-item.transition-all")
+
+  if(galleryButtons.length>1){
+      var currentButton  = gradioApp().querySelector(".gallery-item.transition-all.\\!ring-2")
+
+      var result = -1
+      galleryButtons.forEach(function(v, i){ if(v==currentButton) { result = i } })
+
+      if(result != -1){
+        nextButton = galleryButtons[negmod((result+offset),galleryButtons.length)]
+        nextButton.click()
+        gradioApp().getElementById("modalImage").src = nextButton.children[0].src
+        setTimeout( function(){gradioApp().getElementById("lightboxModal").focus()},10)
+      }
+  }
+
+}
+
+function modalNextImage(event){
+  modalImageSwitch(1)
+  event.stopPropagation()
+}
+
+function modalPrevImage(event){
+  modalImageSwitch(-1)  
+  event.stopPropagation()
+}
+
+function modalKeyHandler(event){
+    switch (event.key) {
+        case "ArrowLeft":
+            modalPrevImage(event)
+            break;
+        case "ArrowRight":
+            modalNextImage(event)
+            break;
+    }
 }
 
 function showGalleryImage(){
@@ -92,12 +140,13 @@ function showGalleryImage(){
         if(fullImg_preview != null){
             fullImg_preview.forEach(function function_name(e) {
                 if(e && e.parentElement.tagName == 'DIV'){
+
                     e.style.cursor='pointer'
 
-                    elemfunc = function(elem){
-                        elem.onclick = function(){showModal(elem)};
-                    }
-                    elemfunc(e)
+                    e.addEventListener('click', function (evt) {
+                      showModal(evt)
+
+                    },true);
                 }
             });
         }
@@ -181,13 +230,35 @@ document.addEventListener("DOMContentLoaded", function() {
     modalClose.innerHTML = '×'
     modalClose.onclick = closeModal;
     modal.id = "lightboxModal";
+    modal.tabIndex=0
+    modal.addEventListener('keydown', modalKeyHandler, true)
     modal.appendChild(modalClose)
 
     const modalImage = document.createElement('img')
     modalImage.id = 'modalImage';
     modalImage.onclick = closeModal;
+    modalImage.tabIndex=0
+    modalImage.addEventListener('keydown', modalKeyHandler, true)
     modal.appendChild(modalImage)
 
+    const modalPrev = document.createElement('a')
+    modalPrev.className = 'modalPrev';
+    modalPrev.innerHTML = '❮'
+    modalPrev.tabIndex=0
+    modalPrev.addEventListener('click',modalPrevImage,true);
+    modalPrev.addEventListener('keydown', modalKeyHandler, true)
+    modal.appendChild(modalPrev)
+
+    const modalNext = document.createElement('a')
+    modalNext.className = 'modalNext';
+    modalNext.innerHTML = '❯'
+    modalNext.tabIndex=0
+    modalNext.addEventListener('click',modalNextImage,true);
+    modalNext.addEventListener('keydown', modalKeyHandler, true)
+
+    modal.appendChild(modalNext)
+
+
     gradioApp().getRootNode().appendChild(modal)
     
     document.body.appendChild(modalFragment);
diff --git a/style.css b/style.css
index e5cc8ad4..26c759d7 100644
--- a/style.css
+++ b/style.css
@@ -248,3 +248,29 @@ input[type="range"]{
     width: auto;

 }

 

+.modalPrev,

+.modalNext {

+  cursor: pointer;

+  position: absolute;

+  top: 50%;

+  width: auto;

+  padding: 16px;

+  margin-top: -50px;

+  color: white;

+  font-weight: bold;

+  font-size: 20px;

+  transition: 0.6s ease;

+  border-radius: 0 3px 3px 0;

+  user-select: none;

+  -webkit-user-select: none;

+}

+

+.modalNext {

+  right: 0;

+  border-radius: 3px 0 0 3px;

+}

+

+.modalPrev:hover,

+.modalNext:hover {

+  background-color: rgba(0, 0, 0, 0.8);

+}