Examples

Every gallery on this page is a real SimpleLightbox instance, running the same script and stylesheet that the download contains. Open a photo, move with the arrow keys or a swipe, and close the viewer with ESC or a click outside the image.

Each demo is created with its own selector, so the page itself is also an example of several independent lightboxes living side by side. The snippet under every gallery is the complete configuration it uses.

With no options at all the lightbox collects every matched link, reads the caption from the title attribute of the thumbnail, preloads the neighbouring photos and adds arrows, a counter and a close button.

<div class="gallery">
    <a href="img/full/01.jpg"><img src="img/thumb/01.jpg" alt="Drone Photography" title="Drone Photography"></a>
    <a href="img/full/02.jpg"><img src="img/thumb/02.jpg" alt="Garden swing" title="Garden swing"></a>
    <!-- … -->
</div>

<script>
    var lightbox = new SimpleLightbox('.gallery a');
</script>

Captions sit at the bottom of the image by default. Here they are placed outside the photo and appear a quarter of a second after it. Keep in mind that an outside caption can end up below the visible area when the image is very tall.

new SimpleLightbox('.demo-captions a', {
    captionPosition: 'outside',
    captionDelay: 250
});

Setting animationSlide to false replaces the sliding transition with a fade, and fadeSpeed controls how long it takes. With loop: false the viewer stops at the first and the last photo and hides the arrow that would lead nowhere.

new SimpleLightbox('.demo-fade a', {
    animationSlide: false,
    fadeSpeed: 400,
    loop: false
});

A wide panorama and two portrait shots. The lightbox scales every photo to fit the screen, with widthRatio and heightRatio as the upper limits — here 90 % of the width and 85 % of the height. Nothing is cropped, and small images are not enlarged unless scaleImageToRatio is switched on.

new SimpleLightbox('.demo-sizes a', {
    widthRatio: 0.9,
    heightRatio: 0.85
});

The lightbox reports what it is doing through events. This demo writes the most useful ones into the box below — open the gallery, move through it and close it again while watching the log.

var lightbox = new SimpleLightbox('.demo-events a');

['show', 'shown', 'change', 'changed', 'close', 'closed'].forEach(function (name) {
    lightbox.on(name + '.simplelightbox', function () {
        console.log(name + '.simplelightbox');
    });
});

All options, events and methods are listed in the documentation. The guides go deeper into captions, gestures and galleries that change after the page has loaded.