user1211x/javascript-wizardry-wagon

1 2// Initialize first comparison on index.html3document.addEventListener('DOMContentLoaded', function() {4    const divisor = document.getElementById("divisor");5    const slider = document.getElementById("slider");6    const beforeUpload = document.getElementById('before-upload');7    const afterUpload = document.getElementById('after-upload');8    const compareBtn = document.getElementById('compare-btn');9    const figure = document.querySelector('#comparison figure');10    const imageTitle = document.querySelector('.image-title');11    const fullscreenBtn = document.getElementById('fullscreen-btn');12    13    if (divisor && slider) {14        function moveDivisor() { 15            divisor.style.width = slider.value+"%";16        }17        slider.addEventListener('input', moveDivisor);18    }19 20    if (fullscreenBtn) {21        fullscreenBtn.addEventListener('click', function() {22            const comparison = document.getElementById('comparison');23            if (!document.fullscreenElement) {24                comparison.requestFullscreen().catch(err => {25                    alert(`Error attempting to enable fullscreen: ${err.message}`);26                });27            } else {28                document.exitFullscreen();29            }30        });31    }32// Handle image upload and comparison33    compareBtn.addEventListener('click', function() {34        const beforeFile = beforeUpload.files[0];35        const afterFile = afterUpload.files[0];36        37        if (!beforeFile || !afterFile) {38            alert('Please upload both before and after images');39            return;40        }41 42        const beforeUrl = URL.createObjectURL(beforeFile);43        const afterUrl = URL.createObjectURL(afterFile);44 45        // Update the comparison slider with the new images46        figure.style.backgroundImage = `url(${beforeUrl})`;47        divisor.style.backgroundImage = `url(${afterUrl})`;48        49        // Update the title50        imageTitle.innerHTML = `Custom Comparison<br/>${beforeFile.name} vs ${afterFile.name}`;51        52        // Reset slider to center53        slider.value = 50;54        divisor.style.width = '50%';55    });56// Set background images for gallery items57    const comparisons = document.querySelectorAll('.comparison');58    comparisons.forEach((comp, index) => {59        const figure = comp.querySelector('figure');60        const divisor = comp.querySelector('.divisor');61        62        // Use different image pairs for each comparison63        switch(index) {64            case 0:65                figure.style.backgroundImage = 'url(https://images.unsplash.com/photo-1506744038136-46273834b3fb)';66                divisor.style.backgroundImage = 'url(https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=1200&q=80&ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9)';67                break;68            case 1:69                figure.style.backgroundImage = 'url(https://images.unsplash.com/photo-1477959858617-67f85cf4f1df)';70                divisor.style.backgroundImage = 'url(https://images.unsplash.com/photo-1480714378408-67cf0d13bc1b)';71                break;72            case 2:73                figure.style.backgroundImage = 'url(https://images.unsplash.com/photo-1531123897727-8f129e1688ce)';74                divisor.style.backgroundImage = 'url(https://images.unsplash.com/photo-1531123897727-8f129e1688ce?auto=format&fit=crop&w=1200&q=80&ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9)';75                break;76        }77    });78});79 80function toggleFullscreen(btn) {81    const comparison = btn.closest('.comparison');82    if (!document.fullscreenElement) {83        comparison.requestFullscreen().catch(err => {84            alert(`Error attempting to enable fullscreen: ${err.message}`);85        });86    } else {87        document.exitFullscreen();88    }89}90 91