OneTaskBy Tim King · Updated
Lightbox Builder
Image Lightbox in HTML, CSS and Vanilla JS
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Lightbox Builder works
A lightbox builder makes the overlay that opens a gallery photo full screen when it is clicked, with arrows to move between images and a button to close it. Set the options, click a thumbnail in the preview to try it, then copy the HTML, CSS and a short vanilla JavaScript snippet.
Lightbox plugins used to need jQuery and a stack of CSS. Modern browsers have most of the hard
parts built in: the <dialog> element opens above everything else with showModal(), traps
keyboard focus inside itself, closes on Escape, and draws its own darkened ::backdrop.
How the lightbox builder works
Each thumbnail is a link to the full-size image, so the photos still open if JavaScript fails. The script stops the link, copies its address into the dialog's image and opens the dialog. Arrow buttons, the left and right arrow keys, and a swipe on touch screens step through the set, wrapping round at the ends. Clicking the dark area outside the photo or pressing Escape closes it.
Captions and counter
The caption is taken from the thumbnail's alt text, so you write each description once and it serves screen readers and the lightbox. The counter shows the position, such as 3 / 6, which helps visitors know how many photos are left.
Styling
The backdrop colour and opacity control how much of the page shows through. The zoom and fade animations are short CSS keyframes that switch off for visitors who have asked for reduced motion.
FAQ
Does the lightbox work with the keyboard?
Yes. Thumbnails are links, so Tab reaches them and Enter opens the lightbox. Inside, focus stays in the dialog, the arrow keys change image, Tab moves between the buttons and Escape closes it and returns focus to the thumbnail that opened it.
Can I use it with my existing gallery?
Yes, as long as each thumbnail is an image inside a link to the large version. Change the
.lb-gallery a selector in the script to match your gallery's container, and the lightbox will
pick up every link inside it.
Is the dialog element supported everywhere?
Every current browser supports <dialog> and showModal(), including Safari since version 15.4.
Very old browsers ignore the script's call, and because the thumbnails are ordinary links, clicking
still opens the full image on its own page.
Why not load all the large images at once?
Each large photo only downloads when it is shown, which keeps the page fast on galleries with dozens
of images. For quicker stepping you can preload the next image by creating a new Image() with its
address inside the show function.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Image Gallery Builder
Build a responsive CSS grid photo gallery with captions and hover effects.
Masonry Grid Builder
Pinterest-style masonry layouts in pure CSS.
Image Filter Sandbox
Slide eight filter functions and copy the CSS declaration.
Responsive Image Generator
Generate srcset, sizes and picture markup for responsive images.
Image Compare
Spot differences between two images and get a similarity score.