File manager - Edit - /home/asiatechinc/public_html/asiatech-websites/radhepalace.com/gallery.php
Back
<!DOCTYPE html> <html lang="en" data-x="html" data-x-toggle="html-overflow-hidden"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Jost:wght@400;500;600;700&display=swap" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="css/vendors.css"> <link rel="stylesheet" href="css/main.css"> <title>Gallery - Radhe Palace</title> <style> /* Simple styling for gallery */ .gallery-item { cursor: pointer; } .gallery-thumb { overflow: hidden; border-radius: .5rem; } .gallery-thumb img { transition: transform .35s ease; width:100%; height:400px; object-fit:cover; display:block; } .gallery-thumb:hover img { transform: scale(1.06); } .modal-img { max-height: 80vh; width: auto; } @media (max-width: 576px) { .gallery-thumb img { height:140px; } } </style> </head> <body> <?php include 'include/header.php'?> <main> <section data-anim-wrap class="hero -type-6"> <div data-anim-child="img-right cover-light-1 delay-2" class="hero__bg rounded-16"> <img src="img/hero/1/banner.jpg" alt="image" class="img-ratio"> </div> <div class="container"> <div class="row justify-center"> <div class="col-auto"> <div data-split='lines' data-anim="split-lines delay-3" class="pageHero__content text-center"> <h1 class="pageHero__title lh-11 capitalize text-white"> Gallery </h1> </div> </div> </div> </div> </section> <div class="container mt-60"> <!-- Gallery grid --> <div class="row g-3" id="gallery"> <!-- Each item uses data attributes to feed modal --> <!-- Replace the sample image URLs with your real images --> <div class="col-6 col-sm-4 col-md-3"> <div class="gallery-item" data-index="0" data-title="" data-source="img/gallery/1.jpg"> <div class="gallery-thumb shadow-sm bg-light"> <img loading="lazy" src="img/gallery/1.jpg" alt=""> </div> </div> </div> <div class="col-6 col-sm-4 col-md-3"> <div class="gallery-item" data-index="1" data-title="" data-source="img/gallery/2.jpg"> <div class="gallery-thumb shadow-sm bg-light"> <img loading="lazy" src="img/gallery/2.jpg" alt=""> </div> </div> </div> <div class="col-6 col-sm-4 col-md-3"> <div class="gallery-item" data-index="2" data-title="" data-source="img/gallery/3.jpg"> <div class="gallery-thumb shadow-sm bg-light"> <img loading="lazy" src="img/gallery/3.jpg" alt=""> </div> </div> </div> <div class="col-6 col-sm-4 col-md-3"> <div class="gallery-item" data-index="3" data-title="" data-source="img/gallery/4.jpg"> <div class="gallery-thumb shadow-sm bg-light"> <img loading="lazy" src="img/gallery/4.jpg" alt=""> </div> </div> </div> <div class="col-6 col-sm-4 col-md-3"> <div class="gallery-item" data-index="4" data-title="" data-source="img/gallery/5.jpg"> <div class="gallery-thumb shadow-sm bg-light"> <img loading="lazy" src="img/gallery/5.jpg" alt=""> </div> </div> </div> <div class="col-6 col-sm-4 col-md-3"> <div class="gallery-item" data-index="5" data-title="" data-source="img/gallery/6.jpg"> <div class="gallery-thumb shadow-sm bg-light"> <img loading="lazy" src="img/gallery/6.jpg" alt=""> </div> </div> </div> <div class="col-6 col-sm-4 col-md-3"> <div class="gallery-item" data-index="6" data-title="" data-source="img/gallery/7.jpg"> <div class="gallery-thumb shadow-sm bg-light"> <img loading="lazy" src="img/gallery/7.jpg" alt=""> </div> </div> </div> <div class="col-6 col-sm-4 col-md-3"> <div class="gallery-item" data-index="7" data-title="" data-source="img/gallery/8.jpg"> <div class="gallery-thumb shadow-sm bg-light"> <img loading="lazy" src="img/gallery/8.jpg" alt=""> </div> </div> </div> <div class="col-6 col-sm-4 col-md-3"> <div class="gallery-item" data-index="7" data-title="" data-source="img/gallery/9.jpg"> <div class="gallery-thumb shadow-sm bg-light"> <img loading="lazy" src="img/gallery/9.jpg" alt=""> </div> </div> </div> <div class="col-6 col-sm-4 col-md-3"> <div class="gallery-item" data-index="7" data-title="" data-source="img/gallery/10.jpg"> <div class="gallery-thumb shadow-sm bg-light"> <img loading="lazy" src="img/gallery/10.jpg" alt=""> </div> </div> </div> <div class="col-6 col-sm-4 col-md-3"> <div class="gallery-item" data-index="7" data-title="" data-source="img/gallery/11.jpg"> <div class="gallery-thumb shadow-sm bg-light"> <img loading="lazy" src="img/gallery/11.jpg" alt=""> </div> </div> </div> <div class="col-6 col-sm-4 col-md-3"> <div class="gallery-item" data-index="7" data-title="" data-source="img/gallery/12.jpg"> <div class="gallery-thumb shadow-sm bg-light"> <img loading="lazy" src="img/gallery/12.jpg" alt=""> </div> </div> </div> <div class="col-6 col-sm-4 col-md-3"> <div class="gallery-item" data-index="7" data-title="" data-source="img/gallery/13.jpg"> <div class="gallery-thumb shadow-sm bg-light"> <img loading="lazy" src="img/gallery/13.jpg" alt=""> </div> </div> </div> <div class="col-6 col-sm-4 col-md-3"> <div class="gallery-item" data-index="7" data-title="" data-source="img/gallery/14.jpg"> <div class="gallery-thumb shadow-sm bg-light"> <img loading="lazy" src="img/gallery/14.jpg" alt=""> </div> </div> </div> </div> <!-- Modal lightbox --> <div class="modal fade" id="lightboxModal" tabindex="-1" aria-hidden="true"> <div class="modal-dialog modal-fullscreen-sm-down modal-lg modal-dialog-centered"> <div class="modal-content bg-transparent border-0"> <div class="modal-body p-0 d-flex flex-column align-items-center"> <!-- <button type="button" class="btn-close btn-close-white position-absolute top-0 end-0 m-3" data-bs-dismiss="modal" aria-label="Close"></button>--> <div class="w-100 d-flex justify-content-center align-items-center position-relative"> <button id="prevBtn" class="btn btn-sm btn-dark position-absolute start-0 ms-2" aria-label="Previous">◀</button> <img id="lightboxImage" src="" alt="" class="img-fluid modal-img mx-auto"> <button id="nextBtn" class="btn btn-sm btn-dark position-absolute end-0 me-2" aria-label="Next">▶</button> </div> <div class="w-100 text-center mt-3"> <h5 id="lightboxTitle" class="text-white"></h5> <small id="lightboxCounter" class="text-muted"></small> </div> </div> </div> </div> </div> </div> <!-- Bootstrap 5 JS Bundle --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> <script> // Build an array of items from DOM const items = Array.from(document.querySelectorAll('.gallery-item')).map(el => ({ index: Number(el.dataset.index), title: el.dataset.title || '', src: el.dataset.source, thumb: el.querySelector('img')?.src || '' })); const lightboxModal = new bootstrap.Modal(document.getElementById('lightboxModal')); const lightboxImage = document.getElementById('lightboxImage'); const lightboxTitle = document.getElementById('lightboxTitle'); const lightboxCounter = document.getElementById('lightboxCounter'); let currentIndex = 0; // Open modal when clicking a gallery item document.getElementById('gallery').addEventListener('click', (e) => { const item = e.target.closest('.gallery-item'); if (!item) return; currentIndex = Number(item.dataset.index); showItem(currentIndex); lightboxModal.show(); }); function showItem(i) { const it = items.find(x => x.index === i); if (!it) return; // set image and title lightboxImage.src = it.src; lightboxImage.alt = it.title; lightboxTitle.textContent = it.title; lightboxCounter.textContent = `${i+1} of ${items.length}`; } // Prev / Next handlers document.getElementById('prevBtn').addEventListener('click', () => { currentIndex = (currentIndex - 1 + items.length) % items.length; showItem(currentIndex); }); document.getElementById('nextBtn').addEventListener('click', () => { currentIndex = (currentIndex + 1) % items.length; showItem(currentIndex); }); // Keyboard navigation document.addEventListener('keydown', (e) => { if (!document.querySelector('#lightboxModal')?.classList.contains('show')) return; if (e.key === 'ArrowLeft') document.getElementById('prevBtn').click(); if (e.key === 'ArrowRight') document.getElementById('nextBtn').click(); if (e.key === 'Escape') document.querySelector('[data-bs-dismiss="modal"]')?.click(); }); // Make sure large images fit and load gracefully lightboxImage.addEventListener('error', () => { lightboxImage.src = 'data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"800\" height=\"450\"><rect width=\"100%\" height=\"100%\" fill=\"%23ddd\"/><text x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" fill=\"%23666\" font-size=\"20\">Image not available</text></svg>'; }); // Optional: preload large image when thumbnail in viewport // (not necessary but improves UX) - simple lazy preload const io = new IntersectionObserver(entries => { entries.forEach(entry => { if (entry.isIntersecting) { const idx = Number(entry.target.dataset.index); const it = items.find(x => x.index === idx); if (it && !it._preloaded) { const img = new Image(); img.src = it.src; it._preloaded = true; } } }); }, { root: null, threshold: 0.2 }); document.querySelectorAll('.gallery-item').forEach(el => io.observe(el)); </script> <br><br> <?php include 'include/footer.php'?> </main> <!-- JavaScript --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAAz77U5XQuEME6TpftaMdX0bBelQxXRlM"></script> <script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <script src="js/vendors.js"></script> <script src="js/main.js"></script> </body> </html>
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.02 |
proxy
|
phpinfo
|
Settings