File manager

File manager - Edit - /home/asiatechinc/public_html/asiatech-websites/silverpearlbeachresort.com/gallery.php

Back
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="author" content="wpOceans"> <link rel="shortcut icon" type="image/png" href="assets/images/favicon.png"> <title>Silver Pearl Beach Resort</title> <link href="assets/css/themify-icons.css" rel="stylesheet"> <link href="assets/css/font-awesome.min.css" rel="stylesheet"> <link href="assets/css/flaticon.css" rel="stylesheet"> <link href="assets/css/bootstrap.min.css" rel="stylesheet"> <link href="assets/css/animate.css" rel="stylesheet"> <link href="assets/css/owl.carousel.css" rel="stylesheet"> <link href="assets/css/owl.theme.css" rel="stylesheet"> <link href="assets/css/slick.css" rel="stylesheet"> <link href="assets/css/slick-theme.css" rel="stylesheet"> <link href="assets/css/swiper.min.css" rel="stylesheet"> <link href="assets/css/owl.transitions.css" rel="stylesheet"> <link href="assets/css/jquery.fancybox.css" rel="stylesheet"> <link href="assets/css/odometer-theme-default.css" rel="stylesheet"> <link href="assets/css/jquery-ui.css" rel="stylesheet"> <link href="assets/css/style.css" rel="stylesheet"> <style> @keyframes zoomin { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .gallery-item { display: block; } .gallery-item img { box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.15); transition: box-shadow 0.2s; } .gallery-item:hover img { box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.35); } .lightbox-modal .modal-content { background-color: var(--lightbox); } .lightbox-modal .btn-close { position: absolute; top: 1.25rem; right: 1.25rem; font-size: 1.25rem; z-index: 10; filter: invert(1) grayscale(100); } .lightbox-modal .modal-body { display: flex; align-items: center; padding: 0; } .lightbox-modal .lightbox-content { width: 100%; } .lightbox-modal .carousel-indicators { margin-bottom: 0; } .lightbox-modal .carousel-indicators [data-bs-target] { background-color: var(--carousel-text) !important; } .lightbox-modal .carousel-inner { width: 75%; } .lightbox-modal .carousel-inner img { animation: zoomin 10s linear infinite; width: 80% !important; margin: auto; } .lightbox-modal .carousel-item .carousel-caption { right: 0; bottom: 0; left: 0; padding-bottom: 2rem; background-color: var(--lightbox); color: var(--carousel-text) !important; } .lightbox-modal .carousel-control-prev, .lightbox-modal .carousel-control-next { width: auto; } .lightbox-modal .carousel-control-prev { left: 1.25rem; } .lightbox-modal .carousel-control-next { right: 1.25rem; } @media (min-width: 1400px) { .lightbox-modal .carousel-inner { max-width: 60%; } } [data-bs-theme = "dark"] .lightbox-modal .carousel-control-next-icon, [data-bs-theme = "dark"] .lightbox-modal .carousel-control-prev-icon { filter: none; } .main .container { display: grid; grid-template-columns: auto; grid-gap: 1rem; justify-content: center; align-items: center; } .gallery-grid{ display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; grid-column-gap: 0px; grid-row-gap: 0px; } .gallery-grid .col{ margin-bottom:20px; } .photo-gallery{ padding:40px 0; } @media only screen and (max-width: 600px) { .gallery-grid{ display: grid; grid-template-columns: repeat(1, 1fr); grid-template-rows: 1fr; grid-column-gap: 0px; grid-row-gap: 0px; } } </style> </head> <body> <!-- start page-wrapper --> <div class="page-wrapper"> <!-- start preloader --> <div class="preloader"> <div class="vertical-centered-box"> <div class="content"> <div class="loader-circle"></div> <div class="loader-line-mask"> <div class="loader-line"></div> </div> <img src="assets/images/preloader.png" alt=""> </div> </div> </div> <!-- end preloader --> <?php include 'include/header.php';?> <!-- start of breadcumb-section --> <div class="wpo-breadcumb-area"> <div class="container"> <div class="row"> <div class="col-12"> <div class="wpo-breadcumb-wrap"> <h2>Gallery</h2> <ul> <li><a href="index.php">Home</a></li> <li><span>Gallery</span></li> </ul> </div> </div> </div> </div> </div> <!-- end of wpo-breadcumb-section--> <main class="main"> <section class="photo-gallery"> <div class="container"> <div class="row gallery-grid"> <div class="col"> <a class="gallery-item" href="assets/images/gallery/1.jpg"> <img src="assets/images/gallery/1.jpg" class="img-fluid" alt=""> </a> </div> <div class="col"> <a class="gallery-item" href="assets/images/gallery/2.jpg"> <img src="assets/images/gallery/2.jpg" class="img-fluid" alt=""> </a> </div> <div class="col"> <a class="gallery-item" href="assets/images/gallery/3.jpg"> <img src="assets/images/gallery/3.jpg" class="img-fluid" alt=""> </a> </div> <div class="col"> <a class="gallery-item" href="assets/images/gallery/4.jpg"> <img src="assets/images/gallery/4.jpg" class="img-fluid" alt=""> </a> </div> <div class="col"> <a class="gallery-item" href="assets/images/gallery/5.jpg"> <img src="assets/images/gallery/5.jpg" class="img-fluid" alt=""> </a> </div> <div class="col"> <a class="gallery-item" href="assets/images/gallery/6.jpg"> <img src="assets/images/gallery/6.jpg" class="img-fluid" alt=""> </a> </div> <div class="col"> <a class="gallery-item" href="assets/images/gallery/7.jpg"> <img src="assets/images/gallery/7.jpg" class="img-fluid" alt=""> </a> </div> <div class="col"> <a class="gallery-item" href="assets/images/gallery/8.jpg"> <img src="assets/images/gallery/8.jpg" class="img-fluid" alt=""> </a> </div> <div class="col"> <a class="gallery-item" href="assets/images/gallery/9.jpg"> <img src="assets/images/gallery/9.jpg" class="img-fluid" alt=""> </a> </div> <div class="col"> <a class="gallery-item" href="assets/images/gallery/10.jpg"> <img src="assets/images/gallery/10.jpg" class="img-fluid" alt=""> </a> </div> <div class="col"> <a class="gallery-item" href="assets/images/gallery/11.jpg"> <img src="assets/images/gallery/11.jpg" class="img-fluid" alt=""> </a> </div> <div class="col"> <a class="gallery-item" href="assets/images/gallery/12.jpg"> <img src="assets/images/gallery/12.jpg" class="img-fluid" alt=""> </a> </div> <div class="col"> <a class="gallery-item" href="assets/images/gallery/13.jpg"> <img src="assets/images/gallery/13.jpg" class="img-fluid" alt=""> </a> </div> <div class="col"> <a class="gallery-item" href="assets/images/gallery/14.jpg"> <img src="assets/images/gallery/14.jpg" class="img-fluid" alt=""> </a> </div> <div class="col"> <a class="gallery-item" href="assets/images/gallery/15.jpg"> <img src="assets/images/gallery/15.jpg" class="img-fluid" alt=""> </a> </div> <div class="col"> <a class="gallery-item" href="assets/images/gallery/16.jpg"> <img src="assets/images/gallery/16.jpg" class="img-fluid" alt=""> </a> </div> <div class="col"> <a class="gallery-item" href="assets/images/gallery/17.jpg"> <img src="assets/images/gallery/17.jpg" class="img-fluid" alt=""> </a> </div> </div> </div> </section> </main> <?php include 'include/footer.php';?> </div> <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="lightbox-content"> <!-- JS content here --> </div> </div> </div> </div> </div> <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js'></script> <script src="assets/js/jquery.min.js"></script> <script src="assets/js/bootstrap.bundle.min.js"></script> <!-- Plugins for this template --> <script src="assets/js/modernizr.custom.js"></script> <script src="assets/js/jquery-plugin-collection.js"></script> <!-- Custom script for this template --> <script src="assets/js/script.js"></script> </body> </html> <script>const html = document.querySelector('html'); html.setAttribute('data-bs-theme', 'dark'); const galleryGrid = document.querySelector(".gallery-grid"); const links = galleryGrid.querySelectorAll("a"); const imgs = galleryGrid.querySelectorAll("img"); const lightboxModal = document.getElementById("lightbox-modal"); const bsModal = new bootstrap.Modal(lightboxModal); const modalBody = lightboxModal.querySelector(".lightbox-content"); 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.closest('.col'); 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.closest('.gallery-item').getAttribute("href"); for (const img of imgs) { const imgSrc = img.closest('.gallery-item').getAttribute("href"); const imgAlt = img.getAttribute("alt"); markup += ` <div class="carousel-item${currentImgSrc === imgSrc ? " active" : ""}"> <img class="d-block img-fluid w-100" src=${imgSrc} alt="${imgAlt}"> ${imgAlt ? createCaption(imgAlt) : ""} </div>`; } return markup; } function createCarousel (img) { const markup = ` <!-- Lightbox Carousel --> <div id="lightboxCarousel" class="carousel slide carousel-fade" data-bs-ride="true"> <!-- Indicators/dots --> <div class="carousel-indicators"> ${createIndicators(img)} </div> <!-- Wrapper for Slides --> <div class="carousel-inner justify-content-center mx-auto"> ${createSlides(img)} </div> <!-- Controls/icons --> <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.closest('.col'); const index = [...parentCol.parentElement.children].indexOf(parentCol); const bsCarousel = new bootstrap.Carousel(lightboxCarousel); bsCarousel.to(index); } else { createCarousel(currentImg); } bsModal.show(); }); }</script>

| ver. 1.4 | Github | . | PHP 7.4.33 | Generation time: 0.02 | proxy | phpinfo | Settings