modal-slider-photos-and-videos
Use for ionic 2
Installation
npm i --save modal-slider-photos-and-videos
Config in the app.module.ts
import * as ionicGalleryModal from 'ionic-gallery-modal';
import { HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
imports: [
//...
ionicGalleryModal.GalleryModalModule,
//...
],
providers: [
//...
{
provide: HAMMER_GESTURE_CONFIG,
useClass: ionicGalleryModal.GalleryModalHammerConfig,
},
//...
],
Usage in the component
import { ModalController } from 'ionic-angular';
import { GalleryModal } from 'modal-slider-photos-and-videos';
constructor(
//...
public modalCtrl: ModalController,
//...
){}
Slider photos:
let modal = this.modalCtrl.create(GalleryModal, {
typeModal: "photo",
photos: array_photo,
initialSlide: currentIndex
});
modal.present();
Slider videos:
let modal = this.modalCtrl.create(GalleryModal, {
typeModal: "video",
videos: array_video,
initialSlide: currentIndex
});
modal.present();
Option
Name | Type | Value | Description |
---|---|---|---|
typeModal | string | "photo" | when use slider for photos |
typeModal | string | "video" | when use slider for videos |
photos | array | [] | is array information of all photos |
videos | array | [] | is array information of all videos |
initialSlide | number | 0 | pass params is index of a photo or a video need show |
Option of array photos
Name | Type | Value | Description |
---|---|---|---|
url | string | link of photo | |
avatar | string | link image avatar of user post this photo | |
name | string | name of user post this photo | |
title | string | title of this photo | |
date | string | date published this photo |
Example
{
url: "http://example.com/images/photo_1.jpg",
avatar: "http://example.com/avatar/david.jpg",
name: "David Beckham",
title: "Goal Goal!",
date: "3 months ago"
}
Option of array videos
Name | Type | Value | Description |
---|---|---|---|
url | string | link local of video | |
poster | string | link of image show before play video | |
avatar | string | link image avatar of user post this video | |
name | string | name of user post this video | |
title | string | title of this video | |
date | string | date published this video |
Example
{
url: "http://abc.com/media/video.mp4",
poster: "http://example.com/poster/juventus.jpg",
avatar: "http://example.com/avatar/buffon.jpg",
name: "Buffon",
title: "Save save!",
date: "3 months ago"
}