update gallery to have image open in modal

Author: ChristopherMarais

.astro/types.d.ts

@@ -1 +1,2 @@
 /// <reference types="astro/client" />
+/// <reference path="content.d.ts" />

public/css/style.css

@@ -24,6 +24,10 @@
     box-sizing: border-box;
 }
 
+p {
+    font-size: 18px; /* Example: Sets the font size to 16 pixels */
+  }
+
 /* text weblinks */
 main a {
     color: grey;
@@ -296,7 +300,72 @@ gradio-app .example-row {
     width: 100% !important;
 }
 
-  
+/* src/styles/gallery.css */
+/* Modal container using flex to center content */
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.9);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* Modal container using flex to center content */
+.modal {
+    display: none; /* Hidden by default */
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.9);
+    align-items: center;
+    justify-content: center;
+}
+
+/* Only display the modal when it has the active class */
+.modal.active {
+    display: flex;
+}
+
+/* Modal image styling */
+.modal-content {
+    max-width: 90%;
+    max-height: 90%;
+}
+
+/* Close button styling */
+.close {
+    position: absolute;
+    top: 20px;
+    right: 35px;
+    color: #fff;
+    font-size: 40px;
+    font-weight: bold;
+    cursor: pointer;
+}
+.close:hover,
+.close:focus {
+    color: #bbb;
+    text-decoration: none;
+}
+
+/* Optional: style for clickable images */
+.clickable {
+    cursor: pointer;
+    transition: transform 0.2s;
+}
+.clickable:hover {
+    transform: scale(1.03);
+}
+
 /* Responsive Adjustments */
 @media (max-width: 768px) {
     header .container {
@@ -311,3 +380,32 @@ gradio-app .example-row {
         margin: 5px;
     }
 }
+
+/* Full-screen overlay for loading modal */
+.loading-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.2); /* very faint overlay */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2000; /* Ensure it sits on top */
+  }
+  
+  /* Simple spinner */
+  .spinner {
+    border: 8px solid rgba(255, 255, 255, 0.3);
+    border-top: 8px solid #fff;
+    border-radius: 50%;
+    width: 60px;
+    height: 60px;
+    animation: spin 1s linear infinite;
+  }
+  
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }

src/pages/gallery/[page].astro

@@ -2,32 +2,27 @@
 import Layout from '../../layouts/Layout.astro';
 import { getImagesInfo } from '../../utils/getImagesInfo';
 
-// Generate static paths for each gallery page.
 export async function getStaticPaths() {
-  // Define rootDirectory inside getStaticPaths so it's available here.
   const rootDirectory = Astro.root ?? process.cwd();
   const { totalPages } = getImagesInfo(rootDirectory);
   return Array.from({ length: totalPages }, (_, i) => ({
     params: { page: String(i + 1) }
   }));
 }
 
-// In the main code, define rootDirectory again.
 const rootDirectory = Astro.root ?? process.cwd();
 const { files, perPage, totalPages } = getImagesInfo(rootDirectory);
-
-// Retrieve the current page number from URL parameters.
 const { page } = Astro.params;
 const currentPage = parseInt(page, 10);
-
-// Determine which images to show on this page.
 const start = (currentPage - 1) * perPage;
 const images = files.slice(start, start + perPage);
 ---
 
 <Layout title={`Gallery - Page ${currentPage}`} activePage="gallery">
+  <br>
+  <br>
   <h1>My Photos - Page {currentPage}</h1>
-  <p>Here is a collection of pictures I have taken over the years to record my memories, experiences and travels.</p>
+  <p>Here are pictures I have enjoyed taking over the years to record my memories, experiences and travels.</p>
   <br>
   <br>
   <nav class="pagination">
@@ -52,7 +47,7 @@ const images = files.slice(start, start + perPage);
 
   <div class="gallery-full">
     {images.map((image) => (
-      <img src={`/images/${image}`} alt="Gallery image" loading="lazy" />
+      <img src={`/images/${image}`} alt="Gallery image" loading="lazy" class="clickable" />
     ))}
   </div>
 
@@ -76,4 +71,36 @@ const images = files.slice(start, start + perPage);
       <a href={`/gallery/${currentPage + 1}`}>Next &raquo;</a>
     )}
   </nav>
+
+  <!-- Modal for Enlarged Image -->
+  <div id="modal" class="modal">
+    <span class="close">&times;</span>
+    <img class="modal-content" id="modal-img" alt="" src=""/>
+  </div>
+
+  <script>
+    document.addEventListener("DOMContentLoaded", () => {
+      const modal = document.getElementById("modal");
+      const modalImg = document.getElementById("modal-img");
+      const closeBtn = document.querySelector(".close");
+
+      document.querySelectorAll('.gallery-full img.clickable').forEach(img => {
+        img.addEventListener('click', () => {
+          modal.style.display = "flex"; // Use flex to center the content
+          modalImg.src = img.src;
+        });
+      });
+
+      closeBtn.addEventListener('click', () => {
+        modal.style.display = "none";
+      });
+
+      // Close modal when clicking outside the image
+      modal.addEventListener('click', (e) => {
+        if (e.target === modal) {
+          modal.style.display = "none";
+        }
+      });
+    });
+  </script>
 </Layout>

src/pages/gallery/index.astro

@@ -4,12 +4,17 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <!-- Immediately redirect to /gallery/1 -->
-    <meta http-equiv="refresh" content="0; url=/gallery/1" />
-    <link rel="canonical" href="/gallery/1" />
-    <title>Redirecting...</title>
+    <title>Loading Gallery...</title>
   </head>
   <body>
-    <p>Redirecting to <a href="/gallery/1">Gallery Page 1</a>...</p>
+    <div class="loading-modal">
+      <div class="spinner"></div>
+    </div>
+    <script>
+      // Redirect after a short delay (e.g., 300ms)
+      setTimeout(() => {
+        window.location.href = '/gallery/1';
+      }, 100);
+    </script>
   </body>
 </html>

src/utils/getImagesInfo.js

@@ -14,7 +14,7 @@ export function getImagesInfo(root = process.cwd()) {
   files.sort();
 
   // Set the number of images per page.
-  const perPage = 50;
+  const perPage = 48;
   const totalPages = Math.ceil(files.length / perPage);
 
   return { files, perPage, totalPages };