File manager - Edit - /home/asiatechinc/public_html/asiatechinc-websites/themaitreyaladakh.com/gallery.php
Back
<!doctype html> <html lang="zxx"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="assets/css/bootstrap.min.css"> <link rel="stylesheet" href="assets/css/owl.theme.default.min.css"> <link rel="stylesheet" href="assets/css/owl.carousel.min.css"> <link rel="stylesheet" href="assets/css/boxicons.min.css"> <link rel="stylesheet" href="assets/css/flaticon.css"> <link rel="stylesheet" href="assets/css/meanmenu.min.css"> <link rel="stylesheet" href="assets/css/animate.min.css"> <link rel="stylesheet" href="assets/css/nice-select.min.css"> <link rel="stylesheet" href="assets/css/odometer.min.css"> <link rel="stylesheet" href="assets/css/date-picker.min.css"> <link rel="stylesheet" href="assets/css/magnific-popup.min.css"> <link rel="stylesheet" href="assets/css/beautiful-fonts.css"> <link rel="stylesheet" href="assets/css/style.css"> <link rel="stylesheet" href="assets/css/responsive.css"> <link rel="icon" type="image/png" href="assets/img/favicon.png"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <title>Gallery - The Maitreya Ladakh</title> <style> .lightbox-modal .carousel-control-next { background: transparent; } .lightbox-modal .carousel-control-prev{ background: transparent; } .w-100 { width: 60%!important; } .lightbox-modal .carousel-indicators [data-bs-target] { display: none; } img{ width: 100%; } </style> </head> <body> <div class="preloader"> <div class="lds-ripple"> <div></div> <div></div> </div> </div> <?php include 'include/header.php';?> <div class="page-title-area"> <div class="container"> <div class="page-title-content"> <h2>Gallery</h2> <ul> <li> <a href="index.php"> Home </a> </li> <li>Gallery</li> </ul> </div> </div> </div> <section class="image-grid pt-60 pb-60"> <div class="container"> <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4"> <div class="col"> <a class="d-block" href="assets/img/gallery/1.jpg"> <img src="assets/img/gallery/1.jpg" class="img-fluid" > </a> </div> <div class="col"> <a class="d-block" href="assets/img/gallery/2.jpg"> <img src="assets/img/gallery/2.jpg" class="img-fluid" > </a> </div> <div class="col"> <a class="d-block" href="assets/img/gallery/3.jpg"> <img src="assets/img/gallery/3.jpg" class="img-fluid" > </a> </div> <div class="col"> <a class="d-block" href="assets/img/gallery/4.jpg"> <img src="assets/img/gallery/4.jpg" class="img-fluid" > </a> </div> <div class="col"> <a class="d-block" href="assets/img/gallery/5.jpg"> <img src="assets/img/gallery/5.jpg" class="img-fluid" > </a> </div> <div class="col"> <a class="d-block" href="assets/img/gallery/6.jpg"> <img src="assets/img/gallery/6.jpg" class="img-fluid" > </a> </div> <div class="col"> <a class="d-block" href="assets/img/gallery/7.jpg"> <img src="assets/img/gallery/7.jpg" class="img-fluid" > </a> </div> <div class="col"> <a class="d-block" href="assets/img/gallery/8.jpg"> <img src="assets/img/gallery/8.jpg" class="img-fluid" > </a> </div> <div class="col"> <a class="d-block" href="assets/img/gallery/9.jpg"> <img src="assets/img/gallery/9.jpg" class="img-fluid" > </a> </div> <div class="col"> <a class="d-block" href="assets/img/gallery/10.jpg"> <img src="assets/img/gallery/10.jpg" class="img-fluid" > </a> </div> <div class="col"> <a class="d-block" href="assets/img/gallery/11.jpg"> <img src="assets/img/gallery/11.jpg" class="img-fluid" > </a> </div> <div class="col"> <a class="d-block" href="assets/img/gallery/12.jpg"> <img src="assets/img/gallery/12.jpg" class="img-fluid" > </a> </div> <div class="col"> <a class="d-block" href="assets/img/gallery/13.jpg"> <img src="assets/img/gallery/13.jpg" class="img-fluid" > </a> </div> <div class="col"> <a class="d-block" href="assets/img/gallery/14.jpg"> <img src="assets/img/gallery/14.jpg" class="img-fluid" > </a> </div> <div class="col"> <a class="d-block" href="assets/img/gallery/15.jpg"> <img src="assets/img/gallery/15.jpg" class="img-fluid" > </a> </div> </div> </div> </section> <div class="modal fade lightbox-modal" id="lightbox-modal" tabindex="-1"> <div class="modal-dialog modal-dialog-centered modal-fullscreen"> <div class="modal-content"> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <div class="modal-body"> <div class="container-fluid p-0"> <!-- JS content here --> </div> </div> </div> </div> </div> <?php include 'include/footer.php';?> <div class="go-top"> <i class='bx bx-chevrons-up bx-fade-up'></i> <i class='bx bx-chevrons-up bx-fade-up'></i> </div> <script data-cfasync="false" src="../../cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script src="assets/js/jquery.min.js"></script> <script src="assets/js/bootstrap.bundle.min.js"></script> <script src="assets/js/meanmenu.min.js"></script> <script src="assets/js/owl.carousel.min.js"></script> <script src="assets/js/wow.min.js"></script> <script src="assets/js/nice-select.min.js"></script> <script src="assets/js/magnific-popup.min.js"></script> <script src="assets/js/jquery.mixitup.min.js"></script> <script src="assets/js/appear.min.js"></script> <script src="assets/js/odometer.min.js"></script> <script src="assets/js/bootstrap-datepicker.min.js"></script> <script src="assets/js/ofi.min.js"></script> <script src="assets/js/jarallax.min.js"></script> <script src="assets/js/form-validator.min.js"></script> <script src="assets/js/contact-form-script.js"></script> <script src="assets/js/ajaxchimp.min.js"></script> <script src="assets/js/custom.js"></script> <script> const imageGrid = document.querySelector(".image-grid"); const links = imageGrid.querySelectorAll("a"); const imgs = imageGrid.querySelectorAll("img"); const lightboxModal = document.getElementById("lightbox-modal"); const bsModal = new bootstrap.Modal(lightboxModal); const modalBody = document.querySelector(".modal-body .container-fluid"); function createCaption(caption) { return `<div class="carousel-caption d-none d-md-block"> <h4 class="m-0">${caption}</h4> </div>`; } function createIndicators(img) { let markup = "", i, len; const countSlides = links.length; const parentCol = img.parentElement.parentElement; const curIndex = [...parentCol.parentElement.children].indexOf(parentCol); for (i = 0, len = countSlides; i < len; i++) { markup += ` <button type="button" data-bs-target="#lightboxCarousel" data-bs-slide-to="${i}" ${i === curIndex ? 'class="active" aria-current="true"' : ''} aria-label="Slide ${i + 1}"> </button>`; } return markup; } function createSlides(img) { let markup = ""; const currentImgSrc = img.parentElement.getAttribute("href"); for (const img of imgs) { const imgSrc = img.parentElement.getAttribute("href"); const imgAlt = img.getAttribute("alt"); markup += ` <div class="carousel-item${currentImgSrc === imgSrc ? " active" : ""}"> <img class="img-fluid w-100" src=${imgSrc} alt="${imgAlt}"> ${imgAlt ? createCaption(imgAlt) : ""} </div>`; } return markup; } function createCarousel(img) { const markup = ` <div id="lightboxCarousel" class="carousel slide carousel-fade"> <div class="carousel-indicators"> ${createIndicators(img)} </div> <div class="carousel-inner justify-content-center mx-auto"> ${createSlides(img)} </div> <button class="carousel-control-prev" type="button" data-bs-target="#lightboxCarousel" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#lightboxCarousel" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> `; modalBody.innerHTML = markup; } for (const link of links) { link.addEventListener("click", function (e) { e.preventDefault(); const currentImg = link.querySelector("img"); const lightboxCarousel = document.getElementById("lightboxCarousel"); if (lightboxCarousel) { const parentCol = link.parentElement; const index = [...parentCol.parentElement.children].indexOf(parentCol); const bsCarousel = new bootstrap.Carousel(lightboxCarousel); bsCarousel.to(index); } else { createCarousel(currentImg); } bsModal.show(); }); } </script> </body> </html>
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.04 |
proxy
|
phpinfo
|
Settings