Author: | tobiasroeder |
---|---|
Views Total: | 512 views |
Official Page: | Go to website |
Last Update: | March 5, 2023 |
License: | MIT |
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
In the version 1.2.0 ‘data-imagebox-description’ is replaced with ‘data-imagebox-caption’.