baguetteBox.js

Simple and easy to use lightbox script written in pure JavaScript

Sample gallery

baguetteBox.run('.baguetteBoxOne');

Golden Gate Bridge

Midnight City

Responsive images

baguetteBox.run('.baguetteBoxTwo');

<a href="img/2-1.jpg"
    data-at-450="img/thumbs/2-1.jpg"
    data-at-800="img/small/2-1.jpg"
    data-at-1366="img/medium/2-1.jpg"
    data-at-1920="img/big/2-1.jpg">
        <img src="img/thumbs/2-1.jpg">
</a>

FadeIn animation

baguetteBox.run('.baguetteBoxThree', {
    animation: 'fadeIn',
    noScrollbars: true
});

Small images, buttons disabled (use arrows or swipe gesture)

baguetteBox.run('.baguetteBoxFour', {
    buttons: false
});

Balloon trip

Road to nowhere

Misty landscape

Forest

Single image (buttons hidden by default, custom caption function)

baguetteBox.run('.baguetteBoxFive', {
    captions: function(element) {
        return element.getElementsByTagName('img')[0].alt;
    }
});

A caption in the alt attribute

Usage instructions and source code can be found on GitHub