Lightbox

JointJS+ provides an Lightbox plugin that enables the ability to display images by filling the screen, and dimming out the rest of the application.

Installation

Access Lightbox via the ui namespace, create an instance, and call the open() method on it.

import { ui } from '@joint/plus';

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

lightbox.open();

There is also a UMD version available

Include joint.ui.lightbox.js and joint.ui.lightbox.css in your HTML. You should also include joint.ui.dialog.js and joint.ui.dialog.css dependencies. Lightbox inherits from Dialog.

index.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.js"></script>
<script src="joint.ui.dialog.js"></script>
<script src="joint.ui.lightbox.js"></script>

Access Lightbox through the joint.ui namespace:

index.js

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

lightbox.open();

How does Lightbox work?

While displaying images that fill the screen, Lightbox will also dim the rest of the application. One of the great things about Lightbox is that it will nicely auto-adjust based on the size of the screen.

Common lightbox usage

The following example creates a lightbox upon user interaction. When the user clicks, a lightbox is created, and the open() method is called on it.

Open Sandbox

Opening images on click

Opening an image upon user interaction is one of the most common UI patterns when working with a Lightbox. Simply create your native event listener, and then create and open your lightbox.

import { ui } from '@joint/plus';

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

Download an image

If you want users to be able to download an image, a downloadable option is provided for this use case. A default download button is added to the lightbox. When clicked, this button triggers the 'download' action by default.

import { ui } from '@joint/plus';

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