thrillwiki_django_no_react/static/js/optimization.js

// Lightbox Functionality
document.addEventListener('alpine:init', () => {
    Alpine.data('lightbox', () => ({
        isOpen: false,
        imgSrc: '',
        imgAlt: '',
        
        open(event) {
            const img = event.target.tagName === 'IMG' ? event.target : event.target.querySelector('img');
            if (img) {
                this.imgSrc = img.src;
                this.imgAlt = img.alt;
                this.isOpen = true;
                document.body.style.overflow = 'hidden';
            }
        },
        
        close() {
            this.isOpen = false;
            this.imgSrc = '';
            this.imgAlt = '';
            document.body.style.overflow = '';
        }
    }));
});

// Add lazy loading to all images
document.addEventListener('DOMContentLoaded', () => {
    const images = document.querySelectorAll('img:not([loading])');
    images.forEach(img => {
        img.setAttribute('loading', 'lazy');
    });
});