Any tap/pinch to zoom image tutorial?

uncategorized
1

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 (http://ionicframework.com/docs/api/service/%24ionicScrollDelegate/). 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:

2

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

3

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

4

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?

5

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

6

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!

7

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.

8

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:

9

@borisIzstop how could i do this.

10

Hi,

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.

11

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

12

Hello,

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,