<style>
       .lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.lightbox img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

.lightbox .close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: transparent;
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}
   </style>
   <!-- Project area -->
    <div class="section section-padding">
        <div class="container">
            <div class="section-title text-center mb-lg-8 mb-md-6 mb-4">
                <h2 class="title">Our <span>Gallery</span></h2>
                <p>To provide a better quality of life by designing eco-friendly structures with aesthetic sense.</p>
            </div>
            <div class="project-menu-style project-menu-active isotope-btn-add-active mb-6">
                <button class="active btn-project" data-filter="*">All</button>
                <?php 
                    $sql = "SELECT DISTINCT tbl_gallery.for_use,tbl_product.p_id,tbl_product.product_name FROM `tbl_gallery`
                    INNER JOIN tbl_product ON tbl_gallery.for_use = tbl_product.p_id";
                    $run = mysqli_query($db,$sql) or die("Query Not run");
                    while($data = mysqli_fetch_assoc($run)){
                ?>
                <button class="btn-project" data-filter=".<?php echo $data['for_use']?>"><?php echo $data['product_name']?></button>
                <?php } ?>
            </div>
            <div class="row row-cols-lg-3 row-cols-md-2 row-cols-sm-2 row-cols-1 mb-n6 grid">
                <?php 
                    $sql = "SELECT * FROM `tbl_gallery`";
                    $run = mysqli_query($db,$sql) or die("Query Not run");
                    while($data = mysqli_fetch_assoc($run)){
                ?>
                <div class="col mb-6 grid-item <?php echo $data['for_use']?>">
                    <div class="project-wrap">
                        <div class="project-inner">
                            <a class="thumbnail" href="<?php echo $wspath?>admin/images/gallery/<?php echo $data['image']?>">
                                <img src="<?php echo $wspath?>admin/images/gallery/<?php echo $data['image']?>" alt="Blog Image">
                            
                            <div class="project-content">
                                 <span class="category">Nature Wood Floor</span> 
                                <h3 class="title" style="color:white;"><?php echo $data['title']?></h3>
                            </div>
                            </a>
                        </div>
                    </div>
                </div>
                <?php } ?>
                <!-- <div class="col mb-6 grid-item cat1">
                    <div class="project-wrap">
                        <div class="project-inner">
                            <a class="thumbnail" href="#">
                                <img src="assets/images/project/project-2.jpg" alt="Blog Image">
                            </a>
                            <div class="project-content">
                                <span class="category"><a href="#">Interior</a></span>
                                <h3 class="title"><a href="#">Restaurant Interior Design</a></h3>
                            </div>
                        </div>
                    </div>
                </div>-->
            </div>
            <div class="project-btn mt-6 mt-md-8 mt-lg-10 text-center">
                <!-- Add your project button content here -->
            </div>
        </div>
    </div>
    <script>
        // Get all the thumbnail images
        const thumbnails = document.querySelectorAll('.thumbnail');

        // Add a click event listener to each thumbnail
        thumbnails.forEach(thumbnail => {
        thumbnail.addEventListener('click', function(e) {
        e.preventDefault(); // Prevent the default link behavior

        const imageUrl = this.getAttribute('href'); // Get the image URL

        // Create a lightbox container
        const lightbox = document.createElement('div');
        lightbox.className = 'lightbox';

        // Create the lightbox image
        const lightboxImage = document.createElement('img');
        lightboxImage.src = imageUrl;
        lightboxImage.alt = 'Zoomed Image';

        // Create the close button
        const closeButton = document.createElement('button');
        closeButton.className = 'close-button';
        closeButton.innerHTML = 'Close';

        // Add the image and close button to the lightbox
        lightbox.appendChild(lightboxImage);
        lightbox.appendChild(closeButton);

        // Add the lightbox to the body
        document.body.appendChild(lightbox);

        // Add a click event listener to the close button
        closeButton.addEventListener('click', function() {
            document.body.removeChild(lightbox); // Remove the lightbox when the close button is clicked
        });

        // Add a click event listener to the lightbox container
        lightbox.addEventListener('click', function(e) {
            if (e.target === this) {
                document.body.removeChild(lightbox); // Remove the lightbox when clicked anywhere outside the image
            }
        });
    });
});
    </script>