Skip to content

Instantly share code, notes, and snippets.

@vazad28
Last active September 30, 2024 18:26
Show Gist options
  • Save vazad28/bd7ff445b090ab130ff1b291ca057002 to your computer and use it in GitHub Desktop.
Save vazad28/bd7ff445b090ab130ff1b291ca057002 to your computer and use it in GitHub Desktop.
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.
<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>
.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%) */
width: 100%;
}
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.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();
}
}
@saurabh-kale
Copy link

Can someone please elaborate on the appGlobals from the code in the constructor, I am getting an error for it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment