Page code for image pinch and zoom in ionic RC3. I used code from multiple places and credit is due. I cant seem to find the pages I have used the code from. If you know, please tell me so I can add that here.

img-zoom.html

<ion-header no-shadow>

  <ion-navbar no-border-bottom>
    <ion-buttons start>
      <button ion-button color="light" (click)="closeModal()">Cancel</button>
    </ion-buttons>
    <ion-title>Media</ion-title>
    <ion-buttons end>
      <ion-spinner *ngIf="!mediaLoaded" color="light"></ion-spinner>
    </ion-buttons>
  </ion-navbar>

</ion-header>


<ion-content>
  <div #imageParent class="pinch-zoom-container">
    <img #image dimg="medium" class="pinch-zoom-image" [src]="src" alt="loading.." (load)="setMediaLoaded()">
  </div>
</ion-content>

img-zoom.scss

.scroll-content {
    background: #1e1e1e;
}

ion-navbar .toolbar-background {
    background: rgba(0,0,0,0.3);
}

ion-content .scroll-content {
    margin-top:0px !important;
}
	.pinch-zoom-container {
    position:relative;
    overflow: hidden;
    height: 100%;
    width:100%;
  }
  .pinch-zoom-image {
    position: absolute;
    top: 50%;  /* position the top  edge of the element at the middle of the parent */
    left: 50%; /* position the left edge of the element at the middle of the parent */

    transform: translate(-50%, -50%); /* This is a shorthand of
                                         translateX(-50%) and translateY(-50%) */
	  -webkit-transform: translate(-50%, -50%);
    width: 100%;
  }

img-zoom.ts

import { Component, ViewChild } from '@angular/core';
import { Platform, NavController, NavParams, ViewController } from 'ionic-angular';
import { Gesture } from 'ionic-angular'

@Component({
  selector: 'page-image-zoom',
  templateUrl: 'image-zoom.html'
})
export class ImageZoom {

  @ViewChild('image') element;
  @ViewChild('imageParent') elementParent;

  image = null;
  container = null;
  transforms = [];
  adjustScale = 1;
  adjustDeltaX = 0;
  adjustDeltaY = 0;

  currentScale = null;
  currentDeltaX = null;
  currentDeltaY = null;

  public media: any;
  public src: string;
  public mediaType: string;
  private gesture: Gesture;
  public mediaLoaded:boolean = false;

  constructor(
    public platform: Platform,
    public navCtrl: NavController,
    public viewCtrl: ViewController
  ) {
    this.media =  this.navParams.get("media");
    this.src = this.appGlobals.mediaBaseUrls.medium + this.media.id + '.jpg';
    console.log("src", this.src);

  }
  
  setMediaLoaded =() =>{
    setTimeout(()=>this.mediaLoaded = true, 200);
  }

  ionViewDidLoad() {
    this.image = this.element.nativeElement;
    this.container = this.elementParent.nativeElement;
    // Prevent long press saving on mobiles.
    this.container.addEventListener('touchstart', function(e) {
      e.preventDefault();
    });

    this.init();
  }


  /* 
Initialize listeners for gestures
*/
  init = () => {
    //create gesture obj w/ ref to DOM element
    this.gesture = new Gesture(this.element.nativeElement);

    //listen for the gesture
    this.gesture.listen();

    this.gesture.on('doubletap', (ev) => {
      this.transforms = [];
      this.adjustScale += 1;
      if (this.adjustScale >= 4) this.adjustScale = 1;
      this.transforms.push('scale(' + this.adjustScale + ')');
      this.container.style.transform = this.transforms.join(' ');
      this.container.style.setProperty('transform', this.transforms.join(' '));
this.container.style.setProperty('-webkit-transform', this.transforms.join(' '));
    });


    this.gesture.on("pinch", (ev) => {

      this.transforms = [];

      // Adjusting the current pinch/pan event properties using the previous ones set when they finished touching
      this.currentScale = this.adjustScale * ev.scale;
      this.currentDeltaX = this.adjustDeltaX + (ev.deltaX / this.currentScale);
      this.currentDeltaY = this.adjustDeltaY + (ev.deltaY / this.currentScale);

      // Concatinating and applying parameters.
      if (this.currentScale < 1) {
        this.currentScale = 1;
        this.currentDeltaX = 0;
        this.currentDeltaY = 0;
      }
      this.transforms.push('scale(' + this.currentScale + ')');
      this.transforms.push('translate(' + this.currentDeltaX + 'px,' + this.currentDeltaY + 'px)');
      this.container.style.transform = this.transforms.join(' ');

    });


    this.gesture.on("pinchend", (ev) => {

      // Saving the final transforms for adjustment next time the user interacts.
      this.adjustScale = this.currentScale;
      this.adjustDeltaX = this.currentDeltaX;
      this.adjustDeltaY = this.currentDeltaY;

    });

    this.gesture.on("panend", (ev) => {

      // Saving the final transforms for adjustment next time the user interacts.
      this.adjustScale = this.currentScale;
      this.adjustDeltaX = this.currentDeltaX;
      this.adjustDeltaY = this.currentDeltaY;

    });

  }

  /* close modal */
  closeModal() {
    this.viewCtrl.dismiss();
  }

}