20Lightbox

The important stuff.

Let’s look at the original (basic) full width image that we created in § 15.1, we only need the HTML, this was it:

<div class="fig-row">                    <!-- Start of figure -->
    <figure class="fig-col fig1-1" id="js--f99-01">
<img src="01-pages/99-00-typicals/02-images/fig-99-01.png" alt="Figure 99.1 - Full width image">
        <figcaption>Figure 99.1 &emsp; Full width figure</figcaption>  <!-- Caption -->
    </figure>
</div>

To make it work with Lightbox, we need to put an anchor element around the <img> to make it clickable; it always has this form:

<div class="fig-row">                    <!-- Start of figure -->
    <figure class="fig-col fig1-1" id="js--f99-01">
<a href="01-pages/99-00-typicals/02-images/fig-99-01.png" data-lightbox="fig-set" data-title="Figure 99.1 — Full width image">
<img src="01-pages/99-00-typicals/02-images/fig-99-01.png" alt="Figure 99.1 - Full width image">
        </a>
        <figcaption>Figure 99.1 &emsp; Full width figure</figcaption>  <!-- Caption -->
    </figure>
</div>

So what does that do?

The anchor element <a> gives us a link to the image that we want to display in the Lightbox, the href attribute specifies the image that is to be displayed (generally, this is the same image that is in the <img> element, but it doesn’t have to be, you could display a completely different image).

This anchor element next has a peculiar attribute: data-lightbox="fig-set". This attribute is used to trigger the Lightbox software, data-lightbox is monitored by some jQuery in the lightbox.js file and if clicked cause the Lightbox to activate.

The thing that comes after it "fig-set" is a value that I’ve made up. Lightbox will display more than one image in turn; multiple images are called a gallery (that is what the previous and next buttons do, the cycle through all the picture in the gallery). The value assigned to data-lightbox, in this case fig-set identifies which pictures are in which gallery. I.e. any picture that has data-lightbox="fig-set" will be displayed in the gallery (you will be able to click through all of them using the next and prev buttons).

You don’t have to use fig-set, any name will be OK, it just has to be the same for all the images you want in the gallery.

Generally, I want all the images on a given web page to be part of the Lightbox gallery, hence I always use data-lightbox="fig-set" for every Lightbox image.

• Lightbox will only cycle through the image on the current web page; it won’t load any images from other pages even if they are assigned the value fig-set.

The last bit: data-title="Figure 99.1 — Full width image" is the caption that appears below the Lightbox image, highlighted below:

<a href="[image path and name]" data-lightbox="[gallery name]" data-title="  ">
<img src="[image path and name]" alt="[caption]">
</a>
<figcaption>[caption]</figcaption>

Where:

[image path and name] is the path and filename of the image being displayed
[gallery name] is a common name for all the images that are in the same gallery
[caption] is the image caption (on the web page and in Lightbox)