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.