Sample gallery

baguetteBox.run('.baguetteBoxOne');

Responsive images

baguetteBox.run('.baguetteBoxTwo');

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

FadeIn animation

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

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

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

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

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