Ionic Slide Zoom
Ionic slide with zoom modal
How To Use:
$ npm install ion2-image-slide --save
Then cd into app.ts
:
import { SlideModule, SlideCmp } from 'ion2-image-slide';
@NgModule({
imports: [
xxx,
SlideModule
],
entrycomponents: [
xxx,
SlideCmp
]
})
Cd into your page:
@ViewChild(Slides) slides: Slides;
imgSlides: Array<any> = [
{
url: 'xxx.jpg'
},
{
url: 'xxx.jpg'
},
{
url: 'xxx.jpg'
},
{
url: 'xxx.jpg'
}
];
constructor(private slideCtrl: SlideController){}
slideUp(ev: any) {
let currentIndex = this.slides._activeIndex;
let slide = this.slideCtrl.create({
ev: ev,
list: this.imgSlides,
index: currentIndex,
change: this.changeCB.bind(this)
});
slide.present({
ev: {
data: ev,
list: this.imgSlides,
index: currentIndex,
change: this.changeCB.bind(this)
}
});
}
changeCB(data: any) {
this.slides.slideTo(data, 0);
}
And the html template:
<div>
<ion-slides>
<ion-slide *ngFor="let slide of imgSlides">
<img [src]="slide.url" (click)="slideUp($event)">
</ion-slide>
</ion-slides>
</div>
Substitute ios for android if not on a Mac.