Lightbox

Featherlight

Provides a simple way to create a gallery
with both thumbnails and full-view images.

Download Lightbox from here.

Unzip the folder once it’s downloaded - we’ll need
to add some of the files to our site!

There are three folders: css, img, js

And two files: index.html, README.markdown

We need to copy just a few of the files:

Copy the files specified on the previous slide,
making sure to keep them in their correct folders!

Now that we’ve uploaded the files, we need
to tell our HTML page that they exist.

First add the CSS to your page’s head:

<head>
    <title>My Website</title>
    
    <link rel="stylesheet" href="css/lightbox.css">
</head>

Then add the Lightbox JavaScript after jQuery:

    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script src="js/lightbox.js"></script>
</body>

This plugin doesn’t need JavaScript initialisation.

Instead, wrap each image in a link with a data-lightbox attribute.

<a href="image.png" data-lightbox="gallery">
    <img src="image.png">
</a>

Thumbs Up!

Great, now for the next bit…