Display Grouped Images In A Lightbox – ImageBox

Category: Gallery , Javascript , Modal & Popup | March 29, 2023
Author:tobiasroeder
Views Total:631 views
Official Page:Go to website
Last Update:March 29, 2023
License:MIT

Preview:

Display Grouped Images In A Lightbox – ImageBox

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.2 (03/29/2023)

  • Icons – PNG > SVG
  • Left/Right spam prevention

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

You Might Be Interested In:


One thought on “Display Grouped Images In A Lightbox – ImageBox

  1. Tobias

    In the version 1.2.0 ‘data-imagebox-description’ is replaced with ‘data-imagebox-caption’.

    Reply

Leave a Reply