Wiki source code of Display images in a lightbox
Last modified by Vincent Massol on 2024/02/26 17:57
Show last authors
author | version | line-number | content |
---|---|---|---|
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. |