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?
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?
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!
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
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.