Switch to PhotoSwipe for the slideshow

[oparoz]

It was suggested that PhotoSwipe could be a replacement, so I took a look at the API and did a rough implementation.

Here are my findings:

+

It supports quite a few features which were manually added to the Gallery slideshow and solves some of the complaints mentioned above

• Supports keyboard shortcuts
• Mobile optimised
• Auto PNG/SVG selector for buttons
• Fullscreen support
• Auto-control hide
• Social sharing. Our custom oC sharing could be added to the list...one day
• Customisable image pre-loading
• Supports captions (we only have the filename, that's better than nothing)

-

The initialisation doesn't work out of the box because we don't have the image dimensions before launching the slideshow

• We have to add our own spinner/loader because we don't know the size of images
• We need to theme it to match ownCloud's design identity
• Scroll to zoom doesn't work out of the box on desktop. So it's zoom in and zoom back out, like in the browser vs like in Google Maps unless we implement a fix
• Zooming only works well if we're able to send multiple dimensions categories to the slideshow. This would solve other problems with thumbnails of various sizes accumulating in the cache, but that means extra work
• Zooming is also only possible if we download the whole image and resize it in the browser, leading to a lot of bandwidth waste
• No image luminance detection, so we'll still have to take care of that
• No broken image detection (404 or 500), so we'll still have to take care of that

My biggest problem is with the missing scroll to zoom feature on the desktop, but if it's not on/off with gestures, it should be possible to get it to work on desktops as well.

Sponsorship

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[oparoz]

@jancborchardt - Feel free to provide your input on PhotoSwipe. At some point we'll have to decide whether it's best to work on our custom slideshow or improve on an existing solution.

[jancborchardt]

Phew, good question … in general it seems better to take a widely-used library for stuff like this rather than baking our own. Are there any alternatives? Maybe @owncloud/designers know something?

[oparoz]

The other software I tested was Fotorama, but it's too basic from my pov.

[oparoz]

It seems the Bigshot project has died and since we're not really using its advanced features, I think we should seriously consider switching to Photoswipe.
The alternative is to use something like Hammer.js to implement zooming and to keep using the current slideshow code.

[kavishdahekar]

If we proceed with Hammer.js for zooming capability, modifying BigShot to fix #142 #263 and #141 will be much work(both of them are very desirable features).
I'm interested in taking this up (GSoC aspirant) so I'll take a deeper look at PhotoSwipe and also try to fix some junior labeled issues.

[oparoz]

Thank you @kavishdahekar. Don't hesitate to ask questions if you don't understand how some things are currently done in the slideshow because the candidate will need to understand how to migrate features from one engine to the other or how to keep the current UI on top of the view generated by the engine per example.

[shubhrajodiya]

@oparoz i am unable to understand where to start up with this i am having a lot of ideas regarding the slideshow but unable to find a path to integrate it in ownCloud

[oparoz]

@shubhrajodiya @kavishdahekar - I've created a new issue to describe what should be attempted during the GSoC.
#600

It contains more details and useful links which should help you figure out how things are initialised.
If you have specific questions, don't hesitate to ask there or here if it's Photoswipe specific.

[oparoz]

This issue was moved to nextcloud/gallery#33