Any tap/pinch to zoom image tutorial?


I am unable to find any relevant tap or pinch to zoom tutorial. I tried this solution (Double Tap to zoom), but there are some problem that i don’t know hot to handle:

  • more often than not, side scroll does not work.
  • if you zoom out, it would zoom way out (before zoom, picture was covering 100% of the screen) so you get thumbnail on screen. How to limit zoom out?

Not that i didn’t try or read this page. I tried this also ( So i wrote:

function MainCtrl($scope, $ionicScrollDelegate) {
  $scope.scrollTop = function() {
    $ionicScrollDelegate.zoomBy(1.5, true);

problem here is that when scrollTop is called, i would get error on console:
Error: Zooming is not enabled!

Help please :smile:


Here’s a nice example I put together to create an image gallery, with pinch to zoom functionality.


Thank you very much for this info. It looks just like the thing I need for my project :smile:


One more question. If I have full screen picture and i want to scroll it left or right i have problem when my left and right scroll/swip are not detected. If I scroll down or up first, then i can move picture left and right. But not if I want to scroll to the right/left direction first.
Any solution for this?


Whats the markup look like for you ion-content/ion-scroll?


This is awesome!

I have a problem when zooming into images. My image is, say 2000px wide in its original format and resized to 100% width in the example. If the screen is 640px wide, the image will, of course, be resized to 640px width. However, when I zoom into the image it’s like zooming into a 640px wide image and the extra pixels in the image are not used. I would like to use the extra resolution, otherwise the image gets really blurry when zooming in.

I hope you understand what I’m saying haha.

How would I go about solving this issue?
Many thanks!


Hey there!

So yeah, the scroller is based on zynga, and that was an issue for them as well.

Unfortunately, I’m not sure what would be a solution that we can use, since we’ve hacked zynga a lot to work with ionic.


Aha, alright. Too bad!

Kinda ugly fix, but would it be possible to change the width of the image to say 500% and use a minimum and initial zoom value of 0.2 and max 1. That way it would be zoomed out initially and when zoomed in fully it would show a full native res image?

Seems like I encounter some js issues when applying a minimum zoom value below 0.5 though… Any ideas? I haven’t been able to find any other good way of doing this sadly :frowning:


@borisIzstop how could i do this.



I would give this a try, by on-drag-down and the ng-style $watch height of the content ($ionicScrollDelegate.$getByHandle(‘scroller’).getScrollView().__maxScrollTop) , as it increases increase the height and width of the image and store it in a ng-style. You can add it by height +=1 width += 1 or by how much the content being dragged.

Do not forget to add on-release event to reverse the whole thing.

I will try to give a snippet code for it.


Pinch to zoom does not work. It is just another open fullscreen image gallery.



I am looking to archive the same effect on my Ionic 3 application. Do you have some examples/links how do you can do the “elastic header” effect?

Thank you,