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