modal-slider-photos-and-videos
v0.0.8
Published
modal slider photos and video
Downloads
4
Readme
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"
}