Basics: Galleries, Sliders

The CMS Questions
1

Can you recommend a gallery plugin for kirby?
I’d like to display fullscreen, high-res images and lots of them (30 and more per project). So I need a plugin that does not preload all images at once. Also the plugin should only load the biggest version necessary for each device. (We don’t need 5K images on an iPhone 4)

I had a look at other kirby projects – most of them use one of these:

LightGallery: lightGallery - Full featured javascript gallery for web and mobile.
Superslides(*): GitHub - nicinabox/superslides: A fullscreen, hardware accelerated slider for jQuery.
Flexslider: http://flexslider.woothemes.com/
Lazy Slides: https://github.com/jaipe/lazy-slides

(*) I worked with Superslides once on a WP Theme. It loads all the images before displaying the first slide. Performance was poor.

Do you have any favorites?

Thanks as always! J

PS. My whishlist: fast (!), lightweight, responsive, lazyload, css transitions, event triggers, doesn’t have to be free.

2

Flickity by David DeSandro is pretty good!

1 Like
3

I have used Ideal Image Slider in the past and found it fine.

1 Like
4

Photoswipe looks pretty good

1 Like
5

Photoswipe is perfect, also because it supports 100% touch - even on “old” devices (like 4 years old).

I created several (Cordova) comic-apps with it; simply swipe & go!

(Also very good API to hook in).

6

Slick Slider is also nice.

4 Likes
7

Thanks for your suggestions! I’ll have a look at all of them. Any thoughts on the usual suspects listed above? My impression is that these plugins perform quite differently because of the way they load pictures. One picture has somewhere between 250 - 400kb.

edit: Photoswipe looks sweet!

8

Photoswipe supports smart responsive images;

http://photoswipe.com/documentation/responsive-images.html

It only loads bigger images, when it makes sense (when your screen is larger / higher DPI than the preview image itself).

Don’t forget you can also pinch / swipe / make every gesture you want to zoom in on an image (pinch), close it (swipe down), etc… also with a mouse.

9

I’ll definitely give it a try (and fail and come running to you…)
Btw: @JimmyRittenborg build a great Kirby plugin called Guggenheim using Photoswipe.

10

I’ve worked with Photoswipe and it’s quite nice.
Not sure it ticks all your boxes but most of them, certainly.

11

Have your worked with it on Kirby? Do you have a template by any chance? I was able to get it up and running but I’m not sure I have done things right…

12

Note that Photoswipe by default only works with predefined image sizes, which can make it more difficult to implement for some uses. But there are workarounds (see first item in the FAQ).

13

Nope, it was a Symfony project, Twig templates etc., and the implementation was rather specific to this website. (We showed 4 thumbnails for the first few images in a longer gallery, plus a custom button; so we fed Photoswipe a list of items to work with, added our own event listeners, etc.)

14

Many galleries need the images size to calculate the image ratio. This is fairly easy with kirby: echo $page->image()->ratio() However I wasn’t able to set up Photoswipe with responsive images.

I found another gallery that works great with large images: Fotorama I got it to work but I’m not happy. (for various reasons: performance, options…) Now I’ll give Flexsliders a try. Theres a plugin for lazy loading so let’s see how that goes…

I’ll post a summary as soon as I’ve found a suitable solution.

1 Like
15

You’re doing some thorough research! Love it! Can’t wait to see your feedback.

16

+1 for suggesting a vanilla js solution. Exactly what I searched for

17

This vanilla js gallery that just came out and has seen a lot of traction in the past days: https://sachinchoolur.github.io/lightgallery.js/

Not always a fan of new plugins. Your choice :wink:

18

Lightgallery is great – I mentioned it in my original post. Looks like a new version came out two days ago. I’m going to check it out for sure!
Another tool I found is called Swiper. It has a great API, many options like preloading / lazyloading, carousel mode, vertical scrolling etc…
So far one of my favorite :+1:

1 Like