Image Gallery Lightbox
JavaScript
Hard
3 views
Problem Description
You have thumbnails .thumb with data-full URL. On click, open overlay #light with . Clicking overlay closes. ESC closes too.
Output Format
No output (DOM change).
Constraints
Assume .thumb elements exist and #light #full exist.
Official Solution
const light=document.getElementById('light');const full=document.getElementById('full');const open=src=>{full.src=src;light.classList.add('show');};const close=()=>{light.classList.remove('show');};document.querySelectorAll('.thumb').forEach(t=>{t.addEventListener('click',()=>{open(t.dataset.full||t.getAttribute('src')||'');});});light.addEventListener('click',e=>{if(e.target===light)close();});document.addEventListener('keydown',e=>{if(e.key==='Escape')close();});
Solutions (0)
No solutions submitted yet. Be the first!
No comments yet. Start the discussion!