File manager

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

Back
<!DOCTYPE html> <html lang="zxx"> <head> <!-- Meta --> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="robots" content="max-image-preview:large"> <!-- Page Title --> <title>Gallery \| Hotel Akshansh Inn</title> <!-- Favicon Icon --> <link rel="shortcut icon" type="image/x-icon" href="images/favicon.png"> <!-- Google Fonts Css--> <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=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap" rel="stylesheet"> <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=Nanum+Myeongjo&display=swap" rel="stylesheet"> <!-- Bootstrap Css --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <!-- Simple Line Icons Link --> <link rel="stylesheet" href="../cdn.jsdelivr.net/npm/simple-line-icons/css/simple-line-icons.css"> <!-- SlickNav Css --> <link href="css/slicknav.min.css" rel="stylesheet"> <!-- Swiper Css --> <link rel="stylesheet" href="css/swiper-bundle.min.css"> <!-- Font Awesome Icon Css--> <link href="css/all.css" rel="stylesheet" media="screen"> <!-- Animated Css --> <link href="css/animate.css" rel="stylesheet"> <!-- Magnific Popup Core Css File --> <link rel="stylesheet" href="css/magnific-popup.css"> <!-- Audio Css File --> <link rel="stylesheet" href="css/plyr.css"> <!-- Select2 Css File --> <link rel="stylesheet" href="css/select2.css"> <link rel="stylesheet" href="css/select2.min.css"> <!-- Flatpickr CSS --> <link rel="stylesheet" href="../cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css"> <!-- Main Custom Css --> <link href="css/custom.css" rel="stylesheet" media="screen"> <style> /* Gallery CSS / .gallery-section { padding: 60px 0; text-align: center; } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; } .gallery-item { overflow: hidden; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); cursor: pointer; transition: transform 0.3s ease; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; } .gallery-item:hover img { transform: scale(1.1); } / Lightbox CSS */ #lightbox { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.9); align-items: center; justify-content: center; } #lightbox-img { max-width: 90%; max-height: 90%; border-radius: 12px; } .close { position: absolute; top: 20px; right: 40px; color: white; font-size: 40px; cursor: pointer; } .prev, .next { cursor: pointer; position: absolute; top: 50%; color: white; font-size: 50px; padding: 10px; user-select: none; transform: translateY(-50%); } .prev { left: 30px; } .next { right: 30px; } .prev:hover, .next:hover { color: #ffca86; } </style> </head> <body> <?php include("include/header.php");?> <!-- Banner Section Start --> <div class="sisf-banner position-relative"> <div class="banner-img"> <figure> <img src="images/banner.jpg" alt=""> </figure> </div> <div class="sisf-page-title sisf-m sisf-title--standard sisf-alignment--center"> <div class="sisf-m-inner"> <div class="sisf-m-content sisf-content-grid "> <h1 class="sisf-m-title text-center entry-title">Gallery</h1> </div> </div> </div> </div> <!-- Banner Section End --> <!-- Gallery Section Start --> <!-- Gallery Section Start --> <section class="gallery-section section-bg"> <div class="container"> <h2 class="gallery-heading">Our Gallery</h2> <p class="gallery-subheading">Capturing Moments, Creating Memories</p> <div class="gallery-grid"> <!-- Gallery Items 1-20 --> <div class="gallery-item"><img src="images/gallery/1.jpg" alt="Gallery 1" onclick="openLightbox(0)"></div> <div class="gallery-item"><img src="images/gallery/2.jpg" alt="Gallery 2" onclick="openLightbox(1)"></div> <div class="gallery-item"><img src="images/gallery/3.jpg" alt="Gallery 3" onclick="openLightbox(2)"></div> <div class="gallery-item"><img src="images/gallery/4.jpg" alt="Gallery 4" onclick="openLightbox(3)"></div> <div class="gallery-item"><img src="images/gallery/5.jpg" alt="Gallery 5" onclick="openLightbox(4)"></div> <div class="gallery-item"><img src="images/gallery/6.jpg" alt="Gallery 6" onclick="openLightbox(5)"></div> <div class="gallery-item"><img src="images/gallery/7.jpg" alt="Gallery 7" onclick="openLightbox(6)"></div> <div class="gallery-item"><img src="images/gallery/8.jpg" alt="Gallery 8" onclick="openLightbox(7)"></div> <div class="gallery-item"><img src="images/gallery/9.jpg" alt="Gallery 9" onclick="openLightbox(8)"></div> <div class="gallery-item"><img src="images/gallery/10.jpg" alt="Gallery 10" onclick="openLightbox(9)"></div> <div class="gallery-item"><img src="images/gallery/11.jpg" alt="Gallery 11" onclick="openLightbox(10)"></div> <div class="gallery-item"><img src="images/gallery/12.jpg" alt="Gallery 12" onclick="openLightbox(11)"></div> <div class="gallery-item"><img src="images/gallery/13.jpg" alt="Gallery 13" onclick="openLightbox(12)"></div> <div class="gallery-item"><img src="images/gallery/14.jpg" alt="Gallery 14" onclick="openLightbox(13)"></div> <div class="gallery-item"><img src="images/gallery/15.jpg" alt="Gallery 15" onclick="openLightbox(14)"></div> <div class="gallery-item"><img src="images/gallery/16.jpg" alt="Gallery 16" onclick="openLightbox(15)"></div> <div class="gallery-item"><img src="images/gallery/17.jpg" alt="Gallery 17" onclick="openLightbox(16)"></div> <div class="gallery-item"><img src="images/gallery/18.jpg" alt="Gallery 18" onclick="openLightbox(17)"></div> <div class="gallery-item"><img src="images/gallery/19.jpg" alt="Gallery 19" onclick="openLightbox(18)"></div> <div class="gallery-item"><img src="images/gallery/20.jpg" alt="Gallery 20" onclick="openLightbox(19)"></div> </div> </div> </section> <!-- Lightbox Modal --> <div id="lightbox"> <span class="close" onclick="closeLightbox()">×</span> <img id="lightbox-img"> <a class="prev" onclick="changeSlide(-1)">❮</a> <a class="next" onclick="changeSlide(1)">❯</a> </div> <script>// Lightbox JS with navigation // JS Lightbox array for 20 images const galleryImages = []; for (let i = 1; i <= 20; i++) { galleryImages.push(`images/gallery/${i}.jpg`); } let currentSlide = 0; function openLightbox(index) { currentSlide = index; document.getElementById('lightbox').style.display = 'flex'; document.getElementById('lightbox-img').src = galleryImages[currentSlide]; } function closeLightbox() { document.getElementById('lightbox').style.display = 'none'; } function changeSlide(direction) { currentSlide += direction; if (currentSlide < 0) currentSlide = galleryImages.length - 1; if (currentSlide >= galleryImages.length) currentSlide = 0; document.getElementById('lightbox-img').src = galleryImages[currentSlide]; } // Close lightbox if clicked outside image document.getElementById('lightbox').addEventListener('click', function(e){ if(e.target.id === 'lightbox') closeLightbox(); }); </script> <?php include("include/footer.php");?> <!-- Jquery Library File --> <script src="js/jquery-3.7.1.min.js"></script> <!-- Bootstrap js file --> <script src="js/bootstrap.min.js"></script> <!-- Validator js file --> <script src="js/validator.min.js"></script> <!-- SlickNav js file --> <script src="js/jquery.slicknav.js"></script> <!-- Swiper js file --> <script src="js/swiper-bundle.min.js"></script> <!-- Counter js file --> <script src="js/jquery.waypoints.min.js"></script> <script src="js/jquery.counterup.min.js"></script> <!-- Magnific js file --> <script src="js/jquery.magnific-popup.min.js"></script> <!-- SmoothScroll --> <script src="js/SmoothScroll.js"></script> <!-- Parallax js --> <script src="js/parallaxie.js"></script> <!-- MagicCursor js file --> <script src="js/gsap.min.js"></script> <script src="js/magiccursor.js"></script> <!-- Text Effect js file --> <script src="js/SplitText.js"></script> <script src="js/ScrollTrigger.min.js"></script> <!-- YTPlayer js File --> <script src="js/jquery.mb.YTPlayer.min.js"></script> <!-- Audio js File --> <script src="js/plyr.js"></script> <!-- Wow js file --> <script src="js/wow.js"></script> <!-- Select2 js file --> <script src="js/select2.full.min.js"></script> <script src="js/ripple.min.js"></script> <!-- Flatpickr JS --> <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script> <!-- Main Custom js file --> <script src="js/function.js"></script> <!-- Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>

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