Ionic Pinch To Zoom


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


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


Works like magic, thank you sir!


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.




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


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.


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


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"
		<img ng-src="{{imageSrc}}" >

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;



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


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


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


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


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

how could i achieve this



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.


I found this helpful.


Thanks a lot, very helpful.


Same for me, doesnt work on new Ionic and CLI


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



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: