Last active
September 30, 2024 18:26
-
-
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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%; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Can someone please elaborate on the appGlobals from the code in the constructor, I am getting an error for it.