Add lightbox for full-size image viewing

Clicking a card image now opens it full-screen in an overlay. Click anywhere or press Escape to close. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-06-05 22:16:54 +03:00
parent 27b36c36c4
commit 97e864bd06
1 changed files with 65 additions and 0 deletions
@@ -38,6 +38,47 @@ const adminUrl = `${apiUrl}/admin`;
      </section>
    </main>

+    <div class="lightbox" id="lightbox" aria-hidden="true">
+      <button class="lightbox-close" aria-label="Close">&times;</button>
+      <img id="lightbox-img" src="" alt="" />
+    </div>
+
+    <style>
+      .lightbox {
+        display: none;
+        position: fixed;
+        inset: 0;
+        z-index: 1000;
+        background: rgba(0, 0, 0, 0.9);
+        align-items: center;
+        justify-content: center;
+        cursor: zoom-out;
+      }
+      .lightbox.open {
+        display: flex;
+      }
+      .lightbox img {
+        max-width: 90vw;
+        max-height: 90vh;
+        object-fit: contain;
+        border-radius: 4px;
+      }
+      .lightbox-close {
+        position: absolute;
+        top: 16px;
+        right: 24px;
+        font-size: 2.5rem;
+        color: #fff;
+        background: none;
+        border: none;
+        cursor: pointer;
+        line-height: 1;
+      }
+      .photoCard img {
+        cursor: zoom-in;
+      }
+    </style>
+
    <script define:vars={{ apiUrl }}>
      const API = apiUrl;

@@ -83,6 +124,30 @@ const adminUrl = `${apiUrl}/admin`;
      }

      loadCards();
+
+      const lightbox = document.getElementById("lightbox");
+      const lightboxImg = document.getElementById("lightbox-img");
+
+      document.getElementById("board").addEventListener("click", (e) => {
+        const img = e.target.closest(".photoCard img");
+        if (!img) return;
+        lightboxImg.src = img.src;
+        lightboxImg.alt = img.alt;
+        lightbox.classList.add("open");
+        lightbox.setAttribute("aria-hidden", "false");
+      });
+
+      lightbox.addEventListener("click", () => {
+        lightbox.classList.remove("open");
+        lightbox.setAttribute("aria-hidden", "true");
+      });
+
+      document.addEventListener("keydown", (e) => {
+        if (e.key === "Escape" && lightbox.classList.contains("open")) {
+          lightbox.classList.remove("open");
+          lightbox.setAttribute("aria-hidden", "true");
+        }
+      });
    </script>
  </body>
 </html>