BLACKSITE


	: 216.73.216.62
	: 147.93.18.13 / vinyasaweddings.com
	: Linux srv667811 6.8.0-134-generic #134-Ubuntu SMP PREEMPT_DYNAMIC Fri Jun 26 18:43:11 UTC 2026 x86_64
: /var/www/vkraft/views/layout/
files >> /var/www/vkraft/views/layout/gallery.php
 <section class="gallery-section py-5" style="background-color: var(--gray);">
    <div class="container">
        <div class="section-header text-center mb-5">
            <h2 class="section-title">Our Gallery</h2>
            <p class="section-subtitle">Explore our collection of beautiful moments captured with care and creativity.
            </p>
        </div>

        <div class="gallery-grid" id="galleryGrid">
                <!-- Gallery items will be generated by JavaScript -->
            </div>
            
            <!-- <button class="view-more-btn">View More</button> -->
    </div>
</section>



 <div class="lightbox-modal" id="lightboxModal">
        <div class="lightbox-container">
            <div class="lightbox-content">
                <button class="close-btn" id="closeBtn">
                    <i class="fas fa-times"></i>
                </button>
                <div class="lightbox-img-container">
                    <img class="lightbox-img" id="lightboxImg" src="" alt="">
                </div>
                <p class="lightbox-caption" id="lightboxCaption"></p>
                <div class="image-counter" id="imageCounter"></div>
                <button class="nav-btn prev-btn" id="prevBtn">
                    <i class="fas fa-chevron-left"></i>
                </button>
                <button class="nav-btn next-btn" id="nextBtn">
                    <i class="fas fa-chevron-right"></i>
                </button>
            </div>
        </div>
    </div>


 <script>
    document.addEventListener('DOMContentLoaded', function() {
        const galleryGrid = document.getElementById('galleryGrid');

        // Your images range from 13 to 29
        const startIndex = 13;
        const endIndex = 28;
        const imageCount = endIndex - startIndex + 1;

        for (let i = startIndex; i <= endIndex; i++) {
            const galleryItem = document.createElement('div');
            galleryItem.className = 'gallery-item';
            galleryItem.dataset.index = i;

            const img = document.createElement('img');
            img.src = `<?= BASE_URL ?>/public/Images/gallery/${i}.webp`;
            img.alt = `Gallery Image ${i}`;
            img.className = 'gallery-img';

            const overlay = document.createElement('div');
            overlay.className = 'gallery-overlay';

            const caption = document.createElement('div');
            caption.className = 'gallery-caption';
            

            overlay.appendChild(caption);
            galleryItem.appendChild(img);
            galleryItem.appendChild(overlay);

            galleryGrid.appendChild(galleryItem);
        }

        // Lightbox functionality
        const lightboxModal = document.getElementById('lightboxModal');
        const lightboxImg = document.getElementById('lightboxImg');
        const lightboxCaption = document.getElementById('lightboxCaption');
        const imageCounter = document.getElementById('imageCounter');
        const closeBtn = document.getElementById('closeBtn');
        const prevBtn = document.getElementById('prevBtn');
        const nextBtn = document.getElementById('nextBtn');

        let currentIndex = 0;

        const galleryItems = document.querySelectorAll('.gallery-item');

        // Open lightbox
        galleryItems.forEach(item => {
            item.addEventListener('click', function() {
                currentIndex = parseInt(this.dataset.index);
                updateLightbox();
                lightboxModal.classList.add('active');
                document.body.style.overflow = 'hidden'; // Prevent scrolling
            });
        });

        // Close lightbox
        closeBtn.addEventListener('click', function() {
            lightboxModal.classList.remove('active');
            document.body.style.overflow = ''; // Re-enable scrolling
        });

        // Navigate lightbox
        prevBtn.addEventListener('click', function() {
            currentIndex = currentIndex > startIndex ? currentIndex - 1 : endIndex;
            updateLightbox();
        });

        nextBtn.addEventListener('click', function() {
            currentIndex = currentIndex < endIndex ? currentIndex + 1 : startIndex;
            updateLightbox();
        });

        // Keyboard navigation
        document.addEventListener('keydown', function(e) {
            if (lightboxModal.classList.contains('active')) {
                if (e.key === 'Escape') {
                    lightboxModal.classList.remove('active');
                    document.body.style.overflow = '';
                } else if (e.key === 'ArrowLeft') {
                    currentIndex = currentIndex > startIndex ? currentIndex - 1 : endIndex;
                    updateLightbox();
                } else if (e.key === 'ArrowRight') {
                    currentIndex = currentIndex < endIndex ? currentIndex + 1 : startIndex;
                    updateLightbox();
                }
            }
        });

        // ✅ Update lightbox content using LOCAL images
        function updateLightbox() {
            lightboxImg.src = `<?= BASE_URL ?>/public/Images/gallery/${currentIndex}.webp`;
            lightboxCaption.textContent = ``;
            imageCounter.textContent = `${currentIndex - startIndex + 1} / ${imageCount}`;
        }

        // Close lightbox when clicking outside the image
        lightboxModal.addEventListener('click', function(e) {
            if (e.target === lightboxModal) {
                lightboxModal.classList.remove('active');
                document.body.style.overflow = '';
            }
        });

        // View More button functionality (can be replaced with AJAX later)
        const viewMoreBtn = document.querySelector('.view-more-btn');
        viewMoreBtn.addEventListener('click', function() {
            alert('In a real implementation, this would load more gallery items.');
        });
    });
</script>