Free jQuery Lightbox Plugin – BaguetteBox.js

BaguetteBox is an easy to use, simple and great looking free jquery lightbox script plugin and this script written in pure JavaScript gallery.

Features:

  • Written in pure JavaScript, no dependencies required
  • Multiple galleries support with custom options each
  • Touch-screen devices support with swipe gestures
  • Modern and minimal look
  • Image captions support
  • Responsive images
  • CSS3 transitions
  • SVG buttons, no extra files to download
  • Around 2KB gzipped

Manual Installation:

1. Download baguetteBox.min.css and baguetteBox.min.js files from dist folder.
2. Include them somewhere in you document:

<link rel="stylesheet" href="css/baguetteBox.min.css">
<script src="js/baguetteBox.min.js" async></script>

How to use:

Initialize the script by running:

baguetteBox.run('.gallery', {
  // Custom options
});

where the first argument is a selector to a gallery (or galleries) containing a tags. The HTML code may look like this:

<div class="gallery">
  <a href="img/2-1.jpg" data-caption="Image caption">
  <img src="img/thumbs/2-1.jpg"></a>
  <a href="img/2-2.jpg"><img src="img/thumbs/2-2.jpg"></a>
  ...
</div>

To use captions put title or data-caption attribute on a tag

How to Customize it:

You can pass as a second parameter an object with custom options. The following are available with corresponding defaults:

{
  captions: true, // true|false - Display image captions
  buttons: 'auto', // 'auto'|true|false - Display buttons
  async: false, // true|false - Load files asynchronously
  preload: 2, // [number] - How many files should be preloaded from current image
  animation: 'slideIn' // 'slideIn'|'fadeIn' - Animation type
}

buttons: ‘auto’ hides buttons on touch-enabled devices and when only one image is displayed.

Compatibility

  • IE8+
  • Chrome
  • Firefox 3.6+
  • Opera 12+

MORE INFO

Share On Facebook
Share On Twitter
Share On Google Plus
Share On Linkedin
Share On Pinterest

Be the first to comment

Leave a Reply

Your email address will not be published.

*


*