JointJS+ Lightbox

ui.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.

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>

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

var 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:

$('img').on('click', function(evt) {
    new joint.ui.Lightbox({
        title: $(evt.target).attr('title'),
        image: $(evt.target).attr(src)
    }).open();
});

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

$('img').on('click', function(evt) {
    new joint.ui.Lightbox({
        title: $(evt.target).attr('title'),
        image: $(evt.target).attr(src),
        downloadable: true
    }).open();
});

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).

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`).

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.

JointJS+ Lightbox

ui.Lightbox

Installation

Usage

Configuration

API

Events