Images with pinch zoom

1

Hello, has anyone been able to implement pinch to zoom images yet? I really need to be able to zoom images. Eighter a popup where you can zoom the image, open the image on a new page and then zoom or just zoom the image in the content. Im making an app for a client where they need to be able to zoom some images

1 Like
2

ahh fuck! everytime I post a question on the internet, I find the answer 2min laterā€¦ even though Iā€™ve searched for hoursā€¦

does this!!

now, if I just could find a lightbox for thisā€¦

3

Ha, it always happens :smile: Glad to see you got this resolved.

If you need a light boxā€¦you could always use the modal

4

everytime I post a question on the internet, I find the answer 2min laterā€¦ even though Iā€™ve searched for hoursā€¦

do you mind sharing where you found said answer? For those of us who have been searching for hours, but havenā€™t found anything yet :slight_smile:

5

Search the forum for ā€˜Pinch to zoomā€™, find earlier thread about Pinch to zoom (http://forum.ionicframework.com/t/pinch-to-zoom/1330), read thread, follow link in thread to Github issue: https://github.com/driftyco/ionic/issues/679, and finally https://github.com/driftyco/ionic/pull/1440.

Answer:

<ion-scroll zooming="true" style="width: 100%; height: 100%">
  <img src="blah.jpg" style="width: 2000px; height: 2000px">
</ion-scroll>
4 Likes
6

yep, as @coen_warmer said - I used <ion-scroll zooming="true"> with the modal directive

7

Iā€™m trying the proposed solution (ion-scroll with larger img inside) but I canā€™t make it work on my Android device (v4.1.2, Ionic beta6). The image just doesnā€™t zoom, and actually it scrolls in only one direction.
Iā€™d appreciate if someone could provide a working code example.

8

Yeah, I tried the proposed solution as well, without any success, and with the same issues (image doesnā€™t zoom, and only scrolls in one direction).

9

Hereā€™s how my tag looks like: <ion-scroll zooming="true" min-zoom="1" direction="xy" ng-click="closeModal($event)">

10

Finally it worked for me using the new release 1.0.0-beta.7 on Android. Probably itā€™s because it contains a fix to issue #1440.

Thanks, guys!

11

Hi all

Iā€™m on beta9 and still having the problem of no vertical scroll of my image in a modal using the ion-scroll tag above. Are we sure issue 1440 is fixed. This is on android or ios.
My image is longer than the screen and when I try to scroll it down it tries to but always bounces back to the height of the screen (ie. no vertical scroll). I have direction=ā€œxyā€ on my ion-scroll directive.

Anyone else still seeing this

UPDATE: - turns out you need to wrap the ion-scroll directive with and ion-content directive including overflow-scroll=ā€œtrueā€

thanks

12

I recently posted some of my thoughts about this after lots of struggle.