From 0a6609969dcebf64cfb4f4758c1b714afe71ad40 Mon Sep 17 00:00:00 2001
From: Ivan Pomykacz <pomykacz@odbornaskola.cz>
Date: Wed, 8 Jan 2025 15:54:05 +0100
Subject: [PATCH] modal image

---
 include/gallery.php |  1 +
 include/modal.php   | 37 +++++++++++++++++++++++++++++++++++++
 include/tiles.php   |  7 ++++++-
 3 files changed, 44 insertions(+), 1 deletion(-)
 create mode 100644 include/modal.php

diff --git a/include/gallery.php b/include/gallery.php
index 524b58c..7334034 100644
--- a/include/gallery.php
+++ b/include/gallery.php
@@ -1,6 +1,7 @@
 <?php
 
 require "data/images.php";
+include "include/modal.php";
 include "include/tiles.php";
 
 ?>
diff --git a/include/modal.php b/include/modal.php
new file mode 100644
index 0000000..edac2f1
--- /dev/null
+++ b/include/modal.php
@@ -0,0 +1,37 @@
+<div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-fullscreen">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h1 class="modal-title fs-5" id="imageModalLabel">Modal title</h1>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        <div class="d-flex h-100 align-items-center justify-content-center">
+          <img src="" class="img-fluid" alt="Fotografie">
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  const galleryModal = document.getElementById('imageModal')
+  if (galleryModal) {
+    galleryModal.addEventListener('show.bs.modal', event => {
+      // Button that triggered the modal
+      const button = event.relatedTarget
+      // Extract info from data-bs-* attributes
+      const image = button.getAttribute('data-bs-image')
+      const label = button.getAttribute('data-bs-label')
+      // Update the modal's content.
+      const modalTitle = galleryModal.querySelector('.modal-title')
+      const modalImage = galleryModal.querySelector('.modal-body img')
+
+      modalTitle.textContent = label
+      modalImage.src = `/static/images/image_${image}`
+    })
+  }
+</script>
\ No newline at end of file
diff --git a/include/tiles.php b/include/tiles.php
index effe6fc..f8a374d 100644
--- a/include/tiles.php
+++ b/include/tiles.php
@@ -4,7 +4,12 @@ foreach ($images as $image) {
 ?>
 <div class="col">
     <div class="card mb-3">
-        <img src="/static/images/thumbs/thumb_<?php echo $image["file"]; ?>" class="card-img-top" alt="...">
+        <img 
+            data-bs-toggle="modal"
+            data-bs-target="#imageModal"
+            data-bs-image="<?php echo $image["file"]; ?>"
+            data-bs-label="<?php echo $image["label"]; ?>"
+            src="/static/images/thumbs/thumb_<?php echo $image["file"]; ?>" class="card-img-top" alt="...">
         <div class="card-body">
             <p class="card-text">
                 <?php