Create Responsive and Beautiful Full-page Lightbox with BaguetteBox.js

There are dozens of lightbox plugins and they’re all great for different reasons. Some work better on portfolio sites while others are best for responsive layouts.

But, one of my favorite new plugins to use is baguetteBox.js, created by JavaScript developer Marek Grzybek.

Of course, this plugin is totally free to use and open-sourced on GitHub if you wanna dig into the code manually.

The library does not have any dependencies, so you can run it without jQuery, Zepto, or anything else. It’s a pure JavaScript library with a really simple setup.

It’s meant to work perfectly on mobile devices, so it can support swipes and taps, along with the default behavior on desktops & laptops. It’s one of the few full-screen galleries that support mobile interactions, along with a full modal effect.

Check out the demo page to see it live in action. It has a fully featured gallery, along with the one line of code required to get it working:


baguetteBox.run('.baguetteBoxOne');

So, this targets a container element with the class .baguetteBoxOne and the entire gallery works off that.

You could set custom options if you wish for things like captions, button styles, preload features, and callback methods for onclick/onchange events. All of these options are well-documented on GitHub if you wanna dive in.

But, it really doesn’t take much to get this going beyond a container element and some basic image elements.

You have full control over the animations, image sizes, swipe effects, and gallery content such as titles/captions. This does require JavaScript, so it doesn’t have a pure CSS alternative to the modal. But, since most browsers support JavaScript it shouldn’t be a problem.

To learn more, visit the baguetteBox.js main page and you can also share your thoughts with the creator on Twitter @feimosi.