images overhaul - shared resource

Author: T-Ash-90

assets/css/styles.css

@@ -210,6 +210,38 @@ section {
     color: #555;
 }
 
+#lightbox-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.9);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+  animation: fadeIn 0.2s ease;
+}
+
+.lightbox-image {
+  max-width: 90%;
+  max-height: 90%;
+  box-shadow: 0 0 30px rgba(255,255,255,0.2);
+  border-radius: 4px;
+}
+
+.lightbox-close {
+  position: absolute;
+  top: 20px;
+  right: 30px;
+  font-size: 40px;
+  color: white;
+  cursor: pointer;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
 /* ---------------- Contact Info ---------------- */
 .contact-info {
     font-family: 'Lora', serif;

assets/images/tom2.jpg

@@ -24,26 +24,7 @@ <h1>Fotogalerie</h1>
         <p class="tagline">Einblicke in Auftritte und Momente von Tom Ash</p>
     </header>
 
-    <section class="gallery-list">
-        <figure>
-            <img src="/assets/images/tom1.jpg" alt="Tom Ash 1">
-        </figure>
-        <figure>
-            <img src="/assets/images/tom2.jpg" alt="Tom Ash 2">
-        </figure>
-        <figure>
-            <img src="/assets/images/tom3.jpg" alt="Tom Ash 3">
-        </figure>
-        <figure>
-            <img src="/assets/images/tom4.jpg" alt="Tom Ash 4">
-        </figure>
-        <figure>
-            <img src="/assets/images/tom5.jpg" alt="Tom Ash 5">
-        </figure>
-        <figure>
-            <img src="/assets/images/tom6.jpg" alt="Tom Ash 6">
-        </figure>
-    </section>
+    <section class="gallery-list" id="gallery-placeholder"></section>
 
     <section class="music-links">
         <a href="https://tomashlive.bandcamp.com/" target="_blank" class="music-item">
@@ -57,6 +38,41 @@ <h1>Fotogalerie</h1>
         </a>
     </section>
 
+    <script>
+      fetch('/shared/images-list.html')
+        .then(response => response.text())
+        .then(data => {
+          document.getElementById('gallery-placeholder').innerHTML = data;
+          initLightbox();
+        })
+        .catch(error => console.error('Error loading gallery:', error));
+
+
+      function initLightbox() {
+        const images = document.querySelectorAll('#gallery-placeholder img');
+
+        images.forEach(img => {
+          img.style.cursor = "pointer";
+          img.addEventListener("click", () => openLightbox(img.src));
+        });
+      }
+
+      function openLightbox(src) {
+        const overlay = document.createElement("div");
+        overlay.id = "lightbox-overlay";
+        overlay.innerHTML = `
+          <span class="lightbox-close">&times;</span>
+          <img src="${src}" class="lightbox-image">
+        `;
+
+        document.body.appendChild(overlay);
+
+        overlay.addEventListener("click", () => {
+          overlay.remove();
+        });
+      }
+    </script>
+
     <script src="/assets/js/load-nav.js"></script>
 
 </body>

assets/images/tom4.jpg

@@ -44,7 +44,7 @@
 
     <section class="video">
         <iframe
-            src="https://www.youtube.com/embed/AHMbB0CLAcE"
+            src="https://www.youtube.com/embed/usY3I9VkljE"
             title="Tom Ash Live Performance"
             frameborder="0"
             allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"