ionic-modal-slider

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'
}];