Simple Gallery Lightbox with Javascript and CSS3 – baguetteBox.js

Category: Gallery , Javascript , Modal & Popup , Recommended | September 17, 2018
Author: feimosi
Views Total: 4,006
Official Page: Go to website
Last Update: September 17, 2018
License: MIT

Preview:

Simple Gallery Lightbox with Javascript and CSS3 – baguetteBox.js

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)'
});

Available callback functions.

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

Changelog:

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.

    Reply

Leave a Reply