modal image

data/images.php

@@ -2,7 +2,7 @@
 
 $images = [
     ["file" => "01.jpg", "label" => "Kmen stromu", "keywords" => ["strom", "příroda"]],
-    ["file" => "02.jpg", "label" => "Mýtina v lese", "keywords" => ["les", "tráva"]],
+    ["file" => "02.jpg", "label" => "Mýtina v lese", "keywords" => ["strom", "les", "tráva"]],
     ["file" => "03.jpg", "label" => "", "keywords" => []],
     ["file" => "04.jpg", "label" => "", "keywords" => []],
     ["file" => "05.jpg", "label" => "Hlava s culíkem", "keywords" => ["vlasy", "cop"]],

include/gallery.php

@@ -1,30 +1,7 @@
 <?php
 
 require "data/images.php";
+include "include/modal.php";
+include "include/tiles.php";
 
 ?>
-<div class="row row-cols-md-6 row-cols-3">
-<?php
-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="...">
-        <div class="card-body">
-            <p class="card-text">
-                <?php
-                if ($image["label"]) {
-                    echo $image["label"];
-                }
-                else {
-                    echo $image["file"];
-                }
-                ?>
-            </p>
-        </div>
-    </div>
-</div>
-<?php
-}
-?>
-</div>

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/search.php

@@ -2,6 +2,7 @@
 
 if (isset($_GET["needle"])) {
     $needle = strtolower($_GET["needle"]);
+    $needle = trim($needle);
     echo "<p>Hledaný výraz: <b>" . $needle . "</b></p>";
 }
 else {
@@ -9,4 +10,17 @@ else {
     $needle = "";
 }
 
+require "data/images.php";
+
+$new_images = [];
+foreach ($images as $image) {
+    // kontrola, zda je hledaný je v poli keywords
+    if (in_array($needle, $image['keywords'])) {
+        $new_images[] = $image;
+    }
+}
+
+// var_dump($new_images);
+$images = $new_images;
+include "include/tiles.php";
 ?>

include/tiles.php

@@ -0,0 +1,30 @@
+<div class="row row-cols-md-6 row-cols-3">
+<?php
+foreach ($images as $image) {
+?>
+<div class="col">
+    <div class="card mb-3">
+        <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
+                if ($image["label"]) {
+                    echo $image["label"];
+                }
+                else {
+                    echo $image["file"];
+                }
+                ?>
+            </p>
+        </div>
+    </div>
+</div>
+<?php
+}
+?>
+</div>