Display images in a gallery view

Development
#1

Hello everyone,

I started to work on one of the Image improvements proposed here Improvements for images in XWiki. The task refers to the possibility to click on an image and have it opened in a lightbox (gallery view), with different information (name, date of creation, captions, button for download…) and the ability to navigate through the other images in the page (and maybe to filter in a way the selected images).

As a first step, I tried to analyse multiple JS libraries that could be suitable for this usecase and I would like your input for what would be a better choice.
I didn’t go into too much detail about some functionalities, since all the libraries have them (they load fast, have mobile, video support and zoom effect, with the ability to customize the displayed image in order to add other elements), with only some differences that could be seen from the demos or I specify them.
Differences could come from the fact that some are no longer maintained or the documentation is not that detailed.

These require jQuery:

  1. FancyBox (Demos)
    Only the old v3 can be used, which is the same as in the Fancybox macro, since the new Fancybox ui has a different licence and it cannot be used https://fancyapps.com/license. The only problem with this is that v3 doesn’t seems to be maintained anymore.
    What I think is missing in terms of ui, is the possibility to see the current and next images as thumbnails at the bottom (feature that was added in v4).
    Maven repository
    License: GPLv3 for all open source applications

  2. Magnific Popup (Demos)
    As in the case of fancybox, the library seems to not be maintained anymore, as the last release was in 2016. Although, it is a stable product with really nice and detailed documentation.
    I find it similar to fancybox as it offers the same base functionalities, but with a larger group of options for customization.
    It also lacks the possibility to display thumbnails at the bottom for easy navigation between images.
    Maven repository
    License: MIT

  3. Nanogallery2 (Demos)
    This project does not have really recent changes, but the latest release is however from January 2021. It should also be considered that is also a more recent project (2019). A downside is that, for now, it is not compatible with jQuery v3.0/3.1, which could be a problem in case we upgrade it.
    As a plus compared to the first 2 libraries, this has the possibility to display thumbnails at the bottom, for easy navigation between images. I also find the possibility to zoom in/out using the mouse wheel a nice feature.
    The documentation is detailed and it offers multiple options for customization.
    License: GPLv3 for personal or open source projects with GPLv3 license

  4. SimpleLightbox (Demo)
    Compared to the others, this is the only that is recently maintained, with the latest release in September.
    It has a detailed documentation with many options for easy customization. As a plus, it also has the possibility to zoom in/out using the mouse wheel, which is a nice feature.
    Maven repository
    License: MIT

Another nice library is Vue cool lightbox, which is not a jQuery library.This project has recent commits and it is inspired by fancybox. It seems it meets the requirements, being also easy to customize and with a detailed documentation (I did not found information about browser support).

#2

One important aspect is support and maintenance but also dev community size.

Based on this:

So ATM, in your list, I don’t see one that matches the activity/dev community size criteria, unless we want to make it our own and use the existing code as the base and then we support it thereafter.

#3

I did not found any library that could match the requirements for maintenance and dev community size. The majority has only one dev or had many devs in the past, but not now (e.g. https://github.com/marekdedic/imagelightbox/graphs/contributors)

#4

Hi again!

Considering that, as I said, I did not found any library that could satisfy the requirements for the dev community size I would like to open a discussion to know your opinion about what would be the best to do in this case.
I only see 2 choices. The first would be to take over one of the existing libraries and make it our own, considering that there are libraries which are stable and widely used (as fancybox) but might have compatibility issues in the future. The other choice would be to create the lightbox from scratch, but I think this is too costly.

WDYT? Do you have other ideas?

#5

Hi Lavinia,

Judging from your list I think you focused too much on jQuery. There’s no requirement to use jQuery. A standalone (plain JavaScript) library is perfectly fine. What we need to avoid are lightbox libraries that depend on big frameworks (especially dead ones). Those are designed to be used when you are already locked-in with a specific framework. But we’re not.

So if these are the best options for jQuery-based lightbox libraries, what are the best standalone (plain JavaScript) lightbox libraries?

Thanks,
Marius

#6

Forgot to mention, we should definitely use an existing lightbox library (even if it’s poorly maintained) rather than writing one ourselves.

#7

Since jQuery is getting old, my feeling is that something based on Vue/React or modern vanilla JS has better chances to fit our needs and to be maintained.
For instance, https://github.com/dimsemenov/PhotoSwipe (which also has a Vue wrapper https://github.com/rap2hpoutre/vue-picture-swipe). The master branch of PhotoSwipe is not very active but the v5-beta branch seems to be maintained.

#8

Hi,

Thanks for the feedback. Based on it I restarted my search for a plain JavaScript library which could meet the needs of this feature, being also recently maintained.

  1. GLightbox https://github.com/biati-digital/glightbox (Demos)
  1. LightGalleryJS https://github.com/sachinchoolur/lightGallery (Demos)
  1. Photoswipe https://github.com/dimsemenov/PhotoSwipe (Demos)
  1. Gallery https://github.com/blueimp/Gallery (Demos)
#9

Thanks Lavinia!

Would be nice if you could indicate the following info:

  • date of the last release
  • number of releases across 2 years and mean # of releases per year for 2020 and 2021.
  • number of active committers for the past 6 months (e.g. with more than 20 commits over the past 6 months, that’s roughly one commit per week which is the low end to what we could call active IMO).

From a quick look these projects seem to be a one-man effort mostly with several not active for several months. It’s going to be hard to pick one for which we can have a good likelihood that it’ll still be supported, in, 1 or 2 years from now.

Thus, it seems we’ll need to pick a framework based on 2 criteria mostly:

  • feature set
  • code quality, i.e.
    • how easy it is to read the code and be able to modify it
    • whether there are tests that can help us make sure we don’t break stuff when we make changes

Also note that since this is about possibly including this feature in XS, we need a compatible license and for example, GPL is not going to work. You haven’t mentioned the licenses for most of them BTW, could you do that (and remove those that don’t have a license compatible with XWiki’s?

Also you restarted the list at 1 but we already had 4 listed previously. So I think we need to have a list from 1 to 8. Or rather redo a list, excluding those that are not license-compatible maybe.

Last, since you spent time to look at them, what would be your recommendation?

Thanks!

#10

Hi,

As I mentioned, I did not found a project to have more than one developer. In this case I think it could be relevant to also consider the seniority of the project, even the involvement of the community (which could be seen from the contributors graph).

I added all the projects here, since I think it’s easier to follow and maybe add information later.
I removed from the list the projects that do not have a compatible license or seem to not be maintained anymore (e.g. fancybox, nanogallery2)
About the quality of the code, from a first look they all have organized and easy to read code, but only ImageLightBox has written tests.

In my opinion, Photoswipe is a good choice. It is a stable and highly used project. The stable v4 could be used first, since v5 is still beta (but as I mentioned in the document, it is almost released) .
I also consider that GLightbox and SimpleLightbox are good candidates too.

#11

Actually it’s not so easy since it’s hard to find… It would be better to use design.xwiki.org which is the official place for our designs :slight_smile: Do you think you could move it here?

Thanks!

#12

Sure, I’ll get back with the link

#14

I moved the information to: https://design.xwiki.org/xwiki/bin/view/Proposal/Displayimagesinalightbox

#15

Thanks @Oana-Lavinia_Florean I think a table view would be nicer to compare them, WDYT? I’ve started moving 2 items at https://design.xwiki.org/xwiki/bin/view/Proposal/Displayimagesinalightbox to show how it would look like.

#16

Indeed, a table is better for a comparison. I updated the design page

#17

Did you had a look at the ability of the listed libraries to fulfill our requirements? I’m thinking of “[…] link to download the current viewed image attachment in the lightbox”, but there might be other.
More generally, it could be interesting to have a look at the extensibility of the libraries, to evaluate how far we can integrate and customize them.
Thanks.

#18

yes this is a good point that I’ve also raised which is to check how well the code is written and how easy it is for us to modify/maintain the library ourselves (since they’re only a one man effort and it’s almost sure that at some point we’ll need to maintain it - or move to another lib):

#19

All of them have customization options, meaning that there is a functionality that provides a way to modify the design of the lightbox. For clarity, I added more details for this inside the design page under Lightbox display customizations and code style, along with some information regarding the possibility to understand and modify the code.
Regarding tests, it is specified that only one of them has written tests (i.e. ImageLightBox).

Even if, as I said, Photoswipe is one of the top choices, I find it a real disadvantage that we should use v4 until v5 is release, considering that v5 will come with a complete rewrite in ES6 and this could mean a lot of changes in the way the library is used by us and time invested for working on it.
Considering this and also the last added column, I propose to use SimpleLightbox, given also that it is the only one that was already moved to modern javascript. I think the minimalistic characteristic of the library is another plus, making it easier to follow and maintain. WDYT?

#20

I modified the design page to include also information about the possibility to use the lightbox library for a inline gallery view as well, since these 2 are similar features and it would be nice to use only one library.
Out of 3 libraries that I checked, only one, Gallery, has a inline view by default.

#21

So, we have to choose between:

  • biati-digital/GLightbox 
+ supports JSON input
+ small size
+ supports large image description / caption out of the box
+ supports video (also autoplay)
+ supports zoom
- less used
- requires hacks for in-line gallery mode
  • blueimp/Gallery 
+ supports JSON input
+ small size
+ fairly used
+ supports in-line gallery mode out of the box
+ jump to any image from the gallery using its thumbnail
+ supports video (no autoplay)
- I'm worried about the limited space for the image caption
- no zoom
  • Photoswipe (4.x)
+ supports JSON input
+ provides enough space for large image description / caption out of the box
+ supports zoom
+ used a lot
+ supports in-line gallery mode but only for the 4.x unmaintained branch
+ well defined location for action buttons
- larger size
- video support? (there seems to be workarounds https://github.com/dimsemenov/PhotoSwipe/issues/1539 )
- 4.x branch is no longer maintained; we can't use 5.x because we still support IE11 and transpiling is not recommended by the author because it hasn't been tested
- "Avoid serving big images (larger than 2000x1500px) for mobile" (but the other libraries might have the same issue)
- requires predefined image dimensions (i.e. the image dimentions have to be specified, otherwise we need to load the image in order to read its dimentions, see https://github.com/dimsemenov/PhotoSwipe/issues/741 )

If we can find a simple / clean solution for blueimp/gallery so that a large caption is clearly visible, then I’d go with it, otherwise I’d go with biati-digital/glightbox.

Photoswipe is no go for me because the 4.x branch is not maintained and we can’t use the 5.x beta version yet unless we drop support for IE11 (which we could do but it would take some time…).

Thanks,
Marius