Friends anyone know how I can put an image and the user can zoom on images? I could not find a way.
HI,
Are you looking for this? Try the following example and run $ ionic serve
to see the effect:
<ion-scroll zooming="true" min-zoom="1" max-zoom="3" scrollbar-x="false" scrollbar-y="false" direction="xy" has-bouncing="false" style="width: 100%; height: 100%; margin:auto; background-color: rgba(0,0,0, .1); line-height: 0;">
<img ng-src="http://lorempixel.com/1200/1200/food" style="width: 100%; height: auto; margin: 0; max-width: 100%; max-height: 100%;">
</ion-scroll>
BTW, you’d better create css class instead of inline styles
What strikes me is that the image is cut to make zoom. There is much documentation of that example but not what I want, it’s like when you see pictures on Facebook from mobile
There are several angularjs plugin you can use, listed below ;
- Angular Pan Zoom : https://github.com/mvindahl/angular-pan-zoom
- Angular Image Zoom : https://github.com/owlsomely/angular-image-zoom
- Image zoom : https://github.com/evxn/image-zoom
please explore
1 Like
You might also want to try https://github.com/mhartington/PinchToZoom from @mhartington
1 Like