Consultation on images

ionic-v1
1

Friends anyone know how I can put an image and the user can zoom on images? I could not find a way.

2

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 :smile:

3

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

5

There are several angularjs plugin you can use, listed below ;

  1. Angular Pan Zoom : https://github.com/mvindahl/angular-pan-zoom
  2. Angular Image Zoom : https://github.com/owlsomely/angular-image-zoom
  3. Image zoom : https://github.com/evxn/image-zoom

please explore :smiley:

1 Like
6

You might also want to try https://github.com/mhartington/PinchToZoom from @mhartington

1 Like