Simple and easy to use lightbox script.

Demo page

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

npm install baguettebox.js --save

yarn add baguettebox.js

bower install baguettebox.js --save

1. Use one of the following CDN providers:

https://cdnjs.com/libraries/baguettebox.js

http://jsdelivr.com/projects/baguettebox.js

3. Copy URLs of the latest version (both .js and .css files)

4. Paste the URLs in your HTML file:

<link rel="stylesheet" href="<CSS URL>">
<script src="<JS URL>" async></script>

1. Download baguetteBox.min.css and baguetteBox.min.js files from the 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>

Initialize the script by running:

baguetteBox.run('.gallery');

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" alt="First image">
    </a>
    <a href="img/2-2.jpg">
        <img src="img/thumbs/2-2.jpg" alt="Second image">
    </a>
    ...
</div>

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

You can pass an object with custom options as the second parameter.

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

The following options are available:

• run - initialize baguetteBox.js
• showNext - switch to the next image
• showPrevious - switch to the previous image
• destroy - remove the plugin with any event bindings

The first two methods return true on success or false if there are no more images to be loaded.

To use this feature, simply put data-at-{width} attributes on a tags with a value being the 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. That last data-at-X image is also used in the case of a screen larger than X.

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 the href attribute as a fallback (link to a bigger image e.g. of HD size) for older browsers.

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

Feel free to report any issues!

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

Copyright (c) 2016 feimosi

This content is released under the MIT License.