Lightbox

Featherlight

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

Download Lightbox

Download Lightbox from here.

Unzip the folder once it’s downloaded - we’ll need to upload some of the files to Neocities!

What’s in the Zip

There are three folders: css, img, js

And two files: index.html, README.markdown

We need to upload just a few of the files:

• css/lightbox.css
• js/lightbox.js
• img/close.png
• img/next.png
• img/prev.png
• img/loading.png

Upload

Upload the files to neocities.

Include

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

<link rel="stylesheet" href="lightbox.css">
<script src="lightbox.js"></script>

Initialise Lightbox

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>

jQuery Basics: Complete!

Great, now it’s time to build our own…

Take me to the next chapter!