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

BaguetteBox.js - vanilla JS gallery / lightbox!
BaguetteBox.js – vanilla JS gallery / lightbox!


npm install baguettebox.js --save


yarn add baguettebox.js


bower install baguettebox.js --save


// 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:'.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 href="img/2-2.jpg">
        <img src="img/thumbnails/2-2.jpg" alt="Second image">

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


We have wide options to configure, to get what we need.'.gallery', {
    // Custom options

See here for the full list:

See also:



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


– Safari on iOS
– Chrome on Android

License: MIT




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