make gallery pics clickable to enlarge

Cavenfish · Cavenfish · commit 0ef9bc708d33 · 2025-12-30T18:24:15.000+01:00
diff --git a/_layout/head.html b/_layout/head.html
@@ -3,7 +3,6 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <meta name="google-site-verification" content="9CIsKebPd-hNdMScya0EZx2Z_GtQ9g3yDXmpbgs2mrU" />
 
   {{insert basic/stylesheets.html}}
   
diff --git a/_libs/scripts/gallery-modal.js b/_libs/scripts/gallery-modal.js
@@ -0,0 +1,25 @@
+var modal = document.getElementById("galleryModal");
+var span = document.getElementsByClassName("close")[0];
+var images = document.querySelectorAll(".gallery-img img");
+var originalParent = null;
+var currentImage = null;
+
+images.forEach(function (img) {
+  img.style.cursor = "pointer";
+  img.onclick = function (e) {
+    e.preventDefault();
+    modal.style.display = "block";
+    // Move the image to the modal
+    originalParent = img.parentNode;
+    currentImage = img;
+    modal.appendChild(img);
+  };
+});
+
+span.onclick = function () {
+  modal.style.display = "none";
+  // Move the image back to its original parent
+  if (originalParent && currentImage) {
+    originalParent.appendChild(currentImage);
+  }
+};
diff --git a/_sass/gallery.scss b/_sass/gallery.scss
@@ -44,6 +44,43 @@
   }
 }
 
+.gallery-modal {
+  display: none;
+  position: fixed;
+  z-index: 1;
+  padding-top: 1%;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgba(0, 0, 0, 0.9);
+
+  img {
+    margin: auto;
+    display: block;
+    height: 95%;
+    width: auto;
+  }
+
+  .close {
+    position: absolute;
+    top: 15px;
+    right: 35px;
+    color: #f1f1f1;
+    font-size: 40px;
+    font-weight: bold;
+    transition: 0.3s;
+  }
+
+  .close:hover,
+  .close:focus {
+    color: #bbb;
+    text-decoration: none;
+    cursor: pointer;
+  }
+}
+
 /* Responsive columns */
 @media (max-width: 1024px) {
   .gallery-wrapper {
@@ -60,4 +97,13 @@
   .gallery-img img {
     height: 160px; /* slightly smaller on mobile */
   }
+
+  .gallery-modal {
+    padding-top: 20%;
+
+    img {
+      width: 80%;
+      height: auto;
+    }
+  }
 }
diff --git a/utils/gallery.jl b/utils/gallery.jl
@@ -22,12 +22,6 @@ function add_gallery_item(io, obj::GalleryItem)
   )
 end
 
-function parse_gallery_item(item)
-
-
-  obj
-end
-
 @lx function makeGallery(img_dir)
   io  = IOBuffer()
 
@@ -54,5 +48,16 @@ end
 
   write(io, "</div>")
 
+  write(
+    io, 
+    """
+    <div id="galleryModal" class="gallery-modal">
+      <span class="close">&times;</span>
+    </div>
+    """
+  )
+
+  write(io, """<script src="/libs/scripts/gallery-modal.js"></script>""")
+
   take!(io) |> String |> html
 end
