Support for pinch to zoom

[gercheq]

Hey @desandro, what do you think about integrating touch interactions to zoom in/out to images?

[desandro]

Hi! Thanks for the feature request. I'd like to focus on Flickity's core carousel feature set, rather than get into a full-scale image gallery. I recommend using PhotoSwipe as an alternative.

[boynet]

Hi @desandro I really like your code and proejects and I would want you to know that there is lack of good photo gallery plugins out there,
there is a lot that either

• too big heavy and full of options
• too small and lack of options

so as you gave PhotoSwipe as example its really good as a base minimum plugin, but once you want basic stuff like thumbnails supports - you cant, or you want a bit more advanced stuff like wrapAround, freeScroll etc you just cant

I think there is good market opportunity to release a photo gallery plugin to sit on top of flickity, the only thing that missing is pinch to zoom

on the other ends there is full big galleries like Swiper, that weight 33kb gzip

[clarknelson]

@boynet I agree @desandro's plugins are some of the best available. Unfortunately, they are currently in "open source" where programmers like us are responsible for improving the plugins.

Not sure if you have seen metafizzy/flickity-fullscreen#20 but there is some additional information about getting pinch to zoom working. touchActionValue="pan-y" should be updated to touchActionValue="pan-y pinch-zoom". I'm hoping to be able to add this change on a forked branch, will try to keep this issue up to date.

[Dekadinious]

@clarknelson Did you get any closer with this? I find pinch-zooming and then trying to pan the image actually changes slides. Is it possible to block slide changing when zoomed in somehow?

[clarknelson]

No I didn't really modify any code in the library. I think the best solution is to disable draggable and use the arrow buttons, or write your own functionality using the API and a library like https://hammerjs.github.io/

[Dekadinious]

@clarknelson I was trying to combine this with a jQuery plugin called imgViewer2 to get pinch to zoom to work, but pinching does not trigger zoom. My customer didn't think it was important enough to spend hours on, so I have also let the thought go for now.

[dylanfisher]

I was able to achieve this with a single line of CSS. You'll need to add custom carousel controls outside of the carousel element if you actually want to be able to control the carousel. You can also only apply this CSS at the mobile breakpoint to allow draggable carousels on desktop.

.carousel {
  pointer-events: none;
}