File manager - Edit - /home/asiatechinc/public_html/asiatech-websites/gurumaadental.com/gallery.php
Back
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Gallery - Guru Maa Advanced Dental Care (A Multi Speciality Dental Clinic)</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"> <link rel="shortcut icon" href="img/favicon.png" /> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/responsive.css"> </head> <body> <?php include 'include/header.php'?> <section class="breadcumb contact-bg"> <h3>Gallery</h3> </div> </section> <section class="section-padding gallery-section"> <div class="container"> <div class="gallery"> <img src="img/gallery/1.jpg" data-full="img/gallery/1.jpg" alt="Image 1"> <img src="img/gallery/2.jpg" data-full="img/gallery/2.jpg" alt="Image 2"> <img src="img/gallery/3.jpg" data-full="img/gallery/3.jpg" alt="Image 3"> <img src="img/gallery/4.jpg" data-full="img/gallery/4.jpg" alt="Image 4"> <img src="img/gallery/5.jpg" data-full="img/gallery/5.jpg" alt="Image 5"> <img src="img/gallery/6.jpg" data-full="img/gallery/6.jpg" alt="Image 6"> <img src="img/gallery/7.jpg" data-full="img/gallery/7.jpg" alt="Image 7"> <img src="img/gallery/8.jpg" data-full="img/gallery/8.jpg" alt="Image 8"> <img src="img/gallery/9.jpg" data-full="img/gallery/9.jpg" alt="Image 9"> <img src="img/gallery/10.jpg" data-full="img/gallery/10.jpg" alt="Image 10"> <img src="img/gallery/11.jpg" data-full="img/gallery/11.jpg" alt="Image 11"> <img src="img/gallery/12.jpg" data-full="img/gallery/12.jpg" alt="Image 12"> <img src="img/gallery/13.jpg" data-full="img/gallery/13.jpg" alt="Image 13"> <img src="img/gallery/14.jpg" data-full="img/gallery/14.jpg" alt="Image 14"> <img src="img/gallery/15.jpg" data-full="img/gallery/15.jpg" alt="Image 15"> <img src="img/gallery/16.jpg" data-full="img/gallery/16.jpg" alt="Image 16"> <!--<img src="img/gallery/17.jpg" data-full="img/gallery/17.jpg" alt="Image 17">--> <img src="img/gallery/18.jpg" data-full="img/gallery/18.jpg" alt="Image 18"> <img src="img/gallery/19.jpg" data-full="img/gallery/19.jpg" alt="Image 18"> <img src="img/gallery/20.jpg" data-full="img/gallery/20.jpg" alt="Image 18"> <img src="img/gallery/21.jpg" data-full="img/gallery/21.jpg" alt="Image 18"> </div> </div> </section> <div class="lightbox" id="lightbox"> <span class="close" id="close">×</span> <img id="lightbox-img" src="" alt="Full Image"> <div class="nav-buttons"> <span class="prev" id="prev">❮</span> <span class="next" id="next">❯</span> </div> </div> <!-- Full jQuery (not slim) --> <script> const gallery = document.querySelectorAll('.gallery img'); const lightbox = document.getElementById('lightbox'); const lightboxImg = document.getElementById('lightbox-img'); const closeBtn = document.getElementById('close'); const prevBtn = document.getElementById('prev'); const nextBtn = document.getElementById('next'); let currentIndex = 0; function openLightbox(index) { currentIndex = index; lightbox.style.display = 'flex'; lightboxImg.src = gallery[currentIndex].getAttribute('data-full'); } function closeLightbox() { lightbox.style.display = 'none'; } function showNext() { currentIndex = (currentIndex + 1) % gallery.length; lightboxImg.src = gallery[currentIndex].getAttribute('data-full'); } function showPrev() { currentIndex = (currentIndex - 1 + gallery.length) % gallery.length; lightboxImg.src = gallery[currentIndex].getAttribute('data-full'); } gallery.forEach((img, index) => { img.addEventListener('click', () => openLightbox(index)); }); closeBtn.addEventListener('click', closeLightbox); nextBtn.addEventListener('click', showNext); prevBtn.addEventListener('click', showPrev); // Close modal on clicking outside image lightbox.addEventListener('click', e => { if (e.target === lightbox) closeLightbox(); }); // Keyboard navigation document.addEventListener('keydown', e => { if (lightbox.style.display === 'flex') { if (e.key === 'ArrowRight') showNext(); if (e.key === 'ArrowLeft') showPrev(); if (e.key === 'Escape') closeLightbox(); } }); </script> <?php include 'include/footer.php'?> <script src="https://kit.fontawesome.com/your-kit-id.js" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script> <script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"></script> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script> </body> </html>
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.02 |
proxy
|
phpinfo
|
Settings