ion-image-slide
An Ionic project
Last updated 2 years ago by yellowjun .
Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install ion-image-slide 
SYNC missed versions from official npm registry.

Ionic Slide Zoom

Ionic slide with zoom modal

How To Use:

$ npm install ion-image-slide --save

Then cd into app.ts:

import { SlideModule, SlideCmp }
@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.

Current Tags

  • 3.2.0                                ...           latest (2 years ago)

5 Versions

  • 3.2.0                                ...           2 years ago
  • 3.1.0                                ...           2 years ago
  • 3.0.0                                ...           2 years ago
  • 2.1.1                                ...           2 years ago
  • 2.0.0                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 1
This Month 2
Last Day 0
Last Week 0
Last Month 12
Dev Dependencies (2)

Copyright 2014 - 2016 © taobao.org |