Digital pattern library

Gallery

This pattern is backwards-compatible with previous implementations of the gallery pattern – see the old gallery option below, which used the jQuery theatre plugin. Please do not use the old gallery markup because support for this will be removed at some point.

The gallery pattern demonstrates a method of displaying a large number of images on a page and makes use of the Lightbox JavaScript library to view the images in an immersive experience.

Rules for the gallery

Options available


Code

Multiple galleries

The top and bottom row are two separate galleries. Each gallery needs to have a unique data-lightbox='[gallery name]' to group photos together.

Code

This is the deprecated gallery implementation, using the jQuery theatre plugin.

Code