Mini Shell
<!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.0">
<title>Sri Aravindar College of Arts and Science | Quality Education in pondicherry - india</title>
<meta name="keywords" content="Sri Aravindar Arts and Science College ,Puducherry Arts College , Top Arts and Science colleges in Puducherry, Best colleges in Puducherry ">
<meta name="description" content="Sri Aravindar College of Arts and Science offers quality education in pondicherry , providing a range of undergraduate and postgraduate programs. Explore our campus and academic offerings today.">
<meta property="og:title" content="Sri Aravindar College of Arts and Science | Quality Education in pondicherry - india">
<meta property="og:description" content="Discover Sri Aravindar College of Arts and Science in pondicherry - india. Explore our range of undergraduate and postgraduate programs and our commitment to academic excellence.">
<meta property="og:url" content="https://www.aravindarcollege.com/">
<meta property="og:type" content="website">
<meta property="og:image" content="https://www.aravindarcollege.com/images/logo.jpg">
<link rel="icon" type="image/x-icon" href="assets/img/logo/favicon.png">
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/all-fontawesome.min.css">
<link rel="stylesheet" href="assets/css/animate.min.css">
<link rel="stylesheet" href="assets/css/magnific-popup.min.css">
<link rel="stylesheet" href="assets/css/owl.carousel.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<style>
.tags {
margin-bottom: 20px;
}
.tag {
padding: 10px 20px;
margin: 0 5px;
border: none;
background-color: var(--theme-color);
color: white;
cursor: pointer;
transition: background-color 0.3s;
}
.tag:hover {
background-color: var(--theme-color2);
}
.popup-gallery {
display: flex;
flex-wrap: wrap;
}
.gallery-item {
width: calc(33.333% - 10px);
/* Three items per row */
margin: 5px;
}
.gallery-item img {
width: 100%;
height: auto;
display: block;
}
@media (max-width: 768px) {
.gallery-item {
width: calc(50% - 10px);
/* Two items per row */
}
}
@media (max-width: 576px) {
.gallery-item {
width: 100%;
/* One item per row */
}
}
.gallery-item {
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
opacity: 1;
transform: scale(1);
}
.gallery-item.hide {
opacity: 0;
transform: scale(0.8);
pointer-events: none;
}
</style>
</head>
<body>
<?php $year_id = base64_decode($_GET['id']); ?>
<!-- header start -->
<?php include_once "tb-sec/header.php" ?>
<!-- header end -->
<main class="main year-photo">
<div class="gallery-area py-120">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 mx-auto">
<div class="site-heading text-center">
<span class="site-title-tagline"><i class="far fa-book-open-reader"></i> Gallery</span>
<h2 class="site-title">Our Photo <span>Gallery</span></h2>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
</div>
</div>
</div>
<div id="tag-slider" class="owl-carousel owl-theme tags text-center mb-4">
<button class="tag" data-tag="all">All</button>
<?php
$year_id = mysqli_real_escape_string($conn, base64_decode($_GET['id']));
$content_query = "SELECT DISTINCT category FROM tb1_gallery WHERE status = 1 AND year = '$year_id' ORDER BY category ASC";
$content_res = mysqli_query($conn, $content_query);
while ($content_row = mysqli_fetch_assoc($content_res)) {
$category = htmlspecialchars($content_row['category']);
?>
<button class="tag" data-tag="<?php echo strtolower(str_replace(' ', '-', $category)); ?>"><?php echo $category; ?></button>
<?php } ?>
</div>
<div class="popup-gallery ">
<div class="category-container row">
<?php
$content_query = "SELECT * FROM tb1_gallery WHERE status = 1 AND year = '$year_id' ORDER BY category ASC, gallery_id ASC";
$content_res = mysqli_query($conn, $content_query);
$current_category = null;
while ($content_row = mysqli_fetch_object($content_res)) {
$gallery_id = $content_row->gallery_id;
$status = $content_row->status;
$category = htmlspecialchars($content_row->category);
$img = htmlspecialchars($content_row->img); // Assuming 'img' is the column name for image path
$updated_at = $content_row->updated_log;
$updated_log = date('d-m-Y h:i:s A', strtotime($updated_at));
// Assuming you want to fetch CRM data for each gallery item
$crm_id = $content_row->crm_id;
$crm_query = "SELECT * FROM tb1_admin WHERE admin_id = '$crm_id'";
$crm_res = mysqli_query($conn, $crm_query);
$crm_row = mysqli_fetch_object($crm_res);
$crm_name = htmlspecialchars(strtolower($crm_row->name));
if ($category !== $current_category) {
if ($current_category !== null) {
// echo '</div>';
}
$current_category = $category;
// echo '<div class="category-container col-md-4" id="category-' . strtolower(str_replace(' ', '-', $category)) . '">';
// echo '<h2>' . $category . '</h2>';
}
?>
<div class="gallery-item wow col-lg-4 col-12 fadeInUp" data-wow-delay=".25s" data-tags="<?php echo strtolower(str_replace(' ', '-', $category)); ?>">
<div class="gallery-img">
<img src="./admin/dynamic_image/gallery/<?php echo $img; ?>" alt="<?php echo $category; ?>">
</div>
<div class="gallery-content">
<a class="popup-img gallery-link" href="./admin/dynamic_image/gallery/<?php echo $img; ?>"><i class="fal fa-plus"></i></a>
</div>
</div>
<?php } ?>
<!-- </div> -->
</div>
</div>
</div>
</div>
</main>
<?php include_once "tb-sec/fotter.php" ?>
<a href="#" id="scroll-top"><i class="far fa-arrow-up-from-arc"></i></a>
<script src="assets/js/jquery-3.7.1.min.js"></script>
<script src="assets/js/modernizr.min.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/imagesloaded.pkgd.min.js"></script>
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<script src="assets/js/isotope.pkgd.min.js"></script>
<script src="assets/js/jquery.appear.min.js"></script>
<script src="assets/js/jquery.easing.min.js"></script>
<script src="assets/js/owl.carousel.min.js"></script>
<script src="assets/js/counter-up.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/main.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const tags = document.querySelectorAll('.tag');
const galleryItems = document.querySelectorAll('.gallery-item');
tags.forEach(tag => {
tag.addEventListener('click', () => {
const selectedTag = tag.getAttribute('data-tag');
galleryItems.forEach(item => {
const itemTags = item.getAttribute('data-tags').split(' ');
if (selectedTag === 'all' || itemTags.includes(selectedTag)) {
// Hide the item initially
item.style.display = 'none';
// Show the item after a delay
setTimeout(() => {
item.style.display = 'block';
}, 200); // Change the delay time as needed (1000 milliseconds = 1 second)
} else {
item.style.display = 'none';
}
});
});
});
// Show all items by default
galleryItems.forEach(item => {
item.style.display = 'block';
});
});
</script>
</body>
</html>
Zerion Mini Shell 1.0