A jQuery plugin for static websites. 4KB lightbox.min.js + 1KB lightbox.min.css
Example:
Lightbox Setup
(1.) Include jQuery and the Lightbox Script and Stylesheet
<-- Scripts --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="js/lightbox.min.js"></script> <-- Stylesheet --> <link rel="stylesheet" href="css/lightbox.min.css">
Then, copy lightbox.min.js and lightbox.min.css into your project.
(2.) Create an Instance of the Lightbox on Your Webpage
For a thumbnail:
<a href="image.png" data-lightbox="lightbox"> <img class="lightbox-thumbnail" src="image-thumbnail.png"> </a>
You may use a smaller (thumbnail) image within the link. (But here I have used the same image, relying upon img {max-width: 100%, height: auto;} to control the size of the 'thumbnail'.)
The lightbox script copies the linked image from <a href="your-image.png" data-lightbox="lightbox">, wraps it in a <div class="lightbox"> and <img> tag, and presents it as a popover lightbox.
While loading the image a large CSS3 animated spinner icon temporarily appears.
A dismiss icon is added in the lightbox top right corner.
If there is a title, the script also adds it in the lightbox bottom left corner (copying the title from <a href="image.png" title"Image Title" data-lightbox="lightbox">).
And if the lightbox is in a group data-lightbox="lightbox-group-[identifier]", then previous and next navigation icons and a counter in the lightbox top right corner beside the dismiss icon .
For the icons I have included Font Awesome. (Swap these out of you are using a different icon font.)
You can have images of any dimension or orientation (portrait or landscape). The lightbox script will figure out how to display the image by detecting its actual width and height, and by detecting the visitor's window width and height, and then making the necessary adjustments so that the image appears neatly on the screen.
To dismiss a lightbox, click the dismiss icon that will appear in the top-right corner of the lightbox. Or else click anywhere on the semi-transparent dark overlay (i.e. click outside the lightbox). And if the image fails to appear, the loading can be cancelled by clicking the same overlay or clicking the "lightbox loading" spinner .
<img class="lightbox-thumbnail"> has been styled with a white padding "photo frame" and a thin grey box-shadow. The box-shadow turns blue and expands on hover, to notify the visitor that the thumbnail image is clickable.
(3.) Lightbox Titles
<a href="image.png" title="Image Title" data-lightbox="lightbox">
<img class="lightbox-thumbnail" src="image-thumbnail.png">
</a>
The title should be short, so that it can fit on a small-screen (phones) lightbox.
Examples:
(4.) Lightbox Image Groups
If you have a group of images that need to be viewed in a combined lightbox (with previous and next navigation icons and a counter) then all you need to do is add data-lightbox="lightbox-group-[identifier]" instead of data-lightbox="lightbox"
<a href="images/filenameA.jpg" data-lightbox="lightbox-group-1" title="Whatever">
<img class="lightbox-thumbnail" src="images/filenameA-thumb.jpg">
</a>
<a href="images/filenameB.jpg" data-lightbox="lightbox-group-1" title="Whatever">
<img class="lightbox-thumbnail" src="images/filenameB-thumb.jpg">
</a>
<a href="images/filenameC.jpg" data-lightbox="lightbox-group-1" title="Whatever">
<img class="lightbox-thumbnail" src="images/filenameC-thumb.jpg">
</a>
[identifier] can be any number, letter or word.
The image group will 'cycle' if you continue clicking an arrow, whether forwards or backwards). There is no 'timed automatic' cycle, so your visitors can spend as long as they like looking at your images.