modal image

include/gallery.php

@@ -1,6 +1,7 @@
 <?php
 
 require "data/images.php";
+include "include/modal.php";
 include "include/tiles.php";
 
 ?>

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>

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