JointJS+ Lightbox

ui.Lightbox is a UI component for displaying images by filling the screen and dimming out the rest of the application. ui.Lightbox component nicely auto-adjusts based on the size of the screen.

Installation

Include joint.ui.lightbox.js and joint.ui.lightbox.css files and joint.ui.dialog.js and joint.ui.dialog.css dependencies (ui.Lightbox inherits from ui.Dialog) to your HTML:

<link rel="stylesheet" type="text/css" href="joint.ui.dialog.css">
<link rel="stylesheet" type="text/css" href="joint.ui.lightbox.css">
<script src="joint.ui.dialog.js"></script>
<script src="joint.ui.lightbox.js"></script>

Usage

Create an object of joint.ui.Lightbox type and call the open() method in order to open the lightbox.

const lightbox = new joint.ui.Lightbox({
    title: 'Image caption goes here.',
    image: 'images/lightbox.png'
});
lightbox.open();

Another common usage is opening images in lightbox on click:

document.querySelector('img').addEventListener('click', (evt) => {
    new joint.ui.Lightbox({
        title: evt.target.getAttribute('title'),
        image: evt.target.getAttribute('src')
    }).open();
});

The downloadable option offers an easy way to download an image:

document.querySelector('img').addEventListener('click', function(evt) => {
    new joint.ui.Lightbox({
        title: evt.target.getAttribute('title'),
        image: evt.target.getAttribute('src'),
        downloadable: true
    }).open();
});

Configuration

The following table lists options that you can pass to the ui.Lightbox constructor function:

title	The image caption.
image	The path or URL to the image.
top	The distance from the top edge of the image to the top of the screen. Default is 100.
windowArea	The maximum percentage of the screen covered by lightbox. Default is 0.8.
closeAnimation	Set to false if you don't want the lightbox to be closed in an animated fashion.
closeButton	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 closeable by clicking anywhere outside the lightbox area.
downloadable	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	The filename of downloaded images. By default, the downloaded images are named 'Image'.
downloadAction	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	Buttons to show under the lightbox title. Explained in ui.Dialog configuration. Specifically, a custom download button can be created by providing a button that has downloadAction as its action ('download' by default).

API

open()	Open the lightbox.
close()	Close the lightbox.
on(event, handler [, context])	Register a handler function that will be called whenever event is triggered. The optional context is an object that will be the context of the handler function (the this).

Events

The ui.Lightbox object triggers various events that you can react on. Events can be handled by using the on() method (see above).

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.