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!