Display Grouped Images In A Lightbox – ImageBox

Category: Gallery , Modal & Popup | March 21, 2020
Author:tobiasroeder
Views Total:865 views
Official Page:Go to website
Last Update:March 21, 2020
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:

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

<link href="css/imagebox.css" rel="stylesheet">
<script src="js/imagebox.js"></script>
<!-- For IE & Edge -->
<script src="js/imagebox.ie.min.js"></script>

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

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

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">

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">

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

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

A full example:

<img src="https://source.unsplash.com/lQL-CpBxuD8/400x300" data-imagebox="gallery" data-imagebox-src="https://source.unsplash.com/lQL-CpBxuD8/1200x900" data-imagebox-caption="CSSSCRIPT.COM">

<img src="https://source.unsplash.com/-djRG1vB1pw/400x300" data-imagebox="gallery" data-imagebox-src="https://source.unsplash.com/-djRG1vB1pw/1200x900" data-imagebox-caption="CSSSCRIPT.COM">

<img src="https://source.unsplash.com/Pdbm_hkG0wE/400x300" data-imagebox="gallery" data-imagebox-src="https://source.unsplash.com/Pdbm_hkG0wE/1200x900" data-imagebox-caption="CSSSCRIPT.COM">

Changelog:

v1.2.0 (21/03/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