Sample gallery
baguetteBox.run('.baguetteBoxOne');
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',
});
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) {
// `this` == Array of current gallery items
return element.getElementsByTagName('img')[0].alt;
}
});
Usage instructions and source code can be found on
GitHub