Image Lightbox Application
Display images from the page content in a lightbox |
Type | XAR |
Category | Application |
Developed by | |
Active Installs | 360 |
Rating | |
License | GNU Lesser General Public License 2.1 |
Table of contents
Description
The image lightbox is a way of opening images from the page content in full screen mode, using the Blueimp Gallery library (available under the MIT license)
While hovering a image (see Image syntax for details on how to add images), a toolbar will appear near the cursor, with options for opening the image in lightbox mode, to download it, to get a direct link or to copy the image ID.
After clicking on the first option, the image is opened in full screen with some information and more actions to apply. At this step, you can navigate through all images available in the content of the current page using keyboard and on-screen arrows, or the thumbnails at the bottom of the lightbox.
You can toggle the visibility of the image caption and action buttons by clicking on the image.
Actions
From the top right menu, the following actions can be applied:
- toggle the browser full screen mode
- download the current image
- copy the image ID (which is either manually added using the Numbered Reference Macro, or automatically generated)
- start / stop a carousel play of all images
- close the lightbox; this can be achieved also by using Esc key or with a click outside the image
Description box
By default, if the image is an attachment to a page, the description box will provide information about date of upload and author, along with the image alternative text or file name.
If captions are added to an image (see Figure Macro for more details on how to do so), this will be displayed as part of the description.
In case the image is external, the description will display only the caption / alternative text, if this is not actually the image url, or the file name, when it can be extracted.
Administration section
The lightbox functionality is enabled by default. It can be disabled from the global Administration, Look & Feel -> Lightbox section.
Disable for specific content
The lightbox functionality can be disabled for an element and its children by adding data-xwiki-lightbox="false" to the parent of the excluded content, or directly on the targeted element. This can be used by macros or extensions rendering images as part of the page content so that these images don't appear in the lightbox view.
Prerequisites & Installation Instructions
We recommend using the Extension Manager to install this extension (Make sure that the text "Installable with the Extension Manager" is displayed at the top right location on this page to know if this extension can be installed with the Extension Manager). Note that installing Extensions when being offline is currently not supported and you'd need to use some complex manual method.
You can also use the following manual method, which is useful if this extension cannot be installed with the Extension Manager or if you're using an old version of XWiki that doesn't have the Extension Manager:
- Log in the wiki with a user having Administration rights
- Go to the Administration page and select the Import category
- Follow the on-screen instructions to upload the downloaded XAR
- Click on the uploaded XAR and follow the instructions
- You'll also need to install all dependent Extensions that are not already installed in your wiki
Dependencies
Dependencies for this extension (org.xwiki.platform:xwiki-platform-image-lightbox-ui 15.8):
- org.xwiki.platform:xwiki-platform-image-lightbox-webjar 15.8
- org.xwiki.platform:xwiki-platform-administration-ui 15.8
- org.xwiki.platform:xwiki-platform-rendering-macro-velocity 15.8
- org.xwiki.rendering:xwiki-rendering-macro-html 15.8
- org.xwiki.platform:xwiki-platform-display-macro 15.8
- org.xwiki.platform:xwiki-platform-localization-macro 15.8
- org.webjars:requirejs 2.3.6
- org.webjars:jquery 3.6.0