Author: | imgix |
---|---|
Views Total: | 99 views |
Official Page: | Go to website |
Last Update: | March 5, 2023 |
License: | MIT |
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