Ionic Pinch To Zoom

demo
1

I though I’d share this snippet - something I’ve been working on for some time. Its very simple and easy to implement.

19 Likes
2

This is exactly what I was looking for. Thank you!

1 Like
3

Works like magic, thank you sir!

1 Like
4

Just wanted to say thanks! Had been looking for this for a while and came across your post. I changed it to not show the background and header and added click on the image to close. Pinch to zoom works like a charm.

Thanks,

Robert

1 Like
5

Do you have a link to a codepen that does this? Could be useful

1 Like
6

I had it working great prior to 1.2, but now having issues with new update to ion-scroll. I am working on now and will post it when I get it fixed.

1 Like
7

any news on this? i was also using this code, but it no longer works with 1.2. thank you

1 Like
8

This is what I have for my image modal with no header and pinch to zoom.

<ion-modal-view  class="image-modal" ng-click="closeImgModal()">
	<ion-scroll zooming="true"
		    direction="xy" 
		    delegate-handle="zoom-pane" 
		    class="zoom-pane" 
		    min-zoom="1" 
                    scrollbar-x="false" 
	            scrollbar-y="false" 
		    overflow-scroll="false">
		<img ng-src="{{imageSrc}}" >
	</ion-scroll>	
</ion-modal-view>

and here is my css:

/* full screen image zoom pane */

.zoom-pane {
	width: 100% !important;
	height: 100% !important;
}

.zoom-pane .scroll {
	min-height: 100% !important;
	 
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-direction: normal;
	-moz-box-direction: normal;
	-webkit-box-orient: horizontal;
	-moz-box-orient: horizontal;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap: nowrap;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	-webkit-box-pack: center;
	-moz-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-align-content: stretch;
	-ms-flex-line-pack: stretch;
	align-content: stretch;
	-webkit-box-align: center;
	-moz-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}

.zoom-pane img {
	width: 100% !important;
	vertical-align: middle !important;
}

.image-modal {
width: 100% !important;
height: 100% !important;
top: 0 !important;
left: 0 !important;
background: black !important;
}
6 Likes
9

thanks!

so what’s missing in the original code to make it work with 1.2x is overflow-scroll=“false” inside of the modal layers ion-scroll

1 Like
10

Any update on this is it working now? I’m also trying ion-scroll. In android only image is shown but pinch to zoom is not working. Few version details,

Cordova CLI: 5.4.1
Ionic Version: 1.2.4
Ionic CLI Version: 1.7.11
Ionic App Lib Version: 0.6.5
OS: Windows 7 SP1
Node Version: v0.12.2

1 Like
11

Setting the overflow-scroll=“false” does the trick, pinch to zoom works with that in Android.

2 Likes
13

Thanks Ionic it’s hard implement in phonegap…:slight_smile:

1 Like
14

@sonusinghal69 @techsearch @Corvi @rgecy @zocheyado @shuye @pink_tshirt

how could i achieve this

2 Likes
15

Hi,

First add ng-class to img tag. Then
using two geasters, First drag-down check if the content at top of screen then increase the image width and height. Second geasture is on-release set the ng-class back to old width and height.

Two things:
1-Not sure if this a best or a good practice.
2- It is not going to give the same effect %100 as you wanted. If you are intersted I can make a codepin. I am using my phone thats why I didn’t write the full code.

1 Like
16

I found this helpful.

https://timmywil.github.io/jquery.panzoom/

1 Like
17

Thanks a lot, very helpful.

1 Like
18

Same for me, doesnt work on new Ionic and CLI

1 Like
19

@rohitaneja8 Did you add overflow-scroll="false" to <ion-scroll> ??

1 Like
20

Hi,

How were you able to use this plugin in Ionic? I can’t figure out the syntax to import it. It is already in my node modules.

For jQuery, I use import * as $ from 'jquery';

Something like import panzoom from 'jquery.panzoom'; doesn’t work.

Thanks :slight_smile: