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.27.2/scripts/lightbox.min.js
    • https://www.st-andrews.ac.uk/~cdn/dpl/1.27.2/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 
<div class="gallery">
    <h4 class='thumbnail-gallery__title'>Scientists involved with Light Box</h4>
    <div class="longform_gallery">
        <figure id="optional-id2">
            <a href="../../assets/docs/images/long-form-content/portrait-ifor-samuel.jpg"  data-lightbox="gallery-longform" data-title="Ifor Samuel &lt;br&gt; &lt;em&gt;Physicist&lt;/em&gt;"><img src="../../assets/docs/images/long-form-content/portrait-ifor-samuel.jpg" alt="alt text for image 1"></a>
            <figcaption class="lightbox-caption">Ifor Samuel <br> <em>Physicist</em></figcaption>
        </figure>
        <figure id="optional-id3">
            <a href="../../assets/docs/images/long-form-content/portrait-john-allen.jpg"  data-lightbox="gallery-longform" data-title="John Allen&lt;br&gt;&lt;em&gt;Physicist&lt;/em&gt;"><img src="../../assets/docs/images/long-form-content/portrait-john-allen.jpg" alt="alt text for image 2"></a>
            <figcaption class="lightbox-caption">John Allen<br><em>Physicist</em></figcaption>
        </figure>
        <figure id="optional-id4">
            <a href="../../assets/docs/images/long-form-content/portrait-ashu-kumar-bansal.jpg"  data-lightbox="gallery-longform" data-title="Ashu Kumar Bansal&lt;br&gt;&lt;em&gt;Optical physicist&lt;/em&gt;"><img src="../../assets/docs/images/long-form-content/portrait-ashu-kumar-bansal.jpg" alt="alt text for image 3"></a>
            <figcaption class="lightbox-caption">Ashu Kumar Bansal<br><em>Optical physicist</em></figcaption>
        </figure>
        <figure id="optional-id4">
            <a href="../../assets/docs/images/long-form-content/portrait-hien-nguyen.jpg"  data-lightbox="gallery-longform" data-title="Hien Nguyen&lt;br&gt;&lt;em&gt;Polymer chemist&lt;/em&gt;"><img src="../../assets/docs/images/long-form-content/portrait-hien-nguyen.jpg" alt="alt text for image 3"></a>
            <figcaption class="lightbox-caption">Hien Nguyen<br><em>Polymer chemist</em></figcaption>
        </figure>
        <figure id="optional-id4">
            <a href="../../assets/docs/images/long-form-content/portrait-olena-kulyk.jpg"  data-lightbox="gallery-longform" data-title="Olena Kulyk&lt;br&gt;&lt;em&gt;Biomedical electronics engineer&lt;/em&gt;"><img src="../../assets/docs/images/long-form-content/portrait-olena-kulyk.jpg" alt="alt text for image 3"></a>
            <figcaption class="lightbox-caption">Olena Kulyk<br><em>Biomedical electronics engineer</em></figcaption>
        </figure>
    </div>
</div>