Gallery

Digital pattern library

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.

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

Single gallery

Title of gallery

Gallery description

Code



    Title of gallery

    Gallery description

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

Code



    Title of gallery

    Gallery description

Old gallery

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

Title of gallery

Gallery description

Code



    Title of gallery

    Gallery description

    
        
            
            Image 1
        
        
            
            Image 2
        
        
            
            Image 3