Wiki source code of Display images in a lightbox

Last modified by Vincent Massol on 2024/02/26 17:57

Show last authors
1 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.
2
3 == Requirements ==
4
5 Key requirements:
6
7 * ability to click on the images displayed inside the page content for displaying the lightbox, from browser or mobile
8 * ability to apply some constraints for the selected images
9 * display information like caption, author, date of creation
10 * have option to download the currently displayed image
11 * have option for fullscreen mode
12 * give admins the possibilty to disable the feature
13
14 == Implementation analysis ==
15
16 === JS library investigation ===
17
18 The following table presents information about the investigated libraries.
19
20 (% style="width:1656px" %)
21 |=Name|=(% style="width: 58px;" %)License|=(% style="width: 151px;" %)Contributors|=(% style="width: 88px;" %)Last Release|=(% style="width: 70px;" %)Releases in last 2 years|=(% style="width: 93px;" %)Last commit|(% style="width:136px" %)**Active committers in last 6 months**|=(% style="width: 61px;" %)Start year|=(% style="width: 423px;" %)Notes|=(% style="width: 361px;" %)Lightbox display customizations and code style
22 |[[SimpleLightbox>>url:https://github.com/andreknieriem/simplelightbox]] ([[Demos>>url:https://simplelightbox.com/]])|(% style="width:58px" %)MIT|(% style="width:151px" %)[[-> Github>>url:https://github.com/andreknieriem/simplelightbox/graphs/contributors]] (not relevant since there are commits done without authentication that don't appear in this graph)|(% style="width:88px" %)Nov 2021|(% style="width:70px" %)24|(% style="width:93px" %)Nov 2021|(% style="width:136px" %)~~1 (almost 20 commits)|(% style="width:61px" %)2015|(% style="width:423px" %)(((
23 * specifies browser and mobile support (there is a simple-lightbox.legacy.js that supports IE11)
24 * v2.x is not dependent to jQuery anymore (uses modern ES6)
25 * customization options, but with few examples
26 * features: captions, zoom in/out using the mouse wheel
27 * [[Maven Central Repository Search>>url:https://mvnrepository.com/artifact/org.webjars/simple-lightbox]]
28 )))|(% style="width:361px" %)(((
29 * there is a `additionalHtml` property for adding additional content to the slide
30 * also, you can listen to lightbox [[events>>https://github.com/andreknieriem/simplelightbox#events]] and access directly the simple-lightbox
31 * the structure of the code makes it easy to override functionalities (uses ES6) and I find the code easy to read
32 )))
33 |[[GLightbox>>url:https://github.com/biati-digital/glightbox]] ([[Demos>>url:https://biati-digital.github.io/glightbox/]])|(% style="width:58px" %)MIT|(% style="width:151px" %)[[-> Github>>url:https://github.com/blueimp/Gallery/graphs/contributors]]|(% style="width:88px" %)Aug 2021|(% style="width:70px" %)12|(% style="width:93px" %)Oct 2021|(% style="width:136px" %)1 (there are also a small number of commits done by the community)|(% style="width:61px" %)2013|(% style="width:423px" %)(((
34 * specifies browser and mobile support
35 * good documentation, customization options
36 * features: captions, description, zoom button; works for videos as well
37 * [[Maven Central Repository Search>>url:https://search.maven.org/artifact/org.webjars.npm/github-com-biati-digital-glightbox]]
38 )))|(% style="width:361px" %)(((
39 * as presented [[here>>https://github.com/biati-digital/glightbox/blob/master/README.md#themeable]], there are 2 properties, `lightboxHTML` and `slideHTML` for defining you own lightbox HTML or even the html of a specific slide
40 * you can also listen to `slide_before_load` to access the slide that will be displayed.
41 * easy to override some functionalities and easy to read code
42 )))
43 |[[Photoswipe>>url:https://github.com/dimsemenov/PhotoSwipe]] ([[Demos>>url:https://photoswipe.com/]])|(% style="width:58px" %)MIT|(% style="width:151px" %)[[-> Github>>url:https://github.com/dimsemenov/PhotoSwipe/graphs/contributors]]|(% style="width:88px" %)Jan 2019|(% style="width:70px" %)0|(% style="width:93px" %)(((
44 master: Apr 2021
45
46 v5-beta: Oct 2021
47 )))|(% style="width:136px" %)(((
48 master: 0
49
50 v5-beta: 1
51 )))|(% style="width:61px" %)2011|(% style="width:423px" %)(((
52 * note that the master branch is not actively developed since there is a [[v5-beta>>url:https://github.com/dimsemenov/PhotoSwipe/tree/v5-beta]] branch ([[more info>>url:https://github.com/dimsemenov/PhotoSwipe/issues/1749#issuecomment-914348872]] about the state of this version, which seems to be almost finished)
53 * specifies browser and mobile support (v5-beta works only on modern browsers and uses ES6)
54 * good documentation, customization options
55 * features: captions, zoom button, fullscreen
56 * [[Maven Central Repository Search>>url:https://mvnrepository.com/artifact/org.webjars.bower/photoswipe]]
57 )))|(% style="width:361px" %)(((
58 * 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.
59 * easy to override some functionalities, but there are also non-public methods
60 )))
61 |[[Gallery>>url:https://github.com/blueimp/Gallery]] ([[Demos>>url:https://blueimp.github.io/Gallery/]])|(% style="width:58px" %)MIT|(% style="width:151px" %)[[-> Github>>https://github.com/blueimp/Gallery/graphs/contributors]]|(% style="width:88px" %)Sept 2021|(% style="width:70px" %)15|(% style="width:93px" %)(((
62 Sept 2021
63 )))|(% style="width:136px" %)(((
64 1
65 )))|(% style="width:61px" %)2013|(% style="width:423px" %)(((
66 * specifies browser and mobile support
67 * features: thumbnails, fullscreen, captions, but no zoom; works for videos as well
68 * customization options, but poor documentation
69 * [[Maven Central Repository Search>>url:https://mvnrepository.com/artifact/com.jwebmp/jwebmp-blueimp-gallery]] (not up to date)
70 )))|(% style="width:361px" %)(((
71 * you can access the current slide and modify it by listening to the events the api offers: [[https:~~/~~/github.com/blueimp/Gallery#event-callbacks>>https://github.com/blueimp/Gallery#event-callbacks]]
72 * easy to override functionalities  and easy to read code
73 )))
74 |[[ImageLightBox>>url:https://github.com/marekdedic/imagelightbox]] ([[Demos>>url:http://marekdedic.github.io/imagelightbox/?]])|(% style="width:58px" %)MIT|(% style="width:151px" %)[[-> Github>>https://github.com/marekdedic/imagelightbox/graphs/contributors]]|(% style="width:88px" %)Jun 2020|(% style="width:70px" %)1|(% style="width:93px" %)(((
75 Nov 2021
76 )))|(% style="width:136px" %)(((
77 1
78 )))|(% style="width:61px" %)2014|(% style="width:423px" %)(((
79 * requires jQuery >= 1.12
80 * specifies browser and mobile support
81 * features: fullscreen, captions, but no zoom; works for videos as well
82 * customization options, but poor documentation
83 * has [[tests>>url:https://github.com/marekdedic/imagelightbox/blob/master/test/src/ilb2.js]]
84 * [[Maven Central Repository Search>>url:https://mvnrepository.com/artifact/org.webjars.npm/github-com-rejas-imagelightbox]] (not up to date)
85 )))|(% style="width:361px" %)(((
86 * 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>>https://github.com/marekdedic/imagelightbox#hooks]]
87 * given the way the code it is written, I find it harder to maybe override some functionality
88 )))
89
90 ==== Inline (embedded) gallery ====
91
92 The possibility to have an inline gallery, similar to what the [[Gallery Macro>>https://extensions.xwiki.org/xwiki/bin/view/Extension/Gallery%20Macro]] 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:
93
94 ~1. Gallery
95
96 As seen on the [[demo page>>path:/xwiki/bin/get/Proposal/Displayimagesinalightbox?sheet=CKEditor.ResourceDispatcher&outputSyntax=plain&language=en&type=doc&reference=https%3A%2F%2Fblueimp.github.io%2FGallery%2F]], 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.
97
98 2. GLightbox
99
100 It is not a given feature, but I managed to modify it in order to see if it can be done. What I modified:
101
102 - 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
103
104 - some css rules need to be changed to have position:
105 relative
106
107 - 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
108
109 3. Photoswipe
110
111 As presented on this comment [[https:~~/~~/github.com/dimsemenov/PhotoSwipe/issues/1749#issuecomment-860647842>>url: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.

Get Connected