zoom and input buttons

ui/media/css/main.css

@@ -1898,12 +1898,21 @@ div#enlarge-buttons {
 }
 
 .gallery-container {
-  columns: 5 ;
+  columns: 6 380px ;
   column-gap: 1.5rem;
   width: 95%;
   margin: 0 0 ;
 }
-.gallery-container  div {
+
+.gallery-image img {
+    width: 100%;
+    border-radius: 5px;
+    transition: all .25s ease-in-out;
+    box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
+}
+
+.gallery-image {
+    position: relative;
     margin: 0 1.5rem 1.5rem 0;
     display: inline-block;
     width: 100%;
@@ -1912,15 +1921,20 @@ div#enlarge-buttons {
     transition: all .75s ease-in-out;
 }
 
-.gallery-container div img {
+.gallery-image-hover {
-    width: 100%;
+    position: absolute;
-    border-radius: 5px;
+    right: 15px;
-    transition: all .25s ease-in-out;
+    top: 15px;
-    box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
+    opacity: 0;
+    text-align: right;
 }
 
-.gallery-container div img:hover {
+.gallery-image-hover button {
-    box-shadow: 1px 1px 15px rgba(32,0,128,0.8);
+    margin-bottom: 5px;
+}
+
+.gallery-image:hover .gallery-image-hover {
+    opacity: 1;
 }
 
 

ui/media/js/main.js

@@ -3087,11 +3087,55 @@ let recentResolutionsValues = []
 /* Gallery JS */
 function galleryImage(item) {
     let div = document.createElement("div")
-    let img = document.createElement("img")
+    div.classList.add("gallery-image")
 
+    let img = document.createElement("img")
     img.src = "/image/" + item.path
     img.dataset["request"] = JSON.stringify(item)
-    div.appendChild(img)
+
+    let hover = document.createElement("div")
+    hover.classList.add("gallery-image-hover")
+    
+    let imageExpandBtn=document.createElement("button")
+    imageExpandBtn.classList.add("tertiaryButton")
+    imageExpandBtn.innerHTML = '<i class="fa-solid fa-expand"></i>'
+    imageExpandBtn.addEventListener("click", function() {
+        function previousImage(img) {
+            const allImages = Array.from(document.getElementById("imagecontainer").querySelectorAll(".gallery-image img"))
+            const index = allImages.indexOf(img)
+            return allImages.slice(0, index).reverse()[0]
+        }
+
+        function nextImage(img) {
+            const allImages = Array.from(document.getElementById("imagecontainer").querySelectorAll(".gallery-image img"))
+            const index = allImages.indexOf(img)
+            return allImages.slice(index + 1)[0]
+        }
+
+        function imageModalParameter(img) {
+            const previousImg = previousImage(img)
+            const nextImg = nextImage(img)
+
+            return {
+                src: img.src,
+                previous: previousImg ? () => imageModalParameter(previousImg) : undefined,
+                next: nextImg ? () => imageModalParameter(nextImg) : undefined,
+            }
+        }
+        imageModal(imageModalParameter(img))
+    })
+
+    hover.appendChild(imageExpandBtn)
+    hover.appendChild(document.createElement("br"))
+
+    let useAsInputBtn = document.createElement("button")
+    useAsInputBtn.classList.add("tertiaryButton")
+    useAsInputBtn.innerHTML = "Use as Input"
+    useAsInputBtn.addEventListener("click", (e) => onUseAsInputClick(null, img))
+
+    hover.appendChild(useAsInputBtn)
+
+    div.replaceChildren(img, hover)
     return div
 }