Image lightbox
Pure JS/CSS image lightbox thing. Plug 'n play.
Download
Usage
First, you'll need to load the .JS and .CSS files. Place these lines somewhere between the <head> and </head> tags:
<script src="enlargeGallery.js" type="text/javascript"></script>
<link href="enlargeGallery.css" rel="stylesheet" />Next, you'll want to format your images as below:
<div class="gallery">
<img src="image-1.png" />
<img src="image-2.png" />
<img src="image-3.png" />
</div>The important bits are that the outer <div> tag has the class gallery, and none of the <img> tags are nested (ie. wrapped in another <div, or something).
That's it! Try clicking the images and a full-size version should appear on screen.
Multiple-Image Galleries
Sometimes your gallery will have more than one image, and closing and re-opening the dialog to view each one just isn't efficient. Luckily, there's a way around that:
Simply give each image a data-gallery-index parameter and label the sequence!
Be careful: the counting starts from 0 rather than 1. Also make sure you don't skip numbers or anything, it doesn't like that.
Alternate image URLs
If you're loading a particularly large gallery, it may not be practical to load full-size versions of each image. The downside to this is that, when enlarged in a lightbox, these images will continue to be low resolution.
Luckily, you can specify an alternate URL for the enlarged image using the data-large-src attribute:
Last updated
Was this helpful?