1#@!#!123s

: / home3 / encodto1 / universalhomedecor.in /
Filename : gallery.php
back
<?php
require('admin/config.php');
?>

<!DOCTYPE HTML>
<html lang="en-US">

<head>
    <title>Gallery - UHD</title>
    <?php require('style.php') ?>
    <style>
        .portfolio__filter button.active {
            background-color: #000; /* Example active button background color */
            color: #fff; /* Example active button text color */
        }
        .portfolio__img .col-xs-12 {
            margin-bottom: 15px; /* Adjust margin between images as needed */
        }
    </style>
</head>

<body class="common-home Fauteuil">

    <!-- HEADER DEFAULT MENU AREA -->
    <?php require('header.php') ?>

    <!-- breadcrumb -->
    <div class="breadcrumb-main">
        <div class="container">
            <div class="breadcrumb-container">
                <h2 class="page-title">Gallery</h2>
                <ul class="breadcrumb">
                    <li class="breadcrumb-item"><a href="index.php">Home</a></li>
                    <li class="breadcrumb-item"><a href="gallery.php">Gallery</a></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- MAIN -->
    <main>
        <div class="section">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="portfolio__filter filter__home">
                            <button class="filter-button active" data-filter="all">All</button>
                            <?php
                            // Fetch categories from database
                            $categoryQuery = "SELECT * FROM `product_category`";
                            $categoryResult = mysqli_query($conn, $categoryQuery);

                            if (mysqli_num_rows($categoryResult) > 0) {
                                while ($categoryRow = mysqli_fetch_assoc($categoryResult)) {
                                    $categoryId = htmlspecialchars($categoryRow['id']);
                                    $categoryName = htmlspecialchars($categoryRow['category_name']);
                                    echo '<button class="filter-button" data-filter="' . $categoryId . '">' . $categoryName . '</button>';
                                }
                            } else {
                                echo "No categories found.";
                            }
                            ?>
                        </div>
                        <div class="portfolio__img row">
                            <?php
                            // Fetch images from database
                            $sql = "SELECT * FROM gallery";
                            $result = mysqli_query($conn, $sql);

                            if (mysqli_num_rows($result) > 0) {
                                while ($row = mysqli_fetch_assoc($result)) {
                                    $categoryId = htmlspecialchars($row['category']); // Assuming 'category' holds the category ID
                                    echo '<div class="col-xs-12 col-sm-6 col-md-3 filter p0 ' . $categoryId . '">';
                                    echo '<a href="admin/uploads/' . htmlspecialchars($row['image']) . '" data-fancybox="gallery">';
                                    echo '<img src="admin/uploads/' . htmlspecialchars($row['image']) . '" alt="' . htmlspecialchars($row['name']) . '">';
                                    echo '</a>';
                                    echo '</div>';
                                }
                            } else {
                                echo "No images found.";
                            }

                            mysqli_close($conn);
                            ?>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- FOOTER AREA -->
    <?php require('footer.php') ?>

    <!-- Include jQuery -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
    <script>
        $(document).ready(function() {
            $(".filter-button").click(function() {
                var value = $(this).attr("data-filter");

                if (value == "all") {
                    $(".filter").show("1000");
                } else {
                    $(".filter").not("." + value).hide("3000");
                    $(".filter").filter("." + value).show("3000");
                }

                $(".filter-button").removeClass("active");
                $(this).addClass("active");
            });
        });
    </script>
</body>

</html>