Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
modal-slider-photos-and-videos
Advanced tools
modal-slider-photos-and-videos - npm Package Compare versions
Comparing version 0.0.1 to 0.0.2
90
index.js
@@ -598,49 +598,49 @@ import { Component, Directive, ElementRef, EventEmitter, Input, NgModule, Output, ViewChild } from '@angular/core'; | ||
| selector: 'gallery-modal', | ||
| template: "<ion-content class=\"gallery-modal\" [ngStyle]=\"modalStyle\" (window:resize)=\"resize($event)\" (window:orientationchange)=\"orientationChange($event)\" >" + | ||
| "<button class=\"close-button\" ion-button icon-only (click)=\"dismiss()\">" + | ||
| "<ion-icon name=\"{{ closeIcon }}\"></ion-icon>" + | ||
| "</button>" + | ||
| "<div *ngIf=\"type_modal=='photo'\" class=\"image-on-top\" [hidden]=\"sliderLoaded\">" + | ||
| "<zoomable-image [photo]=\"initialImage\" [resizeTriggerer]=\"resizeTriggerer\" [wrapperWidth]=\"width\" [wrapperHeight]=\"height\" ></zoomable-image>" + | ||
| "</div>" + | ||
| "<ion-slides class=\"slider\" #slider *ngIf=\"type_modal=='photo' && photos.length\" [initialSlide]=\"initialSlide\" [ngStyle]=\"slidesStyle\" touch-events (ionSlideDrag)=\"slidesDrag($event)\" (panup)=\"panUpDownEvent($event)\" (pandown)=\"panUpDownEvent($event)\" (panend)=\"panEndEvent($event)\" (pancancel)=\"panEndEvent($event)\" >" + | ||
| "<ion-slide *ngFor=\"let photo of photos;\">" + | ||
| "<div class=\"avatar-slider\">" + | ||
| "<img src=\"{{ photo.avatar }}\" />" + | ||
| "<span>{{ photo.name }}</span>" + | ||
| "</div>" + | ||
| template: `<ion-content class="gallery-modal" [ngStyle]="modalStyle" (window:resize)="resize($event)" (window:orientationchange)="orientationChange($event)" >` + | ||
| `<button class="close-button" ion-button icon-only (click)="dismiss()">` + | ||
| `<ion-icon name="{{ closeIcon }}"></ion-icon>` + | ||
| `</button>` + | ||
| "<zoomable-image [photo]=\"photo\" [resizeTriggerer]=\"resizeTriggerer\" [wrapperWidth]=\"width\" [wrapperHeight]=\"height\" [ngClass]=\"{ 'swiper-no-swiping': sliderDisabled }\" (disableScroll)=\"disableScroll($event)\" (enableScroll)=\"enableScroll($event)\" ></zoomable-image>" + | ||
| "<div class=\"footer-slider\">" + | ||
| "<div class=\"footer-slider-content\">" + | ||
| "<p class=\"footer-slider-content-title\">{{ photo.title }}</p>" + | ||
| "<p class=\"footer-slider-content-date\">{{ photo.date }}</p>" + | ||
| "</div>" + | ||
| "</div>" + | ||
| "</ion-slide>" + | ||
| "</ion-slides>" + | ||
| `<div *ngIf="type_modal=='photo'" class="image-on-top" [hidden]="sliderLoaded">` + | ||
| `<zoomable-image [photo]="initialImage" [resizeTriggerer]="resizeTriggerer" [wrapperWidth]="width" [wrapperHeight]="height" ></zoomable-image>` + | ||
| `</div>` + | ||
| "<ion-slides class=\"slider-video\" #slider *ngIf=\"type_modal=='video' && videos.length\" [initialSlide]=\"initialSlide\" [ngStyle]=\"slidesStyle\" (ionSlideDrag)=\"slidesDrag($event)\" (panup)=\"panUpDownEvent($event)\" (pandown)=\"panUpDownEvent($event)\" (panend)=\"panEndEvent($event)\" (pancancel)=\"panEndEvent($event)\" >" + | ||
| "<ion-slide class=\"video-slider\" *ngFor=\"let video of videos;\">" + | ||
| "<div class=\"avatar-slider\">" + | ||
| "<img src=\"{{ video.avatar }}\" />" + | ||
| "<span>{{ video.name }}</span>" + | ||
| "</div>" + | ||
| `<ion-slides class="slider" #slider *ngIf="type_modal=='photo' && photos.length" [initialSlide]="initialSlide" [ngStyle]="slidesStyle" touch-events (ionSlideDrag)="slidesDrag($event)" (panup)="panUpDownEvent($event)" (pandown)="panUpDownEvent($event)" (panend)="panEndEvent($event)" (pancancel)="panEndEvent($event)" >` + | ||
| `<ion-slide *ngFor="let photo of photos;">` + | ||
| `<div class="avatar-slider">` + | ||
| `<img src="{{ photo.avatar }}" />` + | ||
| `<span>{{ photo.name }}</span>` + | ||
| `</div>` + | ||
| "<video controls=\"controls\" poster=\"{{ video.poster }}\" preload=\"none\" width=\"{{ width }}\">" + | ||
| "<source src=\"{{ video.url }}\" type=\"video/mp4\"/>" + | ||
| "</video>" + | ||
| `<zoomable-image [photo]="photo" [resizeTriggerer]="resizeTriggerer" [wrapperWidth]="width" [wrapperHeight]="height" [ngClass]="{ 'swiper-no-swiping': sliderDisabled }" (disableScroll)="disableScroll($event)" (enableScroll)="enableScroll($event)" ></zoomable-image>` + | ||
| "<div class=\"footer-slider\">" + | ||
| "<div class=\"footer-slider-content\">" + | ||
| "<p class=\"footer-slider-content-title\">{{ video.title }}</p>" + | ||
| "<p class=\"footer-slider-content-date\">{{ video.date }}</p>" + | ||
| "</div>" + | ||
| "</div>" + | ||
| "</ion-slide>" + | ||
| "</ion-slides>" + | ||
| "</ion-content>", | ||
| `<div class="footer-slider">` + | ||
| `<div class="footer-slider-content">` + | ||
| `<p class="footer-slider-content-title">{{ photo.title }}</p>` + | ||
| `<p class="footer-slider-content-date">{{ photo.date }}</p>` + | ||
| `</div>` + | ||
| `</div>` + | ||
| `</ion-slide>` + | ||
| `</ion-slides>` + | ||
| `<ion-slides class="slider-video" #slider *ngIf="type_modal=='video' && videos.length" [initialSlide]="initialSlide" [ngStyle]="slidesStyle" (ionSlideDrag)="slidesDrag($event)" (panup)="panUpDownEvent($event)" (pandown)="panUpDownEvent($event)" (panend)="panEndEvent($event)" (pancancel)="panEndEvent($event)" >` + | ||
| `<ion-slide class="video-slider" *ngFor="let video of videos;">` + | ||
| `<div class="avatar-slider">` + | ||
| `<img src="{{ video.avatar }}" />` + | ||
| `<span>{{ video.name }}</span>` + | ||
| `</div>` + | ||
| `<video controls="controls" poster="{{ video.poster }}" preload="none" width="{{ width }}">` + | ||
| `<source src="{{ video.url }}" type="video/mp4"/>` + | ||
| `</video>` + | ||
| `<div class="footer-slider">` + | ||
| `<div class="footer-slider-content">` + | ||
| `<p class="footer-slider-content-title">{{ video.title }}</p>` + | ||
| `<p class="footer-slider-content-date">{{ video.date }}</p>` + | ||
| `</div>` + | ||
| `</div>` + | ||
| `</ion-slide>` + | ||
| `</ion-slides>` + | ||
| `</ion-content>`, | ||
| styles: [ | ||
@@ -651,4 +651,4 @@ ":host .gallery-modal { position: relative; overflow: hidden; }" + | ||
| ":host .gallery-modal .slider /deep/ .slide-zoom { position: relative; height: 100%; }" + | ||
| ":host .gallery-modal .slider-video { position: relative; }" + | ||
| ":host .gallery-modal .image-on-top { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; }" + | ||
| ":host .gallery-modal .slider-video { position: relative; }" + | ||
| ":host .gallery-modal .image-on-top { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; }" + | ||
| ":host .gallery-modal .image-on-top fitted-image { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } " | ||
@@ -655,0 +655,0 @@ ], |
| { | ||
| "name": "modal-slider-photos-and-videos", | ||
| "version": "0.0.1", | ||
| "version": "0.0.2", | ||
| "description": "modal slider photos and video", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
100
README.md
| # modal-slider-photos-and-videos | ||
| ## 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, | ||
| //... | ||
| ){} | ||
| let modal = this.modalCtrl.create(GalleryModal, { | ||
| typeModal: "photo", | ||
| photos: array_photo, | ||
| 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://i1.wp.com/inews.gtimg.com/newsapp_match/0/721407790/0", | ||
| avatar: "http://a0.att.hudong.com/80/38/31300543422791149371386090037_950.jpg", | ||
| name: "Bật Mã Ôn", | ||
| title: "Review vườn đào ngọc hoàng", | ||
| 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://i1.wp.com/inews.gtimg.com/newsapp_match/0/721407790/0", | ||
| avatar: "http://a0.att.hudong.com/80/38/31300543422791149371386090037_950.jpg", | ||
| name: "Bật Mã Ôn", | ||
| title: "Review vườn đào ngọc hoàng", | ||
| date: "3 months ago" | ||
| } | ||
| ``` | ||
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by2.68%
89829
- Number of lines in readme file
- increased by5000%
102
Worsened metrics
- Lines of code
- decreased by-0.05%
1866
No dependency changes