Display Grouped Images In A Lightbox – ImageBox

Preview:

Description:

ImageBox is a lightweight, vanilla JavaScript plugin to display a single image or grouped images in a responsive lightbox.

How to use it:

1. Import the ImageBox’s JavaScript and CSS files into the document.

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

2. To create a single image lightbox, just add the data-imagebox attribute to the img tag and done.

<img src="image.jpg" data-imagebox>

3. To display multiple images in the lightbox, add the data-imagebox="gallery" attribute to the images.

<img src="image1.jpg" data-imagebox data-imagebox="gallery">
<img src="image2.jpg" data-imagebox data-imagebox="gallery">
<img src="image3.jpg" data-imagebox data-imagebox="gallery">

4. Sometimes you might need to display the large version of the image in the lightbox.

<img src="img_small.jpg" data-imagebox data-imagebox-src="img_large.jpg">

5. You can also define the image description in the data-imagebox-caption attribute:

<img src="img_small.jpg" data-imagebox data-imagebox-caption="Image Description">

6. Override the default options to customize the lightbox.

imagebox.options({
  info: false,
  swipeToChange: true,
  swipeToClose: true,
  keyControls: true,
  closeEverywhere: true,
  htmlCaption: false,
  autoInit: true
});

Changelog:

v1.3.1 (03/05/2023)

• Remove inline events, use EventListeners
• Update deprecated KeyboardEvent.keyCode
• Clear galleries in imagebox object on (re)init
• Replace window.onload
• Added autoInit option
• Added htmlCaption option

v1.3.0 (03/30/2021)

• Multiple Galleries
• Smooth transition between image change
• A lot more ImageBox options
• Extended keyboard support
• Swipe gestures for mobile devices

v1.2.0 (03/21/2020)

• Supports IE11 and Edge Browser
• Allows you to close the ImageBox with the ‘Esc’ button
• Added more options (display the info in the console)
• Renamed data-imagebox-description to data-imagebox-caption
• Hide the image viewer if you close the ImageBox