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 add some of the files to our site!
What’s in the Zip
There are three folders: css, img, js
And two files: index.html, README.markdown
We need to copy just a few of the files:
- css/lightbox.css
- js/lightbox.js
- img/close.png
- img/next.png
- img/prev.png
- img/loading.png
Add the files to your site
Copy the files specified on the previous slide,
making sure to keep them in their correct folders!
Include the LightBox CSS and JavaScript
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>
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>
Lightbox: Complete!
Great, now for the next bit…
Loading...