Long-form gallery

The long-form gallery pattern allows you to 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 long-form gallery

  • Thumbnail images must be 170 × 170 pixels.
  • Must only be used within the main content of a long-form page.
  • A page may contain multiple galleries.
  • There should be no more than ten images in any one gallery.
  • 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.3/scripts/lightbox.min.js
    • https://www.st-andrews.ac.uk/~cdn/dpl/1.23.3/scripts/gallery.js

Options available

To be used only on the long-form pages.

Example

Scientists involved with Light Box

alt text for image 1
Ifor Samuel
Physicist
alt text for image 2
John Allen
Physicist
alt text for image 3
Ashu Kumar Bansal
Optical physicist
alt text for image 3
Hien Nguyen
Polymer chemist
alt text for image 3
Olena Kulyk
Biomedical electronics engineer
Code 

    
Scientists involved with Light Box

    

        

            alt text for image 1
            
Ifor Samuel 
 Physicist

        

        

            alt text for image 2
            
John Allen
Physicist

        

        

            alt text for image 3
            
Ashu Kumar Bansal
Optical physicist

        

        

            alt text for image 3
            
Hien Nguyen
Polymer chemist

        

        

            alt text for image 3
            
Olena Kulyk
Biomedical electronics engineer