<?php require_once "includes/sessions.php";
$Websettingsz1 = new Websettings();
$Webfooter_get1= $Websettingsz1->getAllContacts();
$webfooter_row1= $Webfooter_get1->fetch(PDO::FETCH_ASSOC);
$Websettings_get_about1= $Websettingsz1->getAllAbout();
$web_row_about1= $Websettings_get_about1->fetch(PDO::FETCH_ASSOC);
$Webslide_get= $Websettingsz1->getAllSlide();
$webslide_row= $Webslide_get->fetch(PDO::FETCH_ASSOC);
$bg = 'admin/panel/uploads/slides/'.DecryptInput($webslide_row['image1']);
$active="About Us";
?><!doctype html>
<html class="no-js" lang="zxx">
<head>
<title>Z Village Lodge - Zanzibar - Book Your Garden view Lodge in Paje</title>
<?php include_once("includes/meta.includes.php");?>
<style>
/* CSS for the image popup */
.popup {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 9999;
text-align: center;
overflow: auto; /* Enable scrolling within the popup */
}
.popup img {
max-width: 80%;
max-height: 80%;
margin: 5% auto;
border: 3px solid #fff;
border-radius: 5px;
}
.close {
position: absolute;
top: 15px;
right: 15px;
color: #fff;
font-size: 30px;
cursor: pointer;
}
</style>
</head>
<body>
<!--[if lte IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->
<!-- preloader start -->
<!-- <div id="preloader">
<div class="preloader-close">x</div>
<div class="sk-three-bounce">
<div class="sk-child sk-bounce1"></div>
<div class="sk-child sk-bounce2"></div>
<div class="sk-child sk-bounce3"></div>
</div>
</div> -->
<!-- preloader start -->
<!-- Backtotop start -->
<div class="backtotop-wrap cursor-pointer">
<svg class="backtotop-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
<path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
</svg>
</div>
<!-- Backtotop end -->
<!-- Offcanvas area start -->
<!-- Offcanvas area start -->
<?php include_once("includes/Offcanvas.includes.php");?>
<!-- Offcanvas area start -->
<!-- Header area start -->
<?php include_once("includes/header-2.includes.php");?>
<!-- Body main wrapper start -->
<main>
<div class="breadcrumb__area dark-green breadcrumb-space overflow-hidden position-relative z-1" data-background="<?=$bg;?>">
<div class="breadcrumb__shapes">
<img class="upDown" src="assets/imgs/breadcrumb/shape.png" alt="img not found">
</div>
<div class="container">
<div class="row align-items-center justify-content-between">
<div class="col-12">
<div class="breadcrumb__content">
<div class="breadcrumb__title-wrapper mb-15 mb-sm-10 mb-xs-5">
<h1 class="breadcrumb__title color-white wow fadeInLeft animated" data-wow-delay=".2s">Our Gallery</h1>
</div>
<div class="breadcrumb__menu wow fadeInLeft animated" data-wow-delay=".4s">
<nav>
<ul>
<li><span><a href="index.php">Home</a></span></li>
<li class="active"><span>Gallery</span></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--counter section-->
<section class="event__area section-space">
<div class="container">
<div class="row">
<div class="section2__title-wrapper mb-60">
<h2 class="section2__title-wrapper-title wow fadeInLeft animated" data-wow-delay=".3s">Our Lodge</h2>
</div>
</div>
<div class="row">
<div class="hotel__wrapper">
<div class="row mb-minus-30">
<?php
$ima2 = New Images();
$Blogget22= $ima2->getGalleryimages();
$Blogget33= $ima2->getGalleryimages();
$n=1;
while($img_row3 = $Blogget22->fetch(PDO::FETCH_ASSOC)){
$fl = "admin/panel/uploads/gallery/".DecryptInput($img_row3['pic']);
if (file_exists($fl)) {
$blogimageNamefile = $fl;
?>
<div class="col-xl-3 col-lg-4 col-md-6 col-sm-6">
<div class="hotel__item rr-pro-img mb-30">
<div class="hotel__thumb fix p-relative" style="height: 200px;">
<img src="<?=$blogimageNamefile;?>" alt="Image not found" class="gallery-img">
</div>
</div>
</div>
<?php
$n++;
}
}
?>
</div>
</div>
</div>
</div>
</section>
<!-- Popup div for image -->
<div class="popup" id="popup">
<span class="close" onclick="closePopup()">×</span>
<img id="popupImg">
</div>
<script>
// JavaScript for the image popup with navigation
const galleryImages = document.querySelectorAll('.gallery-img');
const popup = document.getElementById('popup');
const popupImg = document.getElementById('popupImg');
let currentImageIndex = 0;
galleryImages.forEach((img, index) => {
img.addEventListener('click', () => {
currentImageIndex = index;
showImage(index);
popup.style.display = 'block';
});
});
function showImage(index) {
if (index >= 0 && index < galleryImages.length) {
popupImg.src = galleryImages[index].src;
}
}
function closePopup() {
popup.style.display = 'none';
}
document.addEventListener('keydown', function(event) {
if (event.key === 'ArrowLeft') {
currentImageIndex = (currentImageIndex - 1 + galleryImages.length) % galleryImages.length;
showImage(currentImageIndex);
} else if (event.key === 'ArrowRight') {
currentImageIndex = (currentImageIndex + 1) % galleryImages.length;
showImage(currentImageIndex);
}
});
</script>
<!--cta-->
<section class="cta__area cta-2__area p-relative overflow-hidden">
<div class="cta__bg-img cta__bg-img-2 cta__bg-img-3" data-background="assets/imgs/cta/home-1-2cta.png"></div>
<div class="cta__content cta__content-2 wow fade-in-bottom" data-wow-delay="300ms">
<a
class="video-popup video-btn"
data-autoplay="true"
data-vbtype="video"
href="https://youtu.be/iyd7qUH3oH0">
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M26.0065 11.5382L8.28772 0.616071C7.0058 -0.173129 5.45594 -0.205941 4.14174 0.528297C2.82754 1.26242 2.04297 2.59959 2.04297 4.10492V25.8498C2.04297 28.1259 3.87695 29.9876 6.13106 29.9999L6.1494 30C6.85381 29.9999 7.58787 29.7791 8.27348 29.3608C8.82502 29.0243 8.99934 28.3044 8.66283 27.7529C8.32633 27.2013 7.60633 27.027 7.05496 27.3635C6.73428 27.5591 6.42109 27.6603 6.14365 27.6602C5.29316 27.6556 4.38256 26.9271 4.38256 25.8498V4.10498C4.38256 3.45921 4.71912 2.88576 5.28279 2.57082C5.84652 2.25588 6.51127 2.26994 7.06047 2.60808L24.7793 13.5302C25.3118 13.8581 25.6166 14.4049 25.6153 15.0303C25.614 15.6557 25.307 16.2012 24.7715 16.528L11.9608 24.3718C11.4098 24.7092 11.2366 25.4293 11.5739 25.9803C11.9113 26.5313 12.6314 26.7045 13.1825 26.3671L25.9917 18.5243C27.2181 17.7761 27.9521 16.4718 27.955 15.035C27.9579 13.5984 27.2293 12.2911 26.0065 11.5382Z" fill="#AF8C3E"/>
</svg>
<div class="ripple"></div>
</a>
</div>
</section>
<!--our-service section-->
<?php include_once("includes/room-service.includes.php");?>
</main>
<div id="scroll-percentage"><span id="scroll-percentage-value"></span></div>
<!-- Footer area start -->
<?php include_once("includes/footer.includes.php");?>
</body>
<!-- Mirrored from html.sthemeit.com/boostay/about-us.html by HTTrack Website Copier/3.x [XR&CO'2014], Sun, 29 Dec 2024 09:29:49 GMT -->
</html>