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 option must only be used in galleries where images are downloadable. All images must be downloadable in this option. Code

This option does not use Lightbox. All images must link to another page. The pages linked can be directly to the video hosted on YouTube or Vimeo, or to another page where the video is already embedded.

Code

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

Code