Gallery

// ========================== // GALLERY FUNCTIONS // ========================== let currentItems = 6; // Show first 6 images initially let activeFilter = 'all'; let filteredImages = [...galleryImages]; function renderGallery(images) { const grid = document.getElementById('gallery-grid'); const loadMoreBtn = document.getElementById('load-more-container'); // Show only up to currentItems const visibleImages = images.slice(0, currentItems); grid.innerHTML = visibleImages.map(image => ` `).join(''); // Hide load more button if all filtered images are shown if (currentItems >= images.length) { loadMoreBtn.style.display = 'none'; } else { loadMoreBtn.style.display = 'block'; } } function filterGallery(category) { activeFilter = category; if (category === 'all') { filteredImages = [...galleryImages]; } else { filteredImages = galleryImages.filter(img => img.category === category); } currentItems = 6; // reset pagination renderGallery(filteredImages); } // ========================== // EVENT LISTENERS // ========================== document.querySelectorAll('.filter-btn').forEach(btn => { btn.addEventListener('click', () => { document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active')); btn.classList.add('active'); filterGallery(btn.getAttribute('data-filter')); }); }); document.getElementById('load-more-btn').addEventListener('click', () => { currentItems += 3; renderGallery(filteredImages); }); // Lightbox options lightbox.option({ 'resizeDuration': 200, 'wrapAround': true, 'albumLabel': 'Image %1 of %2', 'fadeDuration': 300 }); // Initial render filterGallery('all');
SiteLock
Scroll to Top