Image Lightbox Application

Version 26.2 by JS D on 2022/10/03 00:04

cogDisplay images from the page content in a lightbox
TypeXAR
CategoryApplication
Developed by

XWiki Development Team

Active Installs575
Rating
0 Votes
LicenseGNU Lesser General Public License 2.1

Installable with the Extension Manager

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.

toolbar.png

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.

openedLightbox.png

Actions

lightboxOptions.png

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.

alternativeText.png

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.

caption.png

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.

lightboxAdmintrationSection.png

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

  1. Log in the wiki with a user having Administration rights
  2. Go to the Administration page and select the Import category
  3. Follow the on-screen instructions to upload the downloaded XAR
  4. Click on the uploaded XAR and follow the instructions
  5. 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 14.8):

Tags:
    

Get Connected