Pure JavaScript Image Lightbox Library – Luminous

Preview:

Description:

Luminous is a super tiny, zero-dependency JavaScript library for overlaying your images like a lightbox.

Features:

• Image loader.
• CSS3 animation.
• Callback events.
• Lots of customization options.

Basic usage:

Include the Luminous’s stylesheet and JavaScript into the html page.

<link rel="stylesheet" href="dist/luminous-basic.css">
<script src="dist/luminous.js"></script>

Wrap your image into an <a> tag pointing to the larger image.

<a class="zoom-in" href="large.jpg">
  <img src="small.jpg">
</a>

Active the image lightbox.

new Luminous(document.querySelector('a'));

All configuration options and callback functions.

var options = {
  // Prefix for generated element class names (e.g. `my-ns` will
  // result in classes such as `my-ns-lightbox`. Default `lum-`
  // prefixed classes will always be added as well.
  namespace: null,
  // Which attribute to pull the lightbox image source from.
  sourceAttribute: "href",
  // Captions can be a literal string, or a function that receives the Luminous instance's trigger element as an argument and returns a string. Supports HTML, so use caution when dealing with user input.
  caption: null,
  // The event to listen to on the _trigger_ element: triggers opening.
  openTrigger: "click",
  // The event to listen to on the _lightbox_ element: triggers closing.
  closeTrigger: "click",
  // Allow closing by pressing escape.
  closeWithEscape: true,
  // Automatically close when the page is scrolled.
  closeOnScroll: false,
  // Disable close button
  showCloseButton: false,
  // A node to append the lightbox element to.
  appendToNode: document.body,
  // A selector defining what to append the lightbox element to.
  // This will take precedence over `appendToNode`.
  appendToSelector: null,
  // If present (and a function), this will be called
  // whenever the lightbox is opened.
  onOpen: null,
  // If present (and a function), this will be called
  // whenever the lightbox is closed.
  onClose: null,
  // When true, adds the `imgix-fluid` class to the `img`
  // inside the lightbox. See https://github.com/imgix/imgix.js
  // for more information.
  includeImgixJSClass: false,
  // Add base styles to the page. See the "Theming"
  // section of README.md for more information.
  injectBaseStyles: true
};
new Luminous(document.querySelector('a'), options);

Changelog:

v2.4.0 (03/05/2023)

• LuminousGallery onChange callback