1#@!#!123s

: / home3 / encodto1 / tapaslight.encodersunlimited.com /
Filename : gallery.php
back
<?php
require('config.php');

// Fetch all categories for the filter
$categoriesQuery = "SELECT DISTINCT category FROM gallery";
$categoriesResult = $conn->query($categoriesQuery);

// Fetch gallery items based on category filter
$filter = isset($_GET['category']) ? $_GET['category'] : '*';
$filterCondition = $filter !== '*' ? "WHERE category = '$filter'" : '';
$galleryQuery = "SELECT * FROM gallery $filterCondition";
$galleryResult = $conn->query($galleryQuery);

// Fetch categories for the filter buttons
$categoryList = [];
while ($row = $categoriesResult->fetch_assoc()) {
    $categoryList[] = $row['category'];
}

if (isset($_GET['ajax'])) {
    header('Content-Type: application/json');
    $galleryItems = [];
    while ($row = $galleryResult->fetch_assoc()) {
        $galleryItems[] = $row;
    }
    echo json_encode([
        'categories' => $categoryList,
        'items' => $galleryItems
    ]);
    exit;
}
?>

<!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">
    <meta name="description" content="Gallery of Tapas Lights">
    <meta name="keywords" content="gallery, tapas lights, lighting, electrical">

    <title>Tapas Lights - Gallery</title>

    <link rel="icon" type="image/x-icon" href="assets/img/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/icomoon.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>
      /* Smooth transition for the gallery items */
.filter-box .portfolio-item {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

.filter-box .portfolio-img {
    position: relative;
}

.filter-box .portfolio-img img {
    transition: transform 0.3s ease;
}

.filter-box .portfolio-item:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.filter-box .portfolio-item:hover img {
    transform: scale(1.1);
}

/* Filter button active state */
.filter-btn li.active a {
    color: #007bff;
    font-weight: bold;
    border-bottom: 2px solid #007bff;
}

    </style>
</head>
<body>
  <?php require('header.php') ?>
    <div class="preloader">
        <div class="loader-ripple">
            <div></div>
            <div></div>
        </div>
    </div>

    <main class="main">
        <div class="site-breadcrumb" style="background: url(assets/img/breadcrumb/Untitled-1.jpg)">
            <div class="container">
                <h2 class="breadcrumb-title">Gallery</h2>
                <p class="text-white">We keep millions of life electrically connected...</p>
                <ul class="breadcrumb-menu">
                    <li><a href="index.php">Home</a></li>
                    <li class="active">Gallery</li>
                </ul>
            </div>
        </div>
  
        <div class="portfolio-area py-120">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 d-lg-flex align-items-end justify-content-between mb-40">
                        <div class="site-heading mb-0">
                            <span class="site-title-tagline"><i class="far fa-lightbulb-on"></i>Gallery</span>
                            <h2 class="site-title">Explore Our <span>Gallery</span></h2>
                        </div>
                        <div class="filter-control">
                            <ul class="filter-btn" id="filter-buttons">
                                <!-- Filter buttons will be dynamically inserted here -->
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="row filter-box popup-gallery" id="gallery-items">
                    <!-- Gallery items will be dynamically inserted here -->
                </div>
            </div>
        </div>
    </main>

    <footer class="footer-area">
        <!-- Footer content here -->
    </footer>

    <div class="whatsapp-widget">
        <a href="https://wa.me/+919832381328" target="_blank">
            <img src="assets/img/whats app chat.gif" alt="WhatsApp Icon">
        </a>
    </div>

    <a href="#" id="scroll-top"><i class="far fa-arrow-up-from-arc"></i></a>

    <script src="assets/js/jquery-3.6.0.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).ready(function() {
            function loadGallery(category) {
                $.ajax({
                    url: 'gallery.php',
                    type: 'GET',
                    data: { category: category, ajax: true },
                    dataType: 'json',
                    success: function(data) {
                        $('#filter-buttons').empty();
                        $('#gallery-items').empty();
                        
                        // Insert filter buttons
                        var allButton = '<li class="' + (category === '*' ? 'active' : '') + '" data-filter="*"><a href="#">All</a></li>';
                        $('#filter-buttons').append(allButton);
                        data.categories.forEach(function(cat) {
                            var button = '<li class="' + (category === cat ? 'active' : '') + '" data-filter=".' + cat.toLowerCase().replace(/ /g, '-') + '"><a href="#">' + cat + '</a></li>';
                            $('#filter-buttons').append(button);
                        });
                        
                        // Insert gallery items
                        data.items.forEach(function(item) {
                            var itemHtml = '<div class="col-md-4 filter-item ' + item.category.toLowerCase().replace(/ /g, '-') + '">'
                                         + '<div class="portfolio-item">'
                                         + '<div class="portfolio-img">'
                                         + '<a href="tadminl/uploads/' + item.image + '">'
                                         + '<img src="tadminl/uploads/' + item.image + '" alt="' + item.name + '">'
                                         + '</a>'
                                         + '</div>'
                                         + '</div>'
                                         + '</div>';
                            $('#gallery-items').append(itemHtml);
                        });
                    }
                });
            }

            // Initial load
            loadGallery('*');

            // Filter button click event
            $('#filter-buttons').on('click', 'li', function(e) {
                e.preventDefault();
                var category = $(this).data('filter') === '*' ? '*' : $(this).text();
                loadGallery(category);
            });
        });
    </script>

<script>
    $(document).ready(function() {
        function loadGallery(category) {
            $.ajax({
                url: 'gallery.php',
                type: 'GET',
                data: { category: category, ajax: true },
                dataType: 'json',
                success: function(data) {
                    $('#filter-buttons').empty();
                    $('#gallery-items').empty();
                    
                    // Insert filter buttons
                    var allButton = '<li class="' + (category === '*' ? 'active' : '') + '" data-filter="*"><a href="#">All</a></li>';
                    $('#filter-buttons').append(allButton);
                    data.categories.forEach(function(cat) {
                        var button = '<li class="' + (category === cat ? 'active' : '') + '" data-filter=".' + cat.toLowerCase().replace(/ /g, '-') + '"><a href="#">' + cat + '</a></li>';
                        $('#filter-buttons').append(button);
                    });
                    
                    // Insert gallery items
                    data.items.forEach(function(item) {
                        var itemHtml = '<div class="col-md-4 filter-item ' + item.category.toLowerCase().replace(/ /g, '-') + '">'
                                     + '<div class="portfolio-item">'
                                     + '<div class="portfolio-img">'
                                     + '<a href="tadminl/uploads/' + item.image + '">'
                                     + '<img src="tadminl/uploads/' + item.image + '" alt="' + item.name + '">'
                                     + '</a>'
                                     + '</div>'
                                     + '</div>'
                                     + '</div>';
                        $('#gallery-items').append(itemHtml);
                    });
                }
            });
        }

        // Initial load
        loadGallery('*');

        // Filter button click event
        $('#filter-buttons').on('click', 'li', function(e) {
            e.preventDefault();
            var category = $(this).data('filter') === '*' ? '*' : $(this).text();
            loadGallery(category);
        });
    });
</script>

</body>
</html>