let currentLightboxImages = []; let currentLightboxIndex = 0; window.openLightbox = function(images, index) { currentLightboxImages = images; currentLightboxIndex = index; updateLightbox(); document.getElementById('image-lightbox').classList.remove('hidden'); }; function updateLightbox() { if (!currentLightboxImages || currentLightboxImages.length === 0) return; const imgObj = currentLightboxImages[currentLightboxIndex]; const imgEl = document.getElementById('lightbox-img'); const capEl = document.getElementById('lightbox-caption'); // Attempt local first, fallback to remote imgEl.src = imgObj.local; imgEl.onerror = function() { if (this.src !== imgObj.remote) { this.src = imgObj.remote; } }; capEl.textContent = `${currentLightboxIndex + 1} / ${currentLightboxImages.length}`; } document.addEventListener('DOMContentLoaded', () => { const overlay = document.getElementById('image-lightbox'); const btnClose = document.getElementById('lightbox-close'); const btnPrev = document.getElementById('lightbox-prev'); const btnNext = document.getElementById('lightbox-next'); if (btnClose) { btnClose.addEventListener('click', (e) => { e.stopPropagation(); overlay.classList.add('hidden'); }); } if (overlay) { overlay.addEventListener('click', (e) => { if (e.target === overlay) { overlay.classList.add('hidden'); } }); } if (btnPrev) { btnPrev.addEventListener('click', (e) => { e.stopPropagation(); if (currentLightboxImages.length > 0) { currentLightboxIndex = (currentLightboxIndex - 1 + currentLightboxImages.length) % currentLightboxImages.length; updateLightbox(); } }); } if (btnNext) { btnNext.addEventListener('click', (e) => { e.stopPropagation(); if (currentLightboxImages.length > 0) { currentLightboxIndex = (currentLightboxIndex + 1) % currentLightboxImages.length; updateLightbox(); } }); } // Keyboard navigation document.addEventListener('keydown', (e) => { if (!overlay || overlay.classList.contains('hidden')) return; if (e.key === 'Escape') { overlay.classList.add('hidden'); } else if (e.key === 'ArrowLeft') { if (currentLightboxImages.length > 0) { currentLightboxIndex = (currentLightboxIndex - 1 + currentLightboxImages.length) % currentLightboxImages.length; updateLightbox(); } } else if (e.key === 'ArrowRight') { if (currentLightboxImages.length > 0) { currentLightboxIndex = (currentLightboxIndex + 1) % currentLightboxImages.length; updateLightbox(); } } }); });