Adding an album using Lightbox2

tl;dr

Use the following to make a lightbox album with one image on the web page and several images, with different captions, displayed in the album when you click on the visible image.

{{<lightbox src="a_busy_picture.jpg" title="Busy diagram with lots going on" lightbox="diagram" class="small">}}General description{{</lightbox>}}
{{<lightbox src="some_detail_of_this_bit.jpg" title="Here is some detail about this bit" lightbox="diagram" class="small" hidden=true >}}{{</lightbox>}}
{{<lightbox src="some_detail_of_that_bit.jpg" title="Here is some detail about that bit" lightbox="diagram" class="small" hidden=true >}}{{</lightbox>}}
{{<lightbox src="some_more_detail_of_that_bit.jpg" title="Here is some more detail about that bit" lightbox="diagram" class="small" hidden=true >}}{{</lightbox>}}

Partial and shortcode

A partial and associated shortcode have been created to easily make use of Lightbox2.

When you use the shortcode, the page should automatically pull in the minimised Javascript and CSS required (this is performed in head-meta.html which, when appropriate, calls the partial lightbox-init.html which in turn includes the required JS and CSS files).

To include one or more images linked together in an lightbox use the shortcode

{{<lightbox src="JalviewjsInAction.png" class="right-image" lightbox="jalview-js-in-action" title="3D structure, tree and multiple sequence alignment of Human orthologs of the acetylcholine receptor taken from PF00001, all running in JavaScript">}}JalviewJS in Action{{</lightbox>}}

To do the same as a partial, use

{{ partial "lightbox.html" (dict "page" $.Page "src" "JalviewjsInAction.png" "class" "right-image" "lightbox" "jalview-js-in-action" "title" "3D structure, tree and multiple sequence alignment of Human orthologs of the acetylcholine receptor taken from PF00001, all running in JavaScript") }}

but you must also remember to run {{ partial "lightbox-init.html" . }} beforehand as the head-meta.html only knows if shortcodes are used.

The parameters you can use are:

parameter how it is used
src Mandatory. This is the source image file, which is passed to the partial img-auto-src.html to generate different sizes of the image for different screen sizes/resolutions.
lightbox Optional. This is the name of the lightbox connecting multiple images. If you don’t supply a value, a default lightbox for the page is used.
name Optional. This sets a value used as a default for other parameters. It defaults to the .Inner text.
title Optional. Defaults to name. This is the value used for lightbox’s data-title.
alt Optional.
class Optional. You can use this to add extra class values to the <img> tag.
hidden Optional. This is a boolean value (so don’t enclose the value in quotation marks, but do put a space after it) that defaults to false. If it is true then the image will not appear in the page, but will appear in the lightbox album. This is ideal for having one image that clicks to see a sequence of more detailed images and descriptions.
Inner text Optional.

The img’s title attribute has a slightly complicated default value. It is set to name but if name is empty then it is set to title. This is to allow a sensible tooltip text to appear on the image on the page.

Note that it is kind of up to you to style the images that appear on the page. This partial is just using img-auto-src to insert an <img> tag.

e.g.

{{<lightbox src="001.jpg" class="small">}}Salamanca plaza major{{</lightbox>}}
{{<lightbox src="002.jpg" class="small">}}Gaudi house, Barcelona{{</lightbox>}}
{{<lightbox src="007.jpg" class="small">}}The same Gaudi house{{</lightbox>}}
{{<lightbox src="012.jpg" class="small">}}Arriving in Cusco!{{</lightbox>}}
{{<lightbox src="142.jpg" class="small">}}A bridge in Salamanca{{</lightbox>}}
{{<lightbox src="155.jpg" class="small">}}A river somewhere in Perthshire{{</lightbox>}}
{{<lightbox src="176.jpg" class="small">}}Wool in the Sacred Valley, Peru{{</lightbox>}}
{{<lightbox src="252.jpg" class="small">}}Machu Picchu{{</lightbox>}}
{{<lightbox src="321.jpg" class="small">}}An impressive fountain near Segovia{{</lightbox>}}

yields

Salamanca plaza major Gaudi house, Barcelona The same Gaudi house Arriving in Cusco! A bridge in Salamanca A river somewhere in Perthshire Wool in the Sacred Valley Machu Picchu An impressive fountain near Segovia

but

{{<lightbox src="252.jpg" title="Machu Picchu" lightbox="peru" class="small">}}Peru pics{{</lightbox>}}
{{<lightbox src="012.jpg" title="Arriving in Cusco!" lightbox="peru" class="small" hidden=true >}}{{</lightbox>}}
{{<lightbox src="176.jpg" title="Wool in the Sacred Valley" lightbox="peru" class="small" hidden=true >}}{{</lightbox>}}

just makes

Peru pics

Where the other two grouped pictures are hidden from the main page, and the displayed (first) image has a different tooltip text for the embedded image than the image and title in the album.