Lightbox
A full-screen image viewer that opens over the page, often with a dark backdrop and controls for moving through a gallery.
See it
What it is
A lightbox is a full-screen overlay for viewing an image at a larger size, usually against a dark backdrop. In a gallery it also provides previous and next controls, a caption, and a position such as '3 of 12'. Lokesh Dhakar's 2005 Lightbox script helped make both the name and the pattern common on the web.
Use one when thumbnails need a closer look without sending the viewer to a separate page: portfolios, product photography, documentation, or image galleries. Load the selected full-size asset on demand and prepare the immediate neighbours so moving through the set feels responsive.
Gotcha: a lightbox is still a modal dialog. Trap focus while it is open, close on Escape, return focus to the thumbnail that launched it, and keep visible controls for close, previous, and next. Preserve useful alt text and captions, and avoid forcing a huge original image onto a small screen when a srcset candidate will do.
Ask AI for it
Build an image lightbox with the native HTML dialog element and showModal(). Open it from each gallery thumbnail, fill the viewport with a dark ::backdrop, and display the selected image with object-fit: contain plus responsive srcset and sizes. Add labelled Close, Previous, and Next buttons, a caption, and an 'N of total' counter. Support Escape, Left Arrow, and Right Arrow, wrap at the gallery ends, preload only the adjacent images, trap focus through dialog behavior, and return focus to the launching thumbnail on close. Use a 150ms opacity transition and disable it under prefers-reduced-motion.