Lightbox

Lightbox is a UI component for displaying images by filling the screen and dimming out the rest of the application.

Learn more about the Lightbox plugin.

constructor

constructor(options?: Lightbox.Options);

The ui.Lightbox constructor accepts several parameters:

title

[optional] The image caption.

image

[required] The path or URL to the image.

top

[optional] The distance from the top edge of the image to the top of the screen. The default is 100.

windowArea

[optional] The maximum percentage of the screen covered by lightbox.The default is 0.8.

closeAnimation

[optional] Set to false if you don't want the lightbox to be closed in an animated fashion.

closeButton

[optional] Set to false if you don't want to display the small close button in the top left corner of the lightbox. Note that the lightbox will still be closable by clicking anywhere outside the lightbox area.

downloadable

[optional] If true, a default download button is added to the lightbox (after any buttons specified). When clicked, this button triggers the downloadAction ('download' by default).

fileName

[optional] The filename of downloaded images. By default, the downloaded images are named 'Image'.

downloadAction

[optional] If the action action:[downloadAction] is triggered on the lightbox, the lightbox image is downloaded to the user computer. By default, the download action is 'download'. Downloaded images will have fileName as filename.

buttons

[optional] Buttons to show under the lightbox title. Explained in Dialog. Specifically, a custom download button can be created by providing a button that has downloadAction as its action ('download' by default).

Methods

open()

lightbox.open(): this;

Open the lightbox.

close()

lightbox.close(): this;

Close the lightbox.

on()

Register a handler function that will be called whenever eventName is triggered. The optional context is an object that will be the context of the handler function (the this).

lightbox.on(eventName: string, callback: EventHandler, context?: any): this;

Events

close:animation:complete

Triggered when the lightbox is actually removed from the DOM, i.e. when the close animation finishes.

close

Triggered when the lightbox gets closed.

Types

Easing

type Easing = string;

Options

Lightbox.Options extends Dialog.Options.

interface Options extends Dialog.Options {
    image: string;
    downloadable?: boolean;
    fileName?: string;
    closeAnimation?: {
        delay?: number;
        duration?: number;
        easing?: Easing;
        properties?: {
            opacity?: number
        }
    };
    top?: number;
    windowArea?: number;
    openAnimation?: boolean
}