D7net
Home
Console
Upload
information
Create File
Create Folder
About
Tools
:
/
home3
/
encodto1
/
attraction.encodersunlimited.com
/
Filename :
gallery.php
back
Copy
<!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, maximum-scale=1.0, user-scalable=0"> <title>Attraction | Gallery</title> <!-- Fav Icon --> <link rel="icon" href="assets/images/favicon.ico" type="image/x-icon"> <!-- Stylesheets --> <?php require('style.php'); ?> <style> /* Optional: Add some styling for filter buttons */ .filter-buttons { margin-bottom: 20px; } .filter-buttons .btn { margin: 5px; } </style> </head> <!-- page wrapper --> <body> <div class="boxed_wrapper"> <?php include 'header.php' ?> <!--Page Title--> <section class="page-title centred" style="background-image: url(assets/images/background/pagetitle.jpg);"> <div class="auto-container"> <div class="title-box"> <span class="title-text">Gallery</span> <h1></h1> </div> </div> </section> <!--End Page Title--> <!-- gallery-page-section --> <?php // Include database connection include 'config.php'; // Fetch data from the gallery table $query = "SELECT id, image, category FROM gallery"; $result = mysqli_query($conn, $query); if (!$result) { die("Query Failed: " . mysqli_error($conn)); } // Prepare categories dynamically $categories = []; while ($row = mysqli_fetch_assoc($result)) { $categories[] = $row['category']; } $categories = array_unique($categories); // Reset the result pointer to fetch rows again mysqli_data_seek($result, 0); ?> <section class="gallery-page-section"> <div class="auto-container"> <!-- Filter Buttons --> <div class="filter-buttons text-center mb-4"> <button class="btn btn-dark filter-btn" data-filter="all">All</button> <?php foreach ($categories as $category) { ?> <button class="btn btn-dark filter-btn" data-filter="<?php echo htmlspecialchars($category); ?>"> <?php echo htmlspecialchars($category); ?> </button> <?php } ?> </div> <div class="row clearfix gallery-container"> <?php while ($row = mysqli_fetch_assoc($result)) { ?> <div class="col-lg-4 col-md-6 col-sm-12 gallery-block <?php echo htmlspecialchars($row['category']); ?>"> <div class="gallery-block-one wow fadeInUp animated" data-wow-delay="00ms" data-wow-duration="1500ms"> <div class="inner-box"> <figure class="image-box"> <img src="attadminraction/uploads/<?php echo htmlspecialchars($row['image']); ?>" alt="Gallery Image"> <a href="attadminraction/uploads/<?php echo htmlspecialchars($row['image']); ?>" class="lightbox-image" data-fancybox="gallery"> <i class="flaticon-plus-1"></i> </a> </figure> </div> </div> </div> <?php } ?> </div> </div> </section> <?php // Close the database connection mysqli_close($conn); ?> <!-- gallery-page-section end --> <!-- main-footer --> <footer class="main-footer"> <div class="footer-top"> <div class="pattern-layer" style="background-image: url(assets/images/shape/shape-6.png);"></div> <div class="auto-container"> <div class="widget-section"> <div class="row clearfix"> <div class="col-lg-4 col-md-6 col-sm-12 footer-column"> <div class="footer-widget logo-widget"> <figure class="footer-logo"><a href="index.php"><img src="assets/images/atttttlogo-white.png" alt=""></a></figure> <div class="text"> <p>There are many variations of passages of lorem ipsum available, but the majority have suffered alteration in some form.</p> </div> <form action="https://azim.commonsupport.com/Mremot/contact.php" method="post" class="subscribe-form"> <div class="form-group"> <input type="email" name="email" placeholder="Email address" required=""> <button type="submit">GO</button> </div> </form> </div> </div> <div class="col-lg-2 col-md-6 col-sm-12 footer-column"> <div class="footer-widget links-widget"> <div class="widget-title"> <h5>Links</h5> </div> <div class="widget-content"> <ul class="links-list clearfix"> <li><a href="index.php">About Us</a></li> <li><a href="index.php">Book Online</a></li> <li><a href="index.php">Meet Our Team</a></li> <li><a href="index.php">Certifications</a></li> <li><a href="index.php">Contact Us</a></li> </ul> </div> </div> </div> <div class="col-lg-3 col-md-6 col-sm-12 footer-column"> <div class="footer-widget contact-widget"> <div class="widget-title"> <h5>Contact</h5> </div> <div class="widget-content"> <ul class="info-list clearfix"> <li> <i class="flaticon-phone-call"></i> <p><a href="tel:6668880000">666 888 0000</a></p> </li> <li> <i class="flaticon-email-2"></i> <p><a href="mailto:needhelp@company.com">info@attraction.com</a></p> </li> <li> <i class="flaticon-maps-and-flags"></i> <p>City Mall Basement,Sevoke Road, Siliguri, India, West Bengal</p> </li> </ul> </div> </div> </div> <div class="col-lg-3 col-md-6 col-sm-12 footer-column"> <div class="footer-widget instagram-widget"> <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fattractionstylelounge&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=1052030032959673" width="340" height="300" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe> </div> </div> </div> </div> </div> </div> <div class="footer-botton"> <div class="auto-container clearfix"> <div class="copyright pull-left"> <p>© Copyright 2024 by <a href="index.php">Attraction</a></p> </div> <ul class="footer-social pull-right clearfix"> <li>Develop by Encoders Unlimited</i></a></li> </ul> </div> </div> </footer> <!-- main-footer end --> <!--Scroll to top--> <button class="scroll-top scroll-to-target" data-target="html"> <span class="fa fa-arrow-up"></span> </button> </div> <!-- jequery plugins --> <script src="assets/js/jquery.js"></script> <script src="assets/js/popper.min.js"></script> <script src="assets/js/bootstrap.min.js"></script> <script src="assets/js/owl.js"></script> <script src="assets/js/wow.js"></script> <script src="assets/js/validation.js"></script> <script src="assets/js/jquery.fancybox.js"></script> <script src="assets/js/appear.js"></script> <script src="assets/js/scrollbar.js"></script> <script src="assets/js/jquery.nice-select.min.js"></script> <script src="assets/js/plugins.js"></script> <script src="assets/js/text_animation.js"></script> <script> // JavaScript for Filter Buttons document.addEventListener("DOMContentLoaded", () => { const filterButtons = document.querySelectorAll(".filter-btn"); const galleryItems = document.querySelectorAll(".gallery-block"); filterButtons.forEach((button) => { button.addEventListener("click", () => { const filter = button.getAttribute("data-filter"); galleryItems.forEach((item) => { if (filter === "all" || item.classList.contains(filter)) { item.style.display = "block"; } else { item.style.display = "none"; } }); }); }); }); </script> <!-- main-js --> <script src="assets/js/script.js"></script> </body><!-- End of .page_wrapper --> </html>