Ionic 2 component providing a Twitter inspired experience to visualize pictures.
npm install ionic-img-viewer
npm install --save ionic-img-viewer
`
Check you peer-dependencies warnings after npm install to make sure you are using a version in accordance to your Ionic version.
$3
`typescript
import { IonicImageViewerModule } from 'ionic-img-viewer';
@NgModule({
imports: [
IonicImageViewerModule
]
})
export class AppModule {}
`
Usage
$3
Add the imageViewer property to the image element.
`html
`
If you use thumbnails and want to display bigger images, you can use it like so :
`html
`
However, if OTHER_IMAGE_URL is not preloaded, the animation might suffer. There will be no loaded image to display in order to have the nice and smooth transition, and you might see the image blinking while opening it.
So try to cache your image before the call if you use it that way.
$3
If you need to, you can attach a callback to close event, fired right after the image viewer element has been closed :
`html
`
$3
If you don't want to use the directive, you can create an instance of the ImageViewer yourself and trigger the presentation whenever you want.
`html
`
`typescript
import { ImageViewerController } from 'ionic-img-viewer';
export class MyPage {
_imageViewerCtrl: ImageViewerController;
constructor(imageViewerCtrl: ImageViewerController) {
this._imageViewerCtrl = imageViewerCtrl;
}
presentImage(myImage) {
const imageViewer = this._imageViewerCtrl.create(myImage);
imageViewer.present();
setTimeout(() => imageViewer.dismiss(), 1000);
imageViewer.onDidDismiss(() => alert('Viewer dismissed'));
}
}
`
As a second argument to the create(imageElement, config)` method, you can pass an object with the following options.