Fix gallery

layouts/shortcodes/image-gallery.html

@@ -1,4 +1,4 @@
-{{/* https://hugocodex.org/add-ons/image-gallery/ */}}
+{{/* https://www.geeksforgeeks.org/how-to-make-image-gallery-using-html-css-and-javascript/ */}}
 {{/*
 Add this to your config yaml to serve images from `static/albums``
 
@@ -9,16 +9,10 @@ module:
 
 
 */}}
-<style>
-    .image-gallery {overflow: auto; margin-left: -1%!important;}
-    .image-gallery li {float: left; display: block; margin: 0 0 1% 1%; width: 19%;}
-    .image-gallery li a {text-align: center; text-decoration: none!important; color: #777;}
-    .image-gallery li a span {display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding: 3px 0;}
-    .image-gallery li a img {width: 100%; display: block;}
-</style>
 
 {{ $dir := string .Params.gallery_dir }}
-<ul class="image-gallery">
+
+<div class="gallery">
 {{ range (readDir (print "/static" $dir)) }}
   {{- $imageurl := printf "%s/%s" $dir .Name -}}
   {{- $image := resources.Get $imageurl -}}
@@ -26,12 +20,29 @@ module:
     {{- if eq $image nil -}}
     {{ return }}
     {{- else -}}
-    <li>
-      <a href="{{ ($image.Fit "1600x1600 q50").Permalink }}" title="{{ $imagetitle }}" class="lightbox-image">
-        <img src="{{ ($image.Fill "300x300 q50").Permalink }}" alt="{{ $imagetitle }}" title="{{ $imagetitle }}">
-        <span>{{ $imagetitle }}</span>
-      </a>
-    </li>
+    <div class="gallery-item">
+        <img src="{{ $image.Permalink }}"
+            onclick="openModal('{{ $image.Permalink }}')"
+            alt="{{ $imagetitle }}">
+    </div>
     {{- end -}}
 {{ end }}
-</ul>
+</div>
+
+<!-- Modal for Image Display -->
+<div id="myModal" class="modal">
+    <span class="close" onclick="closeModal()">&times;</span>
+    <img class="modal-content" id="modalImage">
+</div>
+
+<!-- JavaScript for Modal -->
+<script>    
+    function openModal(src) {
+        document.getElementById("modalImage").src = src;
+        document.getElementById("myModal").style.display = "block";
+    }
+
+    function closeModal() {
+        document.getElementById("myModal").style.display = "none";
+    }
+</script>