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


#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>

#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.