Simple Gallery Lightbox with Javascript and CSS3 – baguetteBox.js

Category: Gallery , Javascript , Modal & Popup , Recommended | March 31, 2020
Views Total:6,883 views
Official Page:Go to website
Last Update:March 31, 2020


Simple Gallery Lightbox with Javascript and CSS3 – baguetteBox.js


baguetteBox.js is a simple, lightweight, mobile-friendly Javascript library for displaying a gallery of images in a fully responsive & customizable lightbox. You can navigate through the gallery images with arrows navigation or swipe gestures on touch devices.

Basic Usage:

Add the baguetteBox.css in the head and the  baguetteBox.js script at the end of your document.

<link rel="stylesheet" href="css/baguetteBox.css">
<script src="js/baguetteBox.js" async></script>

Insert a group of images with thumbnails into a container element to create a gallery. Use data-caption attribute to add the image caption for each image.

<div class="demo gallery">
  <a href="img/1.jpg" data-caption="Caption 1"><img src="img/thumbs/1.jpg"></a>
  <a href="img/2.jpg" data-caption="Caption 1"><img src="img/thumbs/2.jpg"></a>
  <a href="img/3.jpg" data-caption="Caption 1"><img src="img/thumbs/3.jpg"></a>

Initialize the gallery lightbox.'.demo');

Global options and their defaults:'.demo', {
  captions: true, // display image captions.
  buttons: 'auto', // arrows navigation
  fullScreen: false,
  noScrollbars: false,
  bodyClass: 'baguetteBox-open',
  titleTag: false,
  async: false,
  preload: 2,
  animation: 'slideIn', // fadeIn or slideIn
  verlayBackgroundColor: 'rgba(0,0,0,.8)'

Available callback functions.'.demo', {
  afterShow: null,
  afterHide: null,
  onChange: null


v1.11.1 (03/31/2020)

  • Fix preventDefault inside passive events

v1.11.0 (09/17/2018)

  • Bugfix

You Might Be Interested In:

One thought on “Simple Gallery Lightbox with Javascript and CSS3 – baguetteBox.js

  1. ajay

    Thanks for Sharing, I’m Your Daily user and visit your blog daily in hope that I found something new today and you never disappoint me.


Leave a Reply