Skip to Content

Display images in a lightbox

Last modified by Vincent Massol on 2024/11/19 16:14

 XWiki
 Design
 Idea
 

Description

Provide the ability to open images of a page in a lightbox (gallery view) with information about the displayed image (e.g. captions, author), possible actions (e.g. zoom, fullscreen, download) and the possibility to cycle through all of them.

Requirements

Key requirements:

  • ability to click on the images displayed inside the page content for displaying the lightbox, from browser or mobile
  • ability to apply some constraints for the selected images 
  • display information like caption, author, date of creation
  • have option to download the currently displayed image
  • have option for fullscreen mode
  • give admins the possibilty to disable the feature

Implementation analysis

JS library investigation

The following table presents information about the investigated libraries.

NameLicenseContributorsLast ReleaseReleases in last 2 yearsLast commitActive committers in last 6 monthsStart yearNotesLightbox display customizations and code style
SimpleLightbox (Demos)MIT-> Github (not relevant since there are commits done without authentication that don't appear in this graph)Nov 202124Nov 2021~1 (almost 20 commits)2015
  • specifies browser and mobile support (there is a simple-lightbox.legacy.js that supports IE11)
  • v2.x is not dependent to jQuery anymore (uses modern ES6)
  • customization options, but with few examples
  • features: captions, zoom in/out using the mouse wheel
  • Maven Central Repository Search
  • there is a `additionalHtml` property for adding additional content to the slide
  • also, you can listen to lightbox events and access directly the simple-lightbox
  • the structure of the code makes it easy to override functionalities (uses ES6) and I find the code easy to read
GLightbox (Demos)MIT-> GithubAug 202112Oct 20211 (there are also a small number of commits done by the community)2013
  • specifies browser and mobile support
  • good documentation, customization options
  • features: captions, description, zoom button; works for videos as well
  • Maven Central Repository Search
  •  as presented here, there are 2 properties, `lightboxHTML` and `slideHTML` for defining you own lightbox HTML or even the html of a specific slide
  • you can also listen to `slide_before_load` to access the slide that will be displayed.
  • easy to override some functionalities and easy to read code
Photoswipe (Demos)MIT-> GithubJan 20190

master: Apr 2021

v5-beta: Oct 2021

master: 0

v5-beta: 1

2011
  • note that the master branch is not actively developed since there is a v5-beta branch (more info about the state of this version, which seems to be almost finished)
  • specifies browser and mobile support (v5-beta works only on modern browsers and uses ES6)
  • good documentation, customization options
  • features: captions, zoom button, fullscreen
  • Maven Central Repository Search
  • for Photoswipe v4 to work you need to add inside the page where it should be used the html of the lightbox, provided by them (just like it is done for the Bootstrap modal). This way the lightbox can then be modified to have the structure that we choose for it, with extra buttons.
  • easy to override some functionalities, but there are also non-public methods
Gallery (Demos)MIT-> GithubSept 202115

Sept 2021

1

2013
  • specifies browser and mobile support
  • features: thumbnails, fullscreen, captions, but no zoom; works for videos as well
  • customization options, but poor documentation
  • Maven Central Repository Search (not up to date)
ImageLightBox (Demos)MIT-> GithubJun 20201

Nov 2021

1

2014
  • requires jQuery >= 1.12
  • specifies browser and mobile support
  • features: fullscreen, captions, but no zoom; works for videos as well
  • customization options, but poor documentation
  • has tests 
  • Maven Central Repository Search (not up to date)
  • it's not specified directly, but you can access the slide element and modify it before it is loaded by using https://github.com/marekdedic/imagelightbox#hooks 
  • given the way the code it is written, I find it harder to maybe override some functionality

Inline (embedded) gallery

The possibility to have an inline gallery, similar to what the Gallery Macro offers, is an important feature as well. Since these two are similar as functionalities, it is desired, even if not mandatory, to use the same library for both of them. For this I tried the functionality for 3 of the libraries above:

1. Gallery

As seen on the demo page, there is a carousel view. It does not have by default the possibility to open from it the lightbox, but this option can be added using a button for opening a new gallery in lightbox mode.

2. GLightbox

It is not a given feature, but I managed to modify it in order to see if it can be done. What I modified:

- a problem is that the library does not offer the possibility to append the gallery to a specific parent element (it uses the document), so I moved it manually

- some css rules need to be changed to have position:
 relative

- you cannot have more than one glightbox opened, and it causes problems if you need to go from embedded to fullscreen mode, but I think it can me managed

3. Photoswipe

As presented on this comment https://github.com/dimsemenov/PhotoSwipe/issues/1749#issuecomment-860647842 , under Inline section, there is an experimental modal option for the v4 version, but it is no longer available in v5. 


 

About

About

Support

Platform

User Guide

Admin Guide

Developer Guide

Projects

XWiki

Extensions

Other

Contribute

Status

Practices

Under the Hood

Get Involved

Get Connected