www/css/gallery.css

@@ -51,11 +51,9 @@ main {
     font-size: 1.5em;
 }
 
-/* #region modal */
-
 .modal-target:hover {opacity: 0.7;}
 
-/* The Modal (background) */
+/* Modal Background */
 .modal {
     display: none; /* Hidden by default */
     position: fixed; /* Stay in place */
@@ -70,14 +68,12 @@ main {
     background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
 }
 
-/* Modal Content (image) */
 .modal-content {
     margin: auto;
     display: block;
     object-fit: scale-down;
     overflow: visible;
     
-    /* yolo, it all goes down from here */
     min-width: 60vw;
     max-width: 90vw !important;
     min-height: 60vh;
@@ -88,7 +84,6 @@ main {
     opacity: 1 !important;
 }
 
-/* Caption of Modal Image */
 .modal-caption {
     margin: auto;
     display: block;
@@ -133,9 +128,7 @@ main {
     text-decoration: none;
     cursor: pointer;
 }
-/* #endregion modal */
 
-/* #region screen-size media-rules */
 @media only screen and (min-width:320px)  {
     .gallery-container { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
     main { padding: 1em; }
@@ -150,4 +143,3 @@ main {
 @media only screen and (min-width: 1281px) {
     .gallery-container { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
 }
-/* #endregion */

www/galleri/index.php

@@ -43,7 +43,7 @@ function getDirContents($dir, &$results = array()) {
             if (in_array($ext, $GLOBALS["allowedExtensions"])) {
                 $results[] = $cleanPath;
             }
-        } else if ($value != "." && $value != "..") {
+        } else if ($value != "." && $value != ".." && $value != ".thumbnails") {
             //recursively scan directories
             getDirContents($path, $results);
         }
@@ -55,7 +55,7 @@ $images = getDirContents($galleryDir);
 $imageTemplate = '
 <div class="card">
     <div class="card-image-div">
-        <img src="%path" alt="%name" class="card-image modal-target">
+        <img src="%thumbnail" data-fullsrc="%path" alt="%name" class="card-image modal-target">
     </div>
     <div class="card-body">
         <p class="card-title">%realname</p>
@@ -108,6 +108,7 @@ $imageTemplate = '
                 "%timestamp"    =>  filemtime($galleryDir . $value),
                 "%name"         =>  htmlspecialchars($displaypath),
                 "%path"         =>  $serverPath . $value,
+		"%thumbnail"    =>  $serverPath . "/.thumbnails" . $value . ".png",
                 "%realname"     =>  htmlspecialchars($realname)
             ];
             echo strtr($imageTemplate, $vars);

www/js/galleri.js

@@ -1,22 +1,17 @@
-// #region Modal
-var modal = document.getElementById('modal');
+const modal = document.getElementById('modal');
+const modalImg = document.getElementById("modal-content");
+const captionText = document.getElementById("modal-caption");
 
-// global handler
 document.addEventListener('click', function (e) { 
     if (e.target.className.indexOf('modal-target') !== -1) {
-        var img = e.target;
-        var modalImg = document.getElementById("modal-content");
-        var captionText = document.getElementById("modal-caption");
+        // Open modal
+        const img = e.target;
         modal.style.display = "block";
-        modalImg.src = img.src;
+        modalImg.src = img.dataset.fullsrc;
         captionText.innerHTML = img.alt;
     } else if (modal.style.display != "none") {
+        // Close modal
         modal.style.display = "none";
+        modalImg.src = "";
     }
 });
-// #endregion
-
-// #region sorting
-
-
-// #endregion