BaguetteBox.js – vanilla JS gallery and lightbox!

Simple and easy to use vanilla JS gallery and lightbox!

BaguetteBox.js – vanilla JS gallery solution

I used this library in my biggest project, to render image galleries and manage programmatically. It worked very well on desktop and mobile browser. The solution brings great options of configuration.

Main features:

– written in pure JavaScript, no dependencies required

– multiple-gallery support allows custom options for each

– image captions supported

– responsive images and CSS3 transitions

– SVG buttons, no extra files to download

– supports swipe gestures on touch-screen devices

– full-screen mode available

Setup

npm install baguettebox.js --save

or

yarn add baguettebox.js

or

bower install baguettebox.js --save

Sample

// Import
// const baguetteBox = require('baguettebox.js');

// ES6 modules
import baguetteBox from 'baguettebox.js';

We need to include CSS styles

@import 'baguettebox.js/dist/baguetteBox.min.css';

Initialize the script:

baguetteBox.run('.gallery');

where the first argument is a selector to a gallery (or galleries) containing a tags. Sample HTML code below.

<div class="gallery">
    <a href="img/2-1.jpg" data-caption="Image caption">
        <img src="img/thumbnails/2-1.jpg" alt="First image">
    </a>
    <a href="img/2-2.jpg">
        <img src="img/thumbnails/2-2.jpg" alt="Second image">
    </a>
    ...
</div>

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

Customization

We have wide options to configure, to get what we need.

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

See here for the full list:

https://github.com/feimosi/baguetteBox.js#customization

See also:

https://github.com/feimosi/baguetteBox.js#api

Compatibility

Desktop:

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

Mobile:

– Safari on iOS
– Chrome on Android

License: MIT

Homepage

https://feimosi.github.io/baguetteBox.js

GitHub

https://github.com/feimosi/baguetteBox.js

You may also like:

JS video and photo gallery – blueimp

Fresco – beautiful responsive lightbox

Touch-friendly jQuery carousel plugin – microfiche.js

Responsive photo gallery slider – Jslide

Elastic Grid – a responsive and filterable jQuery portfolio gallery plugin

Flickr-like justified photo gallery – jQuery Justified.js

Enjoy!