Current Directory: /home/aissorg/public_html
Viewing File: /home/aissorg/public_html/gallery.php
<?php
include 'admin/include/config.php'; // Database connection
// Fetch categories with names
$categoriesQuery = "SELECT id, title FROM gallery_category";
$categoriesResult = $con->query($categoriesQuery);
// Fetch images with category names using JOIN
$imagesQuery = "
SELECT gallery_images.id, gallery_images.cat_id, gallery_images.image, gallery_images.created_at, gallery_category.title
FROM gallery_images
JOIN gallery_category ON gallery_images.cat_id = gallery_category.id
ORDER BY gallery_images.created_at DESC";
$imagesResult = $con->query($imagesQuery);
?>
<!DOCTYPE html>
<html class="wide wow-animation" lang="en">
<head>
<title>Photo Gallery</title>
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width height=device-height initial-scale=1.0 maximum-scale=1.0 user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name='og:title' content='All India Sai Samaj'>
<meta name='og:type' content='Sai Baba Temple - Mylapore'>
<meta name='og:url' content='https://aiss.org.in/'>
<meta name='og:image' content='https://aiss.org.in/demo/img/favicon.png'>
<meta name='og:site_name' content='All India Sai Samaj'>
<meta name='og:description' content='In 1941 Sri Narasimhaswamiji created an organization named “All India Sai Samaj" in Chennai to serve as the center of activities of Sai Mission. During his tour in various towns several people became his followers and with the guidance of Sri Swamiji they started Sai Samajams, which were called upasamajams affiliated to the main body All India Sai Samaj.'>
<link rel='canonical' href='https://aiss.org.in/gallery.php' />
<link rel="icon" href="img/favicon.png" type="image/x-icon">
<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=Arimo:ital,wght@0,400..700;1,400..700&family=DM+Serif+Display&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/fonts.css">
<link rel="stylesheet" href="css/style.css" id="main-styles-link">
<link rel="stylesheet" href="css/about.css">
<link rel="stylesheet" href="css/custom.css">
<style>
.table thead {
background-color: #007bff;
color: white;
}
.table-bordered th, .table-bordered td {
border: 1px solid #dee2e6;
}
.table thead th {
border-bottom: 1px solid #aeb1be;
background-color: red;
color: #fff;
}
</style>
</head>
<body>
<div class="page">
<?php include('includes/header.php');?>
<?php
$sql = "SELECT image FROM inner_banner WHERE id = 3 LIMIT 1";
$result = mysqli_query($con, $sql);
$bannerImage = 'assets/img/gallery/about_banner.jpg'; // default fallback image
if ($row = mysqli_fetch_assoc($result)) {
$bannerImage = $row['image']; // e.g. 'img/custom_banner.jpg'
}
?>
<section class="breadcrumbs-custom bg-image context-dark" style="background-image: url('admin/assets/img/gallery/<?php echo ($bannerImage); ?>');">
<div class="breadcrumbs-custom-inner">
<div class="container breadcrumbs-custom-container">
<div class="breadcrumbs-custom-main">
<h3 class="breadcrumbs-custom-title" style="color: #fff;">Photo Gallery</h3>
</div>
<ul class="breadcrumbs-custom-path">
<li><a href="./">Home</a></li>
<li class="active">Gallery</li>
</ul>
</div>
</div>
</section>
<section class="section section-xs text-center bg-image context-dark" style="background-image: url('images/call-to-action.jpg')">
<div class="container">
<div class="row justify-content-center">
<div class="col-sm-10 col-md-12">
<div class="box-cta-thin">
<h4 class="wow-outer" style="color:#fff;"><span class="wow slideInRight">Join us in making a difference — Become a donor today!</h4>
<div class="wow-outer button-outer"><a class="button button-primary button-winona wow slideInLeft" href="donate-now.php">Donate Now</a></div>
</div>
</div>
</div>
</div>
</section>
<section class="section section-lg">
<div class="container">
<!-- Isotope Filters-->
<div class="isotope-filters isotope-filters-modern">
<button class="isotope-filters-toggle button button-sm button-primary" data-custom-toggle="#isotope-filters" data-custom-toggle-disable-on-blur="true">Filter<span class="caret"></span></button>
<ul class="isotope-filters-list" id="isotope-filters">
<li><a class="active" data-isotope-filter="*" data-isotope-group="portfolio" href="#">All Types</a></li>
<?php while ($category = $categoriesResult->fetch_assoc()) { ?>
<li><a data-isotope-filter="Type <?php echo $category['id']; ?>" data-isotope-group="portfolio" href="#"><?php echo $category['title']; ?></a></li>
<?php } ?>
</ul>
</div>
<div class="isotope isotope-responsive row isotope--loaded" data-isotope-layout="fitRows" data-isotope-group="portfolio" data-lightgallery="group">
<?php while ($image = $imagesResult->fetch_assoc()) { ?>
<div class="col-sm-6 col-lg-4 isotope-item" data-filter="Type <?php echo $image['cat_id']; ?>">
<a class="thumbnail-classic thumbnail-classic-sm" href="admin/assets/img/gallery/<?php echo $image['image']; ?>" data-lightgallery="item">
<img class="thumbnail-classic-image" src="admin/assets/img/gallery/<?php echo $image['image']; ?>" alt="" width="370" height="256">
<div class="thumbnail-classic-caption">
<p class="thumbnail-classic-title"><?php echo $image['title']; ?></p> <!-- Now showing category name -->
</div>
<div class="thumbnail-classic-dummy"></div>
</a>
</div>
<?php } ?>
</div>
</div>
</section>
<script>
$(document).ready(function(){
var $grid = $('.isotope').isotope({
itemSelector: '.isotope-item',
layoutMode: 'fitRows'
});
$('.isotope-filters-list').on('click', 'a', function(e){
e.preventDefault();
var filterValue = $(this).attr('data-isotope-filter');
$grid.isotope({ filter: filterValue });
$('.isotope-filters-list a').removeClass('active');
$(this).addClass('active');
});
});
</script>
<?php include('includes/footer.php'); ?>
</div>
<div class="snackbars" id="form-output-global"></div>
<script src="js/core.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>