Animated Draggable Lightbox In Vanilla JavaScript – LumensBox

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