Gallery

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

  • Gallery images must be in landscape orientation.
  • Full size gallery images must be 1280 × 960 pixels. This resolution must never be exceeded.
  • All images must have an aspect ratio of 4:3. This is the typical aspect ratio for photographs.
  • If an image's resolution is lower than 1280 × 960 pixels, then the image must have an aspect ratio of 4:3 at its highest native resolution.
  • Thumbnail images are not automatically generated from the full image and must be created separately.
  • Thumbnail images must be 360 × 240 pixels.
  • A gallery must only be used within the main body of a page.
  • A page may contain multiple galleries.
  • Use data-lightbox="[gallery name]" to group images together for each gallery.
  • The following additional scripts must be included on the page before the closing </body> tag:
    • https://www.st-andrews.ac.uk/~cdn/dpl/1.23.2/scripts/lightbox.min.js
    • https://www.st-andrews.ac.uk/~cdn/dpl/1.23.2/scripts/gallery.js

Options available


Example
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.

Example
Code

This option must only be used in galleries where images are downloadable. All images must be downloadable in this option.

Example
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.

Example
Code

This option is no longer supported

This old method of gallery implementation, using the jQuery theatre plugin, is deprecated and will be removed in a future version of the digital pattern library.

Example
Code