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
.
<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:
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.
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();
});