Display Grouped Images In A Lightbox – ImageBox

Category: Gallery , Modal & Popup | April 29, 2019
Author: tobiasroeder
Views Total: 446
Official Page: Go to website
Last Update: April 29, 2019
License: MIT


Display Grouped Images In A Lightbox – ImageBox


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>

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-description="CSSSCRIPT.COM">

<img src="https://source.unsplash.com/-djRG1vB1pw/400x300" data-imagebox="gallery" data-imagebox-src="https://source.unsplash.com/-djRG1vB1pw/1200x900" data-imagebox-description="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-description="CSSSCRIPT.COM">

You Might Be Interested In:

Leave a Reply