Pinch to zoom

Hey guys,

Just wondering if anyone had any success in using the ported Hammer.js like functionality in Ionic to build pinch to zoom functionality?

1 Like

Hey @coen_warmer, I’m not sure what the status is with this. @andytjoslin or @max probably has a good idea though…

I’ve noticed the Zynga scroller that’s been ported to Ionic also has the functionality to zoom in and out.

Specifically I’m looking for a way to implement a zoomable map that has clickable hotspots on it. Looking for the right approach here: Hammer js+css or Zynga or a combination of the two. Would be super helpful if @andytjoslin or @max could weigh in on this?

2 Likes

Hey @coen_warmer. The Zynga scroller definitely supports it. I made an issue for this and assigned it to myself, so I’ll take a look! https://github.com/driftyco/ionic/issues/679

1 Like

Awesome @max, thanks!

Seems like efforts to expose pinch to zoom in the Zynga scroller have stalled a bit at the moment.

Anybody have any experience yet in using pinch to zoom to zoom in on an element in an Ionic project? By using CSS maybe?

See : Slide box pinch and zoom images

Hi,
I’d like to show you guys a little demo I’ve made : Slide box pinch and zoom images
Feel free to improve the code.

So how is it supposed to work? I’ve got it on an iPad (wrapped in Cordova) and can’t get it d anything. It won’t zoom or move at all.

Since our app features a facebook like card interface, I would be highly interested in a possibility to display images fullscreen supporting pinch to zoom. I can open the image in the webview, so this will be handled by the webview itself, but since iPhones don’t have a dedicated back button this is not feasible.

Any ideas?

There is still an open issue to support pinch / zoom in Ionic but the devs are working on more core functionality right now.

That’s fine. Since the event our app covered took place last weekend, I have no more time constraints and can start tickling with the code myself :wink:

I saw some activity on this issue at GitHub. Is this feature ready to be used in production?

If you don’t want to use zynga, you can also do it with everything Ionic offers!
I created a simple tutorial showing How To Create An Advanced Ionic Gallery with Image Zooming like seen in the Facebook app, maybe this can be an alternative for your problem.