Skip to content

README.md

Latest commit

 

History

History
65 lines (47 loc) · 1.2 KB

README.md

File metadata and controls

65 lines (47 loc) · 1.2 KB

ensemble Lightbox

ensemble.Lightbox JavaScript class, based on ensemble.Modal and ensemble from loltgt

This lightbox dialog component supports: image, video, audio, iframe, JS and inline content, PDF.

It has a slider, built-in HTMLDialogElement and swipe gesture navigation.

It comes with options and hooks to customize.

Demo

Live demo on this page: https://loltgt.github.io/ensemble-lightbox/demo/

View source from demo to discover options and examples.

Install

Using npm:

npm install --save-dev loltgt/ensemble-lightbox

Usage

Simple usage example:

const lightbox = new ensemble.Lightbox(document.body,
  {
    selector: "a",
    infinite: false
  }
);

for (const item of document.querySelectorAll("a")) {
  item.addEventListener("click", lightbox.open);
}

Another example, passing contents via options:

const lightbox = new ensemble.Lightbox(
  {
    contents: [
      {
        type: "image",
        src: "image.png",
        alt: "Image"
      },
      {
        type: "iframe",
        src: "https://example.org/"
      }
    ]
  }
);

lightbox.open();

License

MIT License