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
Single gallery
Title of gallery
Gallery description
Title of gallery
Gallery description
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.
Title of gallery
Gallery description
Title of gallery
Gallery description
Single gallery with download
This option must only be used in galleries where images are downloadable. All images must be downloadable in this option.
Title of gallery
Title of gallery
Video gallery
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.
Title of gallery
Title of gallery
Old gallery - deprecated
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.
Title of gallery
Gallery description
Title of gallery
Gallery description