search

Image lightbox

Pure JS/CSS image lightbox thing. Plug 'n play.

hashtag
Demoarrow-up-right

Downloadchevron-right

hashtag
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).

Simple lightbox

That's it! Try clicking the images and a full-size version should appear on screen.

circle-info

Feel free to fiddle with the CSS transitions as you please; they're just what I set up for testing.

hashtag
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.

Multi-image gallery

hashtag
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:

circle-info

If you encounter any problems or bugs, leave a post herearrow-up-right.

PreviousDownloadNextAlerts & Notifications

Last updated

Was this helpful?