Pure JavaScript Image Lightbox Library – Luminous

Category: Javascript , Modal & Popup , Recommended | January 30, 2016
Author:imgix
Views Total:2,337 views
Official Page:Go to website
Last Update:January 30, 2016
License:MIT

Preview:

Pure JavaScript Image Lightbox Library – Luminous

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',

    // Which attribute to pull the caption from, if any.
    captionAttribute: 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,

    // A selector defining what to append the lightbox element to.
    appendToSelector: 'body',

    // 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);

You Might Be Interested In:


Leave a Reply