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 1440 pixels wide and 960 pixels high. This resolution must never be exceeded.
All images must have an aspect ratio of 3:2. This is the typical aspect ratio for photographs.
If an image's resolution is lower than 1440 pixels wide and 960 pixels high, then the image must have an aspect ratio of 3:2 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.27.3/scripts/lightbox.min.js
- https://www.st-andrews.ac.uk/~cdn/dpl/1.27.3/scripts/gallery.js

Single gallery

Example

Title of gallery

Gallery description

Code

<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 class="lightbox-caption">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 class="lightbox-caption">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 class="lightbox-caption">Image 3</figcaption>
        </figure>
    </div>
</div>

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

Title of gallery

Gallery description

Code

<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 class="lightbox-caption">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 class="lightbox-caption">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 class="lightbox-caption">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 class="lightbox-caption">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 class="lightbox-caption">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 class="lightbox-caption">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 class="lightbox-caption">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 class="lightbox-caption">Gallery 2 image 4</figcaption>
        </figure>
    </div>
</div>

Single gallery with download

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

Example

Title of gallery

Code

<div class="gallery">
    <h2 class='gallery__title'>Title of gallery</h2>
    <div class="lightbox_gallery_images">
        <figure id="optional-id2">
            <a href="../../assets/docs/images/placeholders/1280x853-7.jpg"  data-lightbox="gallery-4" data-title="Image 1"><img src="../../assets/docs/images/placeholders/360x240-7.jpg" alt="alt text for image 1"></a>
                <a type="button" class="btn btn-secondary" href="docs/images/placeholders/1280x853-7.jpg" download>Download</a>
            <figcaption class="lightbox-caption">Image 1</figcaption>
        </figure>
        <figure id="optional-id3">
            <a href="../../assets/docs/images/placeholders/1280x853-8.jpg"  data-lightbox="gallery-4" data-title="Image 2"><img src="../../assets/docs/images/placeholders/360x240-8.jpg" alt="alt text for image 2"></a>
                <a type="button" class="btn btn-secondary" href="docs/images/placeholders/1280x853-8.jpg" download>Download</a>
            <figcaption class="lightbox-caption">Image 2</figcaption>
        </figure>
        <figure id="optional-id4">
            <a href="../../assets/docs/images/placeholders/1280x853-9.jpg"  data-lightbox="gallery-4" data-title="Image 3"><img src="../../assets/docs/images/placeholders/360x240-9.jpg" alt="alt text for image 3"></a>
                <a type="button" class="btn btn-secondary" href="docs/images/placeholders/1280x853-9.jpg" download>Download</a>
            <figcaption class="lightbox-caption">Image 3</figcaption>
        </figure>
        <figure id="optional-id5">
            <a href="../../assets/docs/images/placeholders/1280x853-7.jpg"  data-lightbox="gallery-4" data-title="Image 4"><img src="../../assets/docs/images/placeholders/360x240-7.jpg" alt="alt text for image 3"></a>
                <a type="button" class="btn btn-secondary" href="docs/images/placeholders/1280x853-7.jpg" download>Download</a>
            <figcaption class="lightbox-caption">Image 4</figcaption>
        </figure>
    </div>
</div>

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.

Example

Title of gallery

Code

<div class="gallery">
    <h2 class='gallery__title'>Title of gallery</h2>
    <div class="lightbox_gallery_images">
        <figure id="optional-id2">
            <a href="https://www.youtube.com/watch?v=5RCsv3732v4"  tabindex="-1"><img src="../../assets/docs/images/placeholders/360x240-7.jpg" alt="alt text for image 1"></a>
            <figcaption>
                <p><a href="https://www.youtube.com/watch?v=5RCsv3732v4">Video 1</a><br />12 June 2018</p>
            </figcaption>
        </figure>
        <figure id="optional-id3">
            <a href="https://www.youtube.com/watch?v=5RCsv3732v4"  tabindex="-1"><img src="../../assets/docs/images/placeholders/360x240-8.jpg" alt="alt text for image 2"></a>
            <figcaption>
                <p><a href="https://www.youtube.com/watch?v=5RCsv3732v4">Video 2</a><br />19 May 2018</p>
            </figcaption>
        </figure>
        <figure id="optional-id4">
            <a href="https://www.youtube.com/watch?v=5RCsv3732v4"  tabindex="-1"><img src="../../assets/docs/images/placeholders/360x240-9.jpg" alt="alt text for image 3"></a>
            <figcaption>
                <p><a href="https://www.youtube.com/watch?v=5RCsv3732v4">Video 3</a><br />25 March 2018</p>
            </figcaption>
        </figure>
        <figure id="optional-id5">
            <a href="https://www.youtube.com/watch?v=5RCsv3732v4"  tabindex="-1"><img src="../../assets/docs/images/placeholders/360x240-7.jpg" alt="alt text for image 3"></a>
            <figcaption>
                <p><a href="https://www.youtube.com/watch?v=5RCsv3732v4">Video 4</a><br />5 January 2018</p>
            </figcaption>
        </figure>
    </div>
</div>

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.

Example

Title of gallery

Gallery description

Code

<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">
            <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 class="lightbox-caption">Image 1</figcaption>
        </figure>
        <figure id="optional-id3">
            <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 class="lightbox-caption">Image 2</figcaption>
        </figure>
        <figure id="optional-id4">
            <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 class="lightbox-caption">Image 3</figcaption>
        </figure>
    </div>
</div>