JezK
Edit File: gallery.php
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Image Gallery</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <style> .gallery-item { overflow: hidden; transition: transform 0.3s ease-in-out; cursor: pointer; } .gallery-item img { width: 100%; transition: transform 0.3s ease-in-out; border-radius: 10px; } .gallery-item:hover img { transform: scale(1.1); } #modalImage{ width: 100%; height: 100%; } .navbar-nav{ display: -webkit-box !important; height: 50px; } .dropdown{ width: 7rem !important; } .dropdown-menu{ width: 18rem !important; } .dropdown-toggle::after{ display: none !important; } </style> </head> <body> <?php include 'header.php'; ?> <div class="container mt-4"> <h2 class="text-center" style="font-weight:600; margin:2rem;font-size:20px;color:black">Image Gallery</h2> <div class="row"> <div class="col-lg-4 col-md-6 mb-4"> <div class="gallery-item" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="./images/01.webp"> <img src="./images/01.webp" class="img-fluid shadow"> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="gallery-item" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="./images/4-1.jpg"> <img src="./images/4-1.jpg" class="img-fluid shadow"> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="gallery-item" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="./images/02.webp"> <img src="./images/02.webp" class="img-fluid shadow"> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="gallery-item" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="./images/03.webp"> <img src="./images/03.webp" class="img-fluid shadow"> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="gallery-item" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="./images/09.webp"> <img src="./images/09.webp" class="img-fluid shadow"> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="gallery-item" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="./images/05.webp"> <img src="./images/05.webp" class="img-fluid shadow"> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="gallery-item" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="./images/04.webp"> <img src="./images/04.webp" class="img-fluid shadow"> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="gallery-item" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="./images/07.webp"> <img src="./images/07.webp" class="img-fluid shadow"> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="gallery-item" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="./images/06.webp"> <img src="./images/06.webp" class="img-fluid shadow"> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="gallery-item" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="./images/08.webp"> <img src="./images/08.webp" class="img-fluid shadow"> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="gallery-item" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="./images/4-6.jpg"> <img src="./images/4-6.jpg" class="img-fluid shadow"> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="gallery-item" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="./images/4-5.jpg"> <img src="./images/4-5.jpg" class="img-fluid shadow"> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="gallery-item" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="./images/04.jpg"> <img src="./images/04.jpg" class="img-fluid shadow"> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="gallery-item" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="./images/06.jpg"> <img src="./images/06.jpg" class="img-fluid shadow"> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="gallery-item" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="./images/07.jpg"> <img src="./images/07.jpg" class="img-fluid shadow"> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="gallery-item" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="./images/09.jpg"> <img src="./images/09.jpg" class="img-fluid shadow"> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="gallery-item" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="./images/4-7.jpg"> <img src="./images/4-7.jpg" class="img-fluid shadow"> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="gallery-item" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="./images/new/11.jpg"> <img src="./images/new/11.jpg" class="img-fluid shadow"> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="gallery-item" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="./images/new/16.jpg"> <img src="./images/new/16.jpg" class="img-fluid shadow"> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="gallery-item" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="./images/new/15.jpg"> <img src="./images/new/15.jpg" class="img-fluid shadow"> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="gallery-item" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="./images/new/11.jpg"> <img src="./images/new/11.jpg" class="img-fluid shadow"> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="gallery-item" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="./images/new/12.jpg"> <img src="./images/new/12.jpg" class="img-fluid shadow"> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="gallery-item" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="./images/new/new-1.png"> <img src="./images/new/new-1.png" class="img-fluid shadow"> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="gallery-item" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="./images/new/new-2.png"> <img src="./images/new/new-2.png" class="img-fluid shadow"> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="gallery-item" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="./images/new/new-3.png"> <img src="./images/new/new-3.png" class="img-fluid shadow"> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="gallery-item" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="./images/new/interns3.jpg"> <img src="./images/new/interns3.jpg" class="img-fluid shadow"> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="gallery-item" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="./images/new/015.jpg"> <img src="./images/new/015.jpg" class="img-fluid shadow"> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="gallery-item" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="./images/new/11.jpg"> <img src="./images/new/11.jpg" class="img-fluid shadow"> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="gallery-item" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="./images/new/2.jpg"> <img src="./images/new/2.jpg" class="img-fluid shadow"> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="gallery-item" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="./images/new/7.jpg"> <img src="./images/new/7.jpg" class="img-fluid shadow"> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="gallery-item" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="./images/new/4.jpg"> <img src="./images/new/4.jpg" class="img-fluid shadow"> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="gallery-item" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="./images/new/5.jpg"> <img src="./images/new/5.jpg" class="img-fluid shadow"> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="gallery-item" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="./images/new/6.jpg"> <img src="./images/new/6.jpg" class="img-fluid shadow"> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="gallery-item" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="./images/new/8.jpg"> <img src="./images/new/8.jpg" class="img-fluid shadow"> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="gallery-item" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="./images/new/9.jpg"> <img src="./images/new/9.jpg" class="img-fluid shadow"> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="gallery-item" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="./images/01.jpg"> <img src="./images/01.jpg" class="img-fluid shadow"> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="gallery-item" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="./images/02.jpg"> <img src="./images/02.jpg" class="img-fluid shadow"> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="gallery-item" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="./images/4-2.jpg"> <img src="./images/4-2.jpg" class="img-fluid shadow"> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="gallery-item" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="./images/4-3.jpg"> <img src="./images/4-3.jpg" class="img-fluid shadow"> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="gallery-item" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="./images/4-4.jpg"> <img src="./images/4-4.jpg" class="img-fluid shadow"> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="gallery-item" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="./images/4-5.jpg"> <img src="./images/4-5.jpg" class="img-fluid shadow"> </div> </div> </div> </div> <!-- Image Modal --> <div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-body text-center"> <img id="modalImage" class="img-fluid rounded"> </div> </div> </div> </div> <script> // Lightbox Modal Functionality let modalImage = document.getElementById('modalImage'); document.querySelectorAll('.gallery-item').forEach(item => { item.addEventListener('click', function() { modalImage.src = this.getAttribute('data-bs-img'); }); }); </script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <?php include 'footer.php'; ?> </body> </html>