Gallery
The gallery pattern is backwards-compatible with previous implementations used on the University of St Andrews website – see old gallery option below, which used the jQuery theatre plugin. This support will be removed at some point, so please do not use the old gallery markup.
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.
- Thumbnail images should be
360px x 240px. - Must only be used within the main content of a page.
- A page can contain multiple galleries.
- Use
data-lightbox="[gallery name]"to group images together for each gallery.
Options available
Single gallery
Title of gallery
Gallery description
<div class="gallery">
<h2 class="gallery__title">Title of gallery</h2>
<div class="gallery__description"><p>Gallery description</p></div>
<div class="lightbox_gallery_images">
<figure id="optional-id2">
<a href="../../assets/docs/images/placeholders/1280x853-7.jpg" data-lightbox="gallery-1" data-title="Image 1"><img src="../../assets/docs/images/placeholders/360x240-7.jpg" alt="alt text for image 1"></a>
<figcaption>Image 1</figcaption>
</figure>
<figure id="optional-id3">
<a href="../../assets/docs/images/placeholders/1280x853-8.jpg" data-lightbox="gallery-1" data-title="Image 2"><img src="../../assets/docs/images/placeholders/360x240-8.jpg" alt="alt text for image 2"></a>
<figcaption>Image 2</figcaption>
</figure>
<figure id="optional-id4">
<a href="../../assets/docs/images/placeholders/1280x853-9.jpg" data-lightbox="gallery-1" data-title="Image 3"><img src="../../assets/docs/images/placeholders/360x240-9.jpg" alt="alt text for image 3"></a>
<figcaption>Image 3</figcaption>
</figure>
</div>
</div>Multiple galleries
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
<div class="gallery">
<h2 class="gallery__title">Title of gallery</h2>
<div class="gallery__description"><p>Gallery description</p></div>
<div class="lightbox_gallery_images">
<figure id="optional-id2">
<a href="../../assets/docs/images/placeholders/1280x853-7.jpg" data-lightbox="gallery-2" data-title="Gallery 1 image 1"><img src="../../assets/docs/images/placeholders/360x240-7.jpg" alt="alt text for image 1"></a>
<figcaption>Gallery 1 image 1</figcaption>
</figure>
<figure id="optional-id3">
<a href="../../assets/docs/images/placeholders/1280x853-8.jpg" data-lightbox="gallery-2" data-title="Gallery 1 image 2"><img src="../../assets/docs/images/placeholders/360x240-8.jpg" alt="alt text for image 2"></a>
<figcaption>Gallery 1 image 2</figcaption>
</figure>
<figure id="optional-id4">
<a href="../../assets/docs/images/placeholders/1280x853-7.jpg" data-lightbox="gallery-2" data-title="Gallery 1 image 3"><img src="../../assets/docs/images/placeholders/360x240-7.jpg" alt="alt text for image 3"></a>
<figcaption>Gallery 1 image 3</figcaption>
</figure>
<figure id="optional-id2">
<a href="../../assets/docs/images/placeholders/1280x853-8.jpg" data-lightbox="gallery-2" data-title="Gallery 1 image 4"><img src="../../assets/docs/images/placeholders/360x240-8.jpg" alt="alt text for image 1"></a>
<figcaption>Gallery 1 image 4</figcaption>
</figure>
<figure id="optional-id3">
<a href="../../assets/docs/images/placeholders/1280x853-8.jpg" data-lightbox="gallery-3" data-title="Gallery 2 image 1"><img src="../../assets/docs/images/placeholders/360x240-8.jpg" alt="alt text for image 2"></a>
<figcaption>Gallery 2 image 1</figcaption>
</figure>
<figure id="optional-id4">
<a href="../../assets/docs/images/placeholders/1280x853-9.jpg" data-lightbox="gallery-3" data-title="Gallery 2 image 2"><img src="../../assets/docs/images/placeholders/360x240-9.jpg" alt="alt text for image 3"></a>
<figcaption>Gallery 2 image 2</figcaption>
</figure>
<figure id="optional-id3">
<a href="../../assets/docs/images/placeholders/1280x853-8.jpg" data-lightbox="gallery-3" data-title="Gallery 2 image 3"><img src="../../assets/docs/images/placeholders/360x240-8.jpg" alt="alt text for image 2"></a>
<figcaption>Gallery 2 image 3</figcaption>
</figure>
<figure id="optional-id4">
<a href="../../assets/docs/images/placeholders/1280x853-9.jpg" data-lightbox="gallery-3" data-title="Gallery 2 image 4"><img src="../../assets/docs/images/placeholders/360x240-9.jpg" alt="alt text for image 3"></a>
<figcaption>Gallery 2 image 4</figcaption>
</figure>
</div>
</div>Old gallery
This is the deprecated gallery implementation, using the jQuery theatre plugin.
Title of gallery
Gallery description
<div class="gallery">
<h2 class="gallery__title">Title of gallery</h2>
<div class="gallery__description"><p>Gallery description</p></div>
<div class="gallery__images">
<figure id="optional-id2" style="cursor: pointer;">
<a href="../../assets/docs/images/placeholders/1280x853-7.jpg"><img src="../../assets/docs/images/placeholders/360x240-7.jpg" alt="alt text for image 1"></a>
<figcaption>Image 1</figcaption>
</figure>
<figure id="optional-id3" style="cursor: pointer;">
<a href="../../assets/docs/images/placeholders/1280x853-8.jpg"><img src="../../assets/docs/images/placeholders/360x240-8.jpg" alt="alt text for image 2"></a>
<figcaption>Image 2</figcaption>
</figure>
<figure id="optional-id4" style="cursor: pointer;">
<a href="../../assets/docs/images/placeholders/1280x853-9.jpg"><img src="../../assets/docs/images/placeholders/360x240-9.jpg" alt="alt text for image 3"></a>
<figcaption>Image 3</figcaption>
</figure>
</div>
</div>