CODEWITHSUNDEEP
imageionic-frameworkpinchzoom
Miroslav
Miroslav

Reputation: 21

Pinch Zoom on picture in Ionic project

I developed a project on Ionic.

In a view, I searched the possibility to pinch zoom a picture.

I tried hammer.js (http://hammerjs.github.io/). The pinch zoom works but the zoom is on center screen of the picture and not where the pinch was performed. Also, the picture can disappear from the screen...

So, how i can pinch zoom on a picture (not on a gallery), with Android/Ios compatibility. It's a basic function and it's not very popular...

Any idea or tutorial ?

Upvotes: 1

Views: 10115

Answers (1)

OClyde
OClyde

Reputation: 1076

That's true, the video posted by Aravind shows the solution.

Ionic provides zooming via the ion-scroll directive. This implicitly adds the possibility to scroll the picture when zoomed.

<ion-scroll
    direction="xy"
    zooming="true"
    min-zoom="1.0"
    max-zoom="2.5"
    overflow-scroll="false"
    has-bouncing="false"
    >   
</ion-scroll>

Be sure to add 

overflow-scroll="false"

on your ion-scroll, as zooming won't work with overflow-scroll, which is by now the default setting for scrolling in Ionic. The has-bouncing attribute is optional, although in my opinion the feeling is cleaner when the native iOS bounce is deactivated for zoomable images.

Upvotes: 5

Related Questions