Viewing file:  photo-gallery.php (4.49 KB) -rw-r--r--
Select action/file-type:
 (+) |  (+) |  (+) | Code (+) | Session (+) |  (+) | SDB (+) |  (+) |  (+) |  (+) |  (+) |  (+) |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>ITCE (INFYSYS TECHNOLOGIES COMPUTER EDUCATION )</title>
<meta name="description" content="">
<meta name="keywords" content="">
<!-- Favicons -->
<link href="assets/img/favicon.png" rel="icon">
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Fonts -->
<link href="https://fonts.googleapis.com" rel="preconnect">
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
<!-- Main CSS File -->
<link href="assets/css/main.css" rel="stylesheet">
</head>
<body class="index-page">
<?php include 'header.php'; ?>
<main class="main">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-10 col-md-12">
<div class="itce-container">
<div class="itce-container">
<div class="itce-facilities-container">
<?php
// Connect to the database
include 'admin/connect.php';
// Fetch all images
$result = $conn->query("SELECT * FROM gallery ORDER BY ID DESC");
?>
<!DOCTYPE html>
<html>
<head>
<title>Photo Gallery</title>
<!-- Lightbox2 CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/css/lightbox.min.css" rel="stylesheet" />
<style>
body {
font-family: Arial, sans-serif;
}
h2 {
margin-bottom: 30px;
text-align: center;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 20px;
padding: 0 30px;
}
.gallery a {
display: block;
width: 100%;
height: 400px;
overflow: hidden;
border: 4px solid #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
transition: transform 0.3s;
}
.gallery img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s;
}
.gallery a:hover img {
transform: scale(1.05);
}
.no-image {
color: #888;
text-align: center;
}
</style>
</head>
<body>
<h2>📷 Our Gallery</h2>
<div class="gallery">
<?php
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$photo = htmlspecialchars($row['photos']);
$path = "admin/slider/$photo";
echo "<a href='$path' data-lightbox='gallery'><img src='$path' alt='Photo'></a>";
}
} else {
echo "<p class='no-image'>No images found.</p>";
}
?>
</div>
</div>
</div>
</div>
</div>
</main>
<?php include 'footer.php'; ?>
<!-- Scroll Top -->
<a href="#" id="scroll-top" class="scroll-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
<!-- Preloader -->
<div id="preloader"></div>
<!-- Vendor JS Files -->
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<script src="assets/vendor/aos/aos.js"></script>
<script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
<script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
<script src="assets/vendor/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<!-- Main JS File -->
<script src="assets/js/main.js"></script>
</body>
</html>
|