baguetteBox.js

Simple and easy to use lightbox script.

Demo page

Features

• Written in pure JavaScript, no dependencies required
• Multiple-gallery support, allows custom options for each
• Supports swipe gestures on touch-screen devices
• Modern and minimal look
• Image captions support
• Responsive images
• CSS3 transitions
• SVG buttons, no extra files to download
• Around 2.3KB gzipped

Installation

Bower

bower install baguettebox.js

Manually

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

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

Usage

Initialization

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.

Additional public methods

• showNext - switch to the next image
• showPrevious - switch to the previous image

They both return true on success or false if there's no more images to be loaded.

Responsive images

To use this feature, simply put data-at-{width} attributes on a tags with value being a path to the desired image. {width} should be the maximum screen width the image can be displayed at. The script chooses the first image with {width} greater than or equal to the current screen width for best user experience.

Here's an example of what the HTML code can look like:

<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>

If you have 1366x768 resolution baguetteBox.js will choose "img/medium/2-1.jpg". If, however, it's 1440x900 it'll choose "img/big/2-1.jpg". Keep href attribute as a fallback (link to a bigger image eg. Full HD).

Customization

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

{
  captions: true,       // true|false|callback(gallery, element) - Display image captions 
                        //   or return from the callback 
  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'|false - Animation type
  afterShow: null,      // callback - To be run after showing the overlay
  afterHide: null,      // callback - To be run after hiding the overlay
  onChange: null,       // callback(currentIndex, imagesElements.length) - When image changes
  filter: /.+\.(gif|jpe?g|png|webp)/i // RegExp object - pattern to match image files
}

buttons: 'auto' hides buttons on touch-enabled devices or when only one image is displayed.

Compatibility

• IE 8+
• Chrome
• Firefox 3.6+
• Opera 12+
• Safari 5+
• Sleipnir

Notes

Feel free to report any bugs!

Credits

Creation of baguetteBox.js was inspired by a great jQuery plugin touchTouch.

License

Copyright (c) 2014 feimosi

This content is released under the MIT License.