Author: | Juggern4ut |
---|---|
Views Total: | 843 views |
Official Page: | Go to website |
Last Update: | March 21, 2020 |
License: | MIT |
Preview:

Description:
LumensBox is an animated, draggable, touch-enabled lightbox & modal plugin in pure (Vanilla) JavaScript.
The lightbox can be closed by clicking outside, pressing the escape key or clicking the X in the top right. All those options can be individually configured
Key Features:
- Draggable via mouse and touch events.
- Open/close animations: grow, fadein, jelly or fadedown.
- Allows to open another lightbox from an activated lightbox.
- Callback functions.
How to use it:
1. Import the necessary JavaScript and CSS files into the HTML file.
<link rel="stylesheet" href="dist/css/main.css" /> <script src="js/_lightbox.js"></script>
2. Create a trigger button to toggle the lightbox.
<button id="basic">Launch</button>
3. Initialize the lightbox plugin.
window.basicLightbox = new Lightbox();
4. Set the title & content of the lightbox. It can contain everything you can place in HTML such as Iframes, Images, Videos or just plain Text.
window.basicLightbox.setTitle("Basic Lightbox"); window.basicLightbox.setContent([ "<p>This is a basic Lightbox with no options passed.</p>", "<p>It can contain everything you can place in HTML such as Iframes, Images, Videos or just plain Text</p>", "<p>The lightbox can be closed by clicking outside, pressing the escape key or clicking the X in the top right. All those options can be individually configured</p>" ]);
5. Enable the trigger button to launch the lightbox.
basicTrigger.onclick = () => window.basicLightbox.open();
6. Possible options to config the lightbox.
- closeable: If set to false, all triggers to close the lightbox will be automatically overwritten
- draggable: If set to true, the lightbox can be dragged by grabbing the titlebar
- closeHandler: If set to false, the lightbox will have no close button in the top right
- closeByEscape: If set to false, the lightbox can’t be closed by pressing escape
- clickOutsideToClose: If set to true, the lightbox can be closed by clicking outside of it
- openAnimation: The animation that should be used to open the lightbox. Use: grow, fadein, jelly or fadedown
- closeAnimation: The animation that should be used to close the lightbox. Use: shrink, fadeout or fadeup
- animationDuration: The duration of the animation in milliseconds
- boundsOffset: If the lightbox is dragged outside of the page it will snap back with this margin
- keepInBounds: If set to true, the lightbox will snap back into bounds if dragged outside
- appendingElement: The Lightbox will be appended to this element. The body is strongly recommended here, as it is the default anyways.
window.basicLightbox: new Lightbox({ additionalClasses: [], closeable: true, draggable: false, closeHandler: true, closeByEscape: true, openAnimation: "fadedown", closeAnimation: "fadeup", clickOutsideToClose: true, animationDuration: 500, boundsOffset: 20, keepInBounds: true, appendingElement: document.querySelector("body") });
7. Callback functions.
- open: Callback that gets called when the lightbox starts opening
- opened: Callback that gets called when the lightbox finished opening
- close: Callback that gets called when the lightbox starts closing
- closed: Callback that gets called when the lightbox finished closing
- destroyed: Callback that gets called when the lightbox is destroyed
window.basicLightbox = new Lightbox({ open = () => {}, opened = () => {}, close = () => {}, closed = () => {}, destroyed = () => {} }),
Changelog:
03/21/2020
- Better documentation