Ionic Modal Slider
It consists of a modal that will help you make gallery preview modal.
Last tested with Ionic 3.6.0
Installation
Install it using npm
npm install ionic-modal-slider --save
and then, within your application module
import * as ionicGalleryModal from 'ionic-modal-slider';
import { HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
and add the GalleryModalModule
to your imports
imports: [
//...
ionicGalleryModal.GalleryModalModule,
//...
],
and to your providers
providers: [
//...
{
provide: HAMMER_GESTURE_CONFIG,
useClass: ionicGalleryModal.GalleryModalHammerConfig,
},
//...
],
Usage
To open the module just use the Ionic ModalController
import { ModalController } from 'ionic-angular';
import { GalleryModal } from 'ionic-modal-slider';
let modal = this.modalCtrl.create(GalleryModal, {
photos: photos,
initialSlide: index,
onDissmiss: () => {
alert('Event on dismiss modal');
}
});
modal.present();
Options
The possible options for it are:
{
photos: Array[],
initialSlide: number,
onDissmiss: () => {
alert('Event on dismiss modal');
}
}
Array = [{
type: 'photo',
url: 'https://images.pexels.com/photos/207171/pexels-photo-207171.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb',
title: 'Lorem ipsum',
date: '11/11/2011',
listing: 'Hotels',
user: 'John',
toListingPageID: '11',
eventTapOnTitle: 'gotoListing',
avatarUrl: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRlNQ2yyZICBI_pcqc_KxT55FYvlpE8TtOKTlVuNuVyjbr1BSwLhw'
}, {
type: 'video',
url: 'https://www.youtube.com/embed/60ItHLz5WEA',
title: 'lorem ipsum dolor sit amet',
date: '11/11/2011',
listing: 'Hotels',
user: 'John',
toListingPageID: '12',
eventTapOnTitle: 'gotoListing',
avatarUrl: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRlNQ2yyZICBI_pcqc_KxT55FYvlpE8TtOKTlVuNuVyjbr1BSwLhw'
}];