Desarrollando la galeria

src/app/app.module.ts

@@ -1,8 +1,13 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { HttpModule } from '@angular/http';
+/*pdf*/
 import { FormsModule } from '@angular/forms';
 import { SimplePdfViewerModule } from 'simple-pdf-viewer';
+/*imagegallery*/
+import 'hammerjs';
+import 'mousetrap';
+import { ModalGalleryModule } from '@ks89/angular-modal-gallery';
 
 import { PageService } from './page.service';
 import { AppComponent } from './app.component';
@@ -37,7 +42,8 @@ import { DedaloService } from './dedalo.service';
     HttpModule,
     AppRoutingModule,
     FormsModule,
-    SimplePdfViewerModule
+    SimplePdfViewerModule,
+    ModalGalleryModule.forRoot()
   ],
   providers: [
     PageService,
@@ -46,3 +52,9 @@ import { DedaloService } from './dedalo.service';
   bootstrap: [AppComponent]
 })
 export class AppModule { }
+
+/* otros ejemplos */
+/*
+https://github.com/Ks89/angular-modal-gallery
+https://github.com/viktorhajer/simple-pdf-viewer/wiki/API-Documentation
+*/

src/app/page.service.ts

@@ -4,6 +4,8 @@ import { Observable } from 'rxjs';
 import 'rxjs/add/operator/map';
 import { PageItem } from './page';
 import { DomSanitizer, SafeResourceUrl, SafeHtml , SafeUrl} from '@angular/platform-browser';
+import { Image} from '@ks89/angular-modal-gallery';
+
 
 
 // @Injectable({providedIn : 'root'}) {}
@@ -57,7 +59,7 @@ export class PageService {
     return this.http.get(url,{search:searchParams})
       .map(res => {
         return res.json().map(item => {
-          console.log(item);
+          //console.log(item);
           let page = new PageItem(
             item.id as string,
             item.title.rendered,
@@ -88,6 +90,18 @@ export class PageService {
             //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');
           link.href = item.link;
           page['link'] = link.pathname;

src/app/page.ts

@@ -1,4 +1,5 @@
 import {SafeUrl} from '@angular/platform-browser';
+import { Image} from '@ks89/angular-modal-gallery';
 
 export class PageItem {
   constructor(
@@ -11,7 +12,8 @@ export class PageItem {
     public background_image? : string,
     public link?: string,
     public publitas_link?: SafeUrl,
-    public featuredmedia ? : any[]
+    public featuredmedia ? : any[],
+    public gallery? : Array<Image>
   ) {}
 
   // public set (key,attr) {

src/app/page/page.component.html

@@ -20,6 +20,18 @@
 				<div class="row" *ngIf="page.content">
 					<div class="col-md-12" [innerHTML]="page.content"></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="col-md-12">
 						<simple-pdf-viewer #pdfViewer [src]="'../assets/test.pdf#zoom=1.01'" [removePageBorders]="true"></simple-pdf-viewer>

src/app/page/page.component.ts

@@ -1,7 +1,29 @@
 import { Component, OnInit } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
 import { PageService } from '../page.service';
 import { PageItem } from '../page';
 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({
   selector: 'app-page',
@@ -13,19 +35,21 @@ export class PageComponent implements OnInit {
   pages : PageItem[];
   slug : string;
   parent : string;
+  imageIndex = 1;
+  galleryId = 1;
+  gallery: Image[];
 
   constructor(
     private route: ActivatedRoute,
     private pageService: PageService,
-  )
+    private galleryService: GalleryService,
-  {
+    private sanitizer: DomSanitizer
+  ){
         this.route.params.subscribe( params => {
           this.slug = params.id;
           this.parent = params.parent;
           this.getPage();
         } );
-
-        
   }
 
   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;
+}
+
 }

src/styles.css

@@ -2,21 +2,21 @@
 @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=Raleway');
-
+/*
 @font-face {
         font-family: "Manteka";
         font-style: normal;
         font-weight: normal;
         src: url('./assets/vision-webfont.woff');
-}
+} */
 
 /* main */
 * { transition:0.2s;}
 
 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;}
 
@@ -38,9 +38,9 @@ div.menu {padding:0px; width:100%; background:#fff; z-index:200; position:fixed;
 div.menu * {float:left;}
 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 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.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: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-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 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 h2 {font-size:2em; text-align:center;padding:2px;}
 .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 h2 {color:#f7886c;}
 .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: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 button {border:0;background:#d2e8eb; font-size:1em;cursor:pointer;}
 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;
+}