baguetteBox.js

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 animataion

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

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

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

Single image (buttons hidden by dafault)

baguetteBox.run('.baguetteBoxFive');