Gather Workshops Logo


Popup image gallery


Lightbox Logo

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 the files to neocities.


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">

Thumbs Up!

jQuery Basics: Complete!

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

Take me to the next chapter!