Animated Draggable Lightbox In Vanilla JavaScript – LumensBox

Category: Javascript , Modal & Popup | March 21, 2020
Author:Juggern4ut
Views Total:505 views
Official Page:Go to website
Last Update:March 21, 2020
License:MIT

Preview:

Animated Draggable Lightbox In Vanilla JavaScript – LumensBox

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

You Might Be Interested In:


Leave a Reply