Desarrollando la galeria
This commit is contained in:
parent
4563f40bfd
commit
ebe76bec96
@ -1,8 +1,13 @@
|
|||||||
import { BrowserModule } from '@angular/platform-browser';
|
import { BrowserModule } from '@angular/platform-browser';
|
||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
import { HttpModule } from '@angular/http';
|
import { HttpModule } from '@angular/http';
|
||||||
|
/*pdf*/
|
||||||
import { FormsModule } from '@angular/forms';
|
import { FormsModule } from '@angular/forms';
|
||||||
import { SimplePdfViewerModule } from 'simple-pdf-viewer';
|
import { SimplePdfViewerModule } from 'simple-pdf-viewer';
|
||||||
|
/*imagegallery*/
|
||||||
|
import 'hammerjs';
|
||||||
|
import 'mousetrap';
|
||||||
|
import { ModalGalleryModule } from '@ks89/angular-modal-gallery';
|
||||||
|
|
||||||
import { PageService } from './page.service';
|
import { PageService } from './page.service';
|
||||||
import { AppComponent } from './app.component';
|
import { AppComponent } from './app.component';
|
||||||
@ -37,7 +42,8 @@ import { DedaloService } from './dedalo.service';
|
|||||||
HttpModule,
|
HttpModule,
|
||||||
AppRoutingModule,
|
AppRoutingModule,
|
||||||
FormsModule,
|
FormsModule,
|
||||||
SimplePdfViewerModule
|
SimplePdfViewerModule,
|
||||||
|
ModalGalleryModule.forRoot()
|
||||||
],
|
],
|
||||||
providers: [
|
providers: [
|
||||||
PageService,
|
PageService,
|
||||||
@ -46,3 +52,9 @@ import { DedaloService } from './dedalo.service';
|
|||||||
bootstrap: [AppComponent]
|
bootstrap: [AppComponent]
|
||||||
})
|
})
|
||||||
export class AppModule { }
|
export class AppModule { }
|
||||||
|
|
||||||
|
/* otros ejemplos */
|
||||||
|
/*
|
||||||
|
https://github.com/Ks89/angular-modal-gallery
|
||||||
|
https://github.com/viktorhajer/simple-pdf-viewer/wiki/API-Documentation
|
||||||
|
*/
|
||||||
|
@ -4,6 +4,8 @@ import { Observable } from 'rxjs';
|
|||||||
import 'rxjs/add/operator/map';
|
import 'rxjs/add/operator/map';
|
||||||
import { PageItem } from './page';
|
import { PageItem } from './page';
|
||||||
import { DomSanitizer, SafeResourceUrl, SafeHtml , SafeUrl} from '@angular/platform-browser';
|
import { DomSanitizer, SafeResourceUrl, SafeHtml , SafeUrl} from '@angular/platform-browser';
|
||||||
|
import { Image} from '@ks89/angular-modal-gallery';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// @Injectable({providedIn : 'root'}) {}
|
// @Injectable({providedIn : 'root'}) {}
|
||||||
@ -57,7 +59,7 @@ export class PageService {
|
|||||||
return this.http.get(url,{search:searchParams})
|
return this.http.get(url,{search:searchParams})
|
||||||
.map(res => {
|
.map(res => {
|
||||||
return res.json().map(item => {
|
return res.json().map(item => {
|
||||||
console.log(item);
|
//console.log(item);
|
||||||
let page = new PageItem(
|
let page = new PageItem(
|
||||||
item.id as string,
|
item.id as string,
|
||||||
item.title.rendered,
|
item.title.rendered,
|
||||||
@ -88,6 +90,18 @@ export class PageService {
|
|||||||
//this.iframeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.iframeUrl);
|
//this.iframeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.iframeUrl);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Gallery */
|
||||||
|
// console.log(item['gallery'])
|
||||||
|
if (item["gallery"]) {
|
||||||
|
page['gallery'] = [];
|
||||||
|
let c = 0;
|
||||||
|
item["gallery"].forEach( (i)=> {
|
||||||
|
var im = new Image(c, { img: i['modal'], description: 'Description 1' },{ img: i['thumb'] });
|
||||||
|
page['gallery'].push(im);
|
||||||
|
c++;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
let link = document.createElement('a');
|
let link = document.createElement('a');
|
||||||
link.href = item.link;
|
link.href = item.link;
|
||||||
page['link'] = link.pathname;
|
page['link'] = link.pathname;
|
||||||
|
@ -1,4 +1,5 @@
|
|||||||
import {SafeUrl} from '@angular/platform-browser';
|
import {SafeUrl} from '@angular/platform-browser';
|
||||||
|
import { Image} from '@ks89/angular-modal-gallery';
|
||||||
|
|
||||||
export class PageItem {
|
export class PageItem {
|
||||||
constructor(
|
constructor(
|
||||||
@ -11,7 +12,8 @@ export class PageItem {
|
|||||||
public background_image? : string,
|
public background_image? : string,
|
||||||
public link?: string,
|
public link?: string,
|
||||||
public publitas_link?: SafeUrl,
|
public publitas_link?: SafeUrl,
|
||||||
public featuredmedia ? : any[]
|
public featuredmedia ? : any[],
|
||||||
|
public gallery? : Array<Image>
|
||||||
) {}
|
) {}
|
||||||
|
|
||||||
// public set (key,attr) {
|
// public set (key,attr) {
|
||||||
|
@ -20,6 +20,18 @@
|
|||||||
<div class="row" *ngIf="page.content">
|
<div class="row" *ngIf="page.content">
|
||||||
<div class="col-md-12" [innerHTML]="page.content"></div>
|
<div class="col-md-12" [innerHTML]="page.content"></div>
|
||||||
</div>
|
</div>
|
||||||
|
<section *ngIf="page.gallery.length>0">
|
||||||
|
<div class="my-app-custom-plain-container-with-desc">
|
||||||
|
<ng-container *ngFor="let img of page.gallery">
|
||||||
|
<figure class="my-app-custom-image-with-desc">
|
||||||
|
<img [src]="img.modal.img" (click)="openImageModalRowDescription(img)"/>
|
||||||
|
<figcaption class="description">{{img.modal.description ? img.modal.description : 'No description available'}}
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
</ng-container>
|
||||||
|
</div>
|
||||||
|
<ks-modal-gallery [id]="8" [modalImages]="page.gallery" [plainGalleryConfig]="customPlainGalleryRowDescConfig"></ks-modal-gallery>
|
||||||
|
</section>
|
||||||
<div class="row" *ngIf="page.publitas_link">
|
<div class="row" *ngIf="page.publitas_link">
|
||||||
<div class="col-md-12">
|
<div class="col-md-12">
|
||||||
<simple-pdf-viewer #pdfViewer [src]="'../assets/test.pdf#zoom=1.01'" [removePageBorders]="true"></simple-pdf-viewer>
|
<simple-pdf-viewer #pdfViewer [src]="'../assets/test.pdf#zoom=1.01'" [removePageBorders]="true"></simple-pdf-viewer>
|
||||||
|
@ -1,7 +1,29 @@
|
|||||||
import { Component, OnInit } from '@angular/core';
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
import { BrowserModule } from '@angular/platform-browser';
|
||||||
import { PageService } from '../page.service';
|
import { PageService } from '../page.service';
|
||||||
import { PageItem } from '../page';
|
import { PageItem } from '../page';
|
||||||
import { ActivatedRoute } from "@angular/router";
|
import { ActivatedRoute } from "@angular/router";
|
||||||
|
import { SafeResourceUrl, DomSanitizer } from '@angular/platform-browser';
|
||||||
|
import {
|
||||||
|
AccessibilityConfig,
|
||||||
|
Action,
|
||||||
|
AdvancedLayout,
|
||||||
|
ButtonEvent,
|
||||||
|
ButtonsConfig,
|
||||||
|
ButtonsStrategy,
|
||||||
|
ButtonType,
|
||||||
|
Description,
|
||||||
|
DescriptionStrategy,
|
||||||
|
DotsConfig,
|
||||||
|
GalleryService,
|
||||||
|
GridLayout,
|
||||||
|
Image,
|
||||||
|
ImageModalEvent,
|
||||||
|
LineLayout,
|
||||||
|
PlainGalleryConfig,
|
||||||
|
PlainGalleryStrategy,
|
||||||
|
PreviewConfig
|
||||||
|
} from '@ks89/angular-modal-gallery';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-page',
|
selector: 'app-page',
|
||||||
@ -13,19 +35,21 @@ export class PageComponent implements OnInit {
|
|||||||
pages : PageItem[];
|
pages : PageItem[];
|
||||||
slug : string;
|
slug : string;
|
||||||
parent : string;
|
parent : string;
|
||||||
|
imageIndex = 1;
|
||||||
|
galleryId = 1;
|
||||||
|
gallery: Image[];
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private route: ActivatedRoute,
|
private route: ActivatedRoute,
|
||||||
private pageService: PageService,
|
private pageService: PageService,
|
||||||
)
|
private galleryService: GalleryService,
|
||||||
{
|
private sanitizer: DomSanitizer
|
||||||
|
){
|
||||||
this.route.params.subscribe( params => {
|
this.route.params.subscribe( params => {
|
||||||
this.slug = params.id;
|
this.slug = params.id;
|
||||||
this.parent = params.parent;
|
this.parent = params.parent;
|
||||||
this.getPage();
|
this.getPage();
|
||||||
} );
|
} );
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit() {}
|
ngOnInit() {}
|
||||||
@ -39,4 +63,20 @@ export class PageComponent implements OnInit {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** gallery **/
|
||||||
|
customPlainGalleryRowDescConfig: PlainGalleryConfig = {
|
||||||
|
strategy: PlainGalleryStrategy.CUSTOM,
|
||||||
|
layout: new AdvancedLayout(-1, true)
|
||||||
|
};
|
||||||
|
|
||||||
|
openImageModalRowDescription(image: Image) {
|
||||||
|
console.log('Opening modal gallery from custom plain gallery row and description, with image: ', image);
|
||||||
|
const index: number = this.getCurrentIndexCustomLayout(image, this.pages[0].gallery);
|
||||||
|
this.customPlainGalleryRowDescConfig = Object.assign({}, this.customPlainGalleryRowDescConfig, { layout: new AdvancedLayout(index, true) });
|
||||||
|
}
|
||||||
|
|
||||||
|
private getCurrentIndexCustomLayout(image: Image, images: Image[]): number {
|
||||||
|
return image ? images.indexOf(image) : -1;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
BIN
src/assets/img1.jpg
Normal file
BIN
src/assets/img1.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 245 KiB |
108
src/styles.css
108
src/styles.css
@ -2,21 +2,21 @@
|
|||||||
@import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
|
@import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
|
||||||
@import url('https://fonts.googleapis.com/css?family=Tinos');
|
@import url('https://fonts.googleapis.com/css?family=Tinos');
|
||||||
@import url('https://fonts.googleapis.com/css?family=Raleway');
|
@import url('https://fonts.googleapis.com/css?family=Raleway');
|
||||||
|
/*
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Manteka";
|
font-family: "Manteka";
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
src: url('./assets/vision-webfont.woff');
|
src: url('./assets/vision-webfont.woff');
|
||||||
}
|
} */
|
||||||
|
|
||||||
/* main */
|
/* main */
|
||||||
* { transition:0.2s;}
|
* { transition:0.2s;}
|
||||||
|
|
||||||
body { font-family:"Raleway",serif; overflow-x:hidden;background:#efefef;margin:0; font-size:14pt;}
|
body { font-family:"Raleway",serif; overflow-x:hidden;background:#efefef;margin:0; font-size:14pt;}
|
||||||
h1,h2 { font-family: "Manteka", sans-serif;text-transform:uppercase;font-weight:bold;}
|
h1,h2 { font-family: "Raleway", sans-serif;text-transform:uppercase;font-weight:bold;}
|
||||||
|
|
||||||
header { overflow:hidden; width:100%;height:100%;height:100vh;text-align:center;position:relative;}
|
app-header header { overflow:hidden; width:100%;height:100%;height:100vh;text-align:center;position:relative;}
|
||||||
|
|
||||||
header.homepage { background:url('./assets/industria-paisaia.svg'); background-size:contain; background-repeat:no-repeat; background-position:center center;}
|
header.homepage { background:url('./assets/industria-paisaia.svg'); background-size:contain; background-repeat:no-repeat; background-position:center center;}
|
||||||
|
|
||||||
@ -38,9 +38,9 @@ div.menu {padding:0px; width:100%; background:#fff; z-index:200; position:fixed;
|
|||||||
div.menu * {float:left;}
|
div.menu * {float:left;}
|
||||||
div.menu div.Search {float:right;}
|
div.menu div.Search {float:right;}
|
||||||
div.menu div.language {float:right;margin:5px;font-size:0.7em;padding-top:1%;}
|
div.menu div.language {float:right;margin:5px;font-size:0.7em;padding-top:1%;}
|
||||||
div.menu div.language span {padding:3px;font-family:"Manteka";cursor:pointer;}
|
div.menu div.language span {padding:3px;font-family:"Raleway";cursor:pointer;}
|
||||||
div.Search input {background:none; border:none; border-bottom:2px solid #000;}
|
div.Search input {background:none; border:none; border-bottom:2px solid #000;}
|
||||||
div.menu nav ul li {text-transform:uppercase;height:60px;font-family:"Manteka";padding:10px;min-width:10%;cursor:pointer;}
|
div.menu nav ul li {text-transform:uppercase;height:60px;font-family:"Raleway";padding:10px;min-width:10%;cursor:pointer;}
|
||||||
div.menu nav ul li:hover { background-color:#f7886c;}
|
div.menu nav ul li:hover { background-color:#f7886c;}
|
||||||
div.menu nav ul li:active { background-color:#f7886c;color:#fff;}
|
div.menu nav ul li:active { background-color:#f7886c;color:#fff;}
|
||||||
div.menu nav ul li.active { background-color:#f7886c;color:#fff;}
|
div.menu nav ul li.active { background-color:#f7886c;color:#fff;}
|
||||||
@ -86,7 +86,7 @@ footer.single { min-height:100px; height:100%; margin-top:30px; padding:20px; co
|
|||||||
/* item continaer */
|
/* item continaer */
|
||||||
.item-container {width:27%;margin:15px 15px 25px 15px;float:left;padding:0px; border:0px solid #E12323;trans ition:1s;}
|
.item-container {width:27%;margin:15px 15px 25px 15px;float:left;padding:0px; border:0px solid #E12323;trans ition:1s;}
|
||||||
.item-container:hover {transform:translateY(-5px);}
|
.item-container:hover {transform:translateY(-5px);}
|
||||||
.item-container h3 {font-family:"Manteka";text-transform:uppercase;color:#f7886c; margin-bottom:0; font-size:0.8em; text-align:right;padding:2px;cursor:pointer;}
|
.item-container h3 {font-family:"Raleway";text-transform:uppercase;color:#f7886c; margin-bottom:0; font-size:0.8em; text-align:right;padding:2px;cursor:pointer;}
|
||||||
.item-container h3::after {content:'';}
|
.item-container h3::after {content:'';}
|
||||||
.item-container h2 {font-size:2em; text-align:center;padding:2px;}
|
.item-container h2 {font-size:2em; text-align:center;padding:2px;}
|
||||||
.item-container h2.thumbtitle {position:relative;width:100%;text-align:center;padding-top:15%;}
|
.item-container h2.thumbtitle {position:relative;width:100%;text-align:center;padding-top:15%;}
|
||||||
@ -124,7 +124,7 @@ header.item { margin-top:50px;height:0;}
|
|||||||
.info h1 span {background-color:#d2e8eb;padding:5px;}
|
.info h1 span {background-color:#d2e8eb;padding:5px;}
|
||||||
.info h2 {color:#f7886c;}
|
.info h2 {color:#f7886c;}
|
||||||
.info ul.filters {list-style:none; margin:0;padding:0;}
|
.info ul.filters {list-style:none; margin:0;padding:0;}
|
||||||
.info ul.filters li {cursor:pointer; border-right:5px solid #f7886c; padding:5px 30px; text-transform:uppercase;font-family:"Manteka";text-align:right;}
|
.info ul.filters li {cursor:pointer; border-right:5px solid #f7886c; padding:5px 30px; text-transform:uppercase;font-family:"Raleway";text-align:right;}
|
||||||
.info ul.filters li:hover {border-right:0px;color:#f7886c;}
|
.info ul.filters li:hover {border-right:0px;color:#f7886c;}
|
||||||
.info ul.filters li:active {border-right:0px;color:#fff;background-color:#f7886c;}
|
.info ul.filters li:active {border-right:0px;color:#fff;background-color:#f7886c;}
|
||||||
.info ul.filters li.active {border-right:0px;color:#fff;background-color:#f7886c;}
|
.info ul.filters li.active {border-right:0px;color:#fff;background-color:#f7886c;}
|
||||||
@ -136,3 +136,95 @@ img.fullwidth {width:100%;}
|
|||||||
div.pdf-buttons { width:100%;min-height:50px;text-align:center;float:right;position:absolute;top:0; }
|
div.pdf-buttons { width:100%;min-height:50px;text-align:center;float:right;position:absolute;top:0; }
|
||||||
div.pdf-buttons button {border:0;background:#d2e8eb; font-size:1em;cursor:pointer;}
|
div.pdf-buttons button {border:0;background:#d2e8eb; font-size:1em;cursor:pointer;}
|
||||||
div.pdf-buttons button:hover {background:#f7886c; }
|
div.pdf-buttons button:hover {background:#f7886c; }
|
||||||
|
|
||||||
|
/** gallery */
|
||||||
|
/* .my-app-custom-plain-container-row {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
.my-app-custom-plain-container-row .my-app-custom-image-row {
|
||||||
|
cursor: pointer;
|
||||||
|
height: auto;
|
||||||
|
margin-right: 2px;
|
||||||
|
width: 50px;
|
||||||
|
}
|
||||||
|
.my-app-custom-plain-container-row .my-app-custom-image-row.after {
|
||||||
|
border-top: 2px;
|
||||||
|
cursor: pointer;
|
||||||
|
display: none;
|
||||||
|
height: 100%;
|
||||||
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.my-app-custom-plain-container-column {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
.my-app-custom-plain-container-column .my-app-custom-image-column {
|
||||||
|
cursor: pointer;
|
||||||
|
height: auto;
|
||||||
|
margin-right: 2px;
|
||||||
|
width: 50px;
|
||||||
|
}
|
||||||
|
.my-app-custom-plain-container-column .my-app-custom-image-column.after {
|
||||||
|
border-top: 2px;
|
||||||
|
cursor: pointer;
|
||||||
|
display: none;
|
||||||
|
height: 100%;
|
||||||
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
} */
|
||||||
|
.my-app-custom-plain-container-with-desc {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
.my-app-custom-plain-container-with-desc figure {
|
||||||
|
margin: 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.my-app-custom-plain-container-with-desc figure img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.my-app-custom-plain-container-with-desc figure figcaption {
|
||||||
|
background: rgba(0, 0, 0, .5);
|
||||||
|
color: #fff;
|
||||||
|
font-size: 85%;
|
||||||
|
padding: 5px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 3px;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
.my-app-custom-plain-container-with-desc .description {
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.my-app-custom-plain-container-with-desc .my-app-custom-image-with-desc {
|
||||||
|
height: 150px;
|
||||||
|
margin-right: 2px;
|
||||||
|
width: 200px;
|
||||||
|
align-self: start;
|
||||||
|
overflow:hidden;
|
||||||
|
}
|
||||||
|
.more {
|
||||||
|
background: rgba(0, 0, 0, .7);
|
||||||
|
cursor: pointer;
|
||||||
|
color: #fff;
|
||||||
|
padding-top: 4px;
|
||||||
|
height: 46px;
|
||||||
|
position: absolute;
|
||||||
|
text-align: center;
|
||||||
|
width: 50px;
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user