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.2 to 0.0.3
115
index.js
@@ -598,58 +598,61 @@ 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>` + | ||
| `<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>` + | ||
| `<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: [ | ||
| ":host .gallery-modal { position: relative; overflow: hidden; }" + | ||
| ":host .gallery-modal .close-button { position: absolute; top: 10px; left: 5px; background: none; box-shadow: none; z-index: 10; }" + | ||
| ":host .gallery-modal .close-button.button-ios ion-icon { font-size: 45px; font-weight: bold }" + | ||
| ":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 .image-on-top fitted-image { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } " | ||
| ], | ||
| 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 *ngIf="type_modal=='photo' && photos.length" class="slider" #slider [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> | ||
| <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-content"> | ||
| <p class="title">{{ photo.title }}</p> | ||
| <p class="date">{{ photo.date }}</p> | ||
| </div> | ||
| </div> | ||
| </ion-slide> | ||
| </ion-slides> | ||
| <ion-slides *ngIf="type_modal=='video' && videos.length" class="slider-video" #slider [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 width="100%" height="250" controls poster="{{ video.poster }}" preload="none" width="{{ width }}"> | ||
| <source src="{{ video.url }}" type="video/mp4"/> | ||
| </video> | ||
| <div class="footer-slider"> | ||
| <div class="footer-content"> | ||
| <p class="title">{{ video.title }}</p> | ||
| <p class="date">{{ video.date }}</p> | ||
| </div> | ||
| </div> | ||
| </ion-slide> | ||
| </ion-slides> | ||
| </ion-content>`, | ||
| styles: [` | ||
| :host .gallery-modal { position: relative; overflow: hidden; color: #f4f4f4; } | ||
| :host .gallery-modal .close-button { display: none; position: absolute; top: 10px; left: 5px; background: none; box-shadow: none; z-index: 10; } | ||
| :host .gallery-modal .close-button.button-ios ion-icon { font-size: 45px; font-weight: bold } | ||
| :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 .image-on-top fitted-image { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } | ||
| :host .gallery-modal .slider-video .avatar-slider { text-align: left; padding: 0 15px; } | ||
| :host .gallery-modal .slider-video .avatar-slider img, | ||
| :host .gallery-modal .slider-video .avatar-slider span { display: block; float: left; } | ||
| :host .gallery-modal .slider-video .avatar-slider img { width: 50px; height: 50px; } | ||
| :host .gallery-modal .slider-video .avatar-slider span { font-size: 15px; margin: 3px 0 0 5px; } | ||
| :host .gallery-modal .slider-video .slide-zoom { height: 100%; padding: 70px 0 10px 0; display: flex; flex-direction: column; justify-content: space-between; } | ||
| :host .gallery-modal .footer-slider { border-top: 1px solid rgba(244, 244, 244, 0.3); padding-top: 10px; } | ||
| :host .gallery-modal .footer-slider .footer-content { padding: 0 15px; } | ||
| :host .gallery-modal .footer-slider p { margin: 0 0 5px 0; font-size: 13px; text-align: left; min-height: 15px;} | ||
| :host .gallery-modal .footer-slider p:last-child { margin: 0; } | ||
| `] | ||
| },] }, | ||
@@ -656,0 +659,0 @@ ]; |
| { | ||
| "name": "modal-slider-photos-and-videos", | ||
| "version": "0.0.2", | ||
| "version": "0.0.3", | ||
| "description": "modal slider photos and video", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
| # modal-slider-photos-and-videos | ||
| ## Use for ionic 2 | ||
| ## Installation | ||
@@ -39,3 +41,6 @@ ``` | ||
| ){} | ||
| ``` | ||
| Slider photos: | ||
| ``` | ||
| let modal = this.modalCtrl.create(GalleryModal, { | ||
@@ -49,2 +54,13 @@ typeModal: "photo", | ||
| Slider videos: | ||
| ``` | ||
| let modal = this.modalCtrl.create(GalleryModal, { | ||
| typeModal: "video", | ||
| videos: array_video, | ||
| initialSlide: currentIndex | ||
| }); | ||
| modal.present(); | ||
| ``` | ||
| ## Option | ||
@@ -73,6 +89,6 @@ | Name | Type | Value | Description | | ||
| { | ||
| 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", | ||
| 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" | ||
@@ -97,9 +113,8 @@ } | ||
| 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", | ||
| poster: "http://example.com/poster/juventus.jpg", | ||
| avatar: "http://example.com/avatar/buffon.jpg", | ||
| name: "Buffon", | ||
| title: "Save save!", | ||
| 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 by1.29%
90985
- Lines of code
- increased by0.54%
1876
- Number of lines in readme file
- increased by14.71%
117
No dependency changes