Lightbox

A lightbox takes one image out of a grid and puts it up against a darkened page. The dimming is the mechanism, not decoration: it removes the surrounding colour so the eye has one thing to look at, and it says that the page is still there and still where you left it. The name comes from the backlit box photographers laid slides on, and it arrived in interfaces through a 2005 JavaScript library that almost every gallery has since copied.

It is a modal, so it has a modal’s obligations. Focus moves into the overlay and stays there while it is open, Escape closes it, the page behind it does not scroll, and closing returns focus to the thumbnail that opened it, since that is where the reader’s place in the grid is. Being able to step to the next image without going back to the grid is the reason the pattern beats a link to a detail page, so arrows, arrow keys, and swipe should all move the same counter, and the counter should be visible: “4 of 12” is what tells someone how much is left.

The controls have to survive the picture. A close button over a photograph can land on a white sky, so give it a background of its own rather than trusting contrast with an image nobody has seen yet. Load a small preview first and swap in the full size behind it, hold the frame’s size steady between images so the arrows do not move under the pointer, and remember that a lightbox around a video is a different promise: it needs the player’s controls, and it must not autoplay with sound.

The one time to reach for something else is when the image is not the point. If the reader needs the description, the price, or the specification beside it, that is a quick view or a detail page, and a lightbox will just make them close it to find out anything.