Simple Gallery Lightbox with Javascript and CSS3 – baguetteBox.js

Preview:

Description:

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>
</div>

Initialize the gallery lightbox.

baguetteBox.run('.demo');

Global options and their defaults:

baguetteBox.run('.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)',
  closeX: closeX,
  leftArrow: leftArrow,
  rightArrow: rightArrow,
});

Available callback functions.

baguetteBox.run('.demo', {
  afterShow: null,
  afterHide: null,
  onChange: null
});

Changelog:

v1.13.0 (11/09/2024)

• simple support for RTL
• add AVIF image support

v1.12.0 (07/14/2024)

• add an option for custom buttons (leftArrow, rightArrow, closeX)

v1.11.1 (03/31/2020)

• Fix preventDefault inside passive events

v1.11.0 (09/17/2018)

• Bugfix