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');