21 extend gallery component

package.json

@@ -19,6 +19,7 @@
     "@angular/platform-browser": "^16.1.5",
     "@angular/platform-browser-dynamic": "^16.1.5",
     "@angular/router": "^16.1.5",
+    "@fortawesome/fontawesome-free": "^6.4.2",
     "@ngrx/store": "^16.0.0",
     "bootstrap": "^5.3.0",
     "rxjs": "~7.5.0",

src/app/app-routing.module.ts

@@ -1,9 +1,11 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { PageComponent } from './pages/page/page.component';
+import { TestGalleryComponent } from './pages/test-gallery/test-gallery.component';
 
 const routes: Routes = [
-  { path: 'page/:id', component: PageComponent }
+  { path: 'page/:id', component: PageComponent },
+  { path: 'test_gallery', component: TestGalleryComponent },
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -13,6 +13,9 @@ import { ButtonComponent } from './components/button/button.component';
 import { WorkshoplistComponent } from './workshoplist/workshoplist.component';
 import { TimeplanComponent } from './timeplan/timeplan.component';
 import { GalleryComponent } from './gallery/gallery.component';
+import { TestGalleryComponent } from './pages/test-gallery/test-gallery.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
 
 
 
@@ -25,11 +28,13 @@ import { GalleryComponent } from './gallery/gallery.component';
     HeadermenuComponent,
     PageComponent,
     ButtonComponent,
+    TestGalleryComponent,
   ],
   imports: [
     BrowserModule,
     HttpClientModule,
-    AppRoutingModule
+    AppRoutingModule,
+    BrowserAnimationsModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/gallery/gallery.component.html

@@ -1,10 +1,27 @@
-
 <h2 *ngIf="galleryData">Galerie mit {{ galleryData.columns }} Bildern pro Zeile</h2>
 <div class="gallery columns-{{ galleryData.columns }}" *ngIf="galleryData">
-    <a
-      *ngFor="let preview of galleryData.previews; let index = index"
-      [href]="galleryData.links[index]"
-      [title]="'Bild ' + galleryData.alttexts[index] + 'öffnen'">
-      <img [src]="preview" [alt]="galleryData.alttexts[index]">
-    </a>
+  <!-- <a *ngFor="let preview of galleryData.previews; let index = index" [href]="galleryData.links[index]" -->
+  <a *ngFor="let preview of galleryData.previews; let index = index"
+    [title]="'Bild ' + galleryData.alttexts[index] + 'öffnen'">
+    <img [src]="preview" [alt]="galleryData.alttexts[index]" (click)="onPreviewClick(index)">
+  </a>
 </div>
+
+<div class="gallery-lightbox-container maskAnimation">
+  <div class="lightbox" *ngIf="showMask">
+    <span class="count"> {{currentLightboxImageIndex + 1}}/{{totalImagesCount}}</span>
+    <button class="close-btn" *ngIf="previewImages" (click)="onClosePreviewClick()">
+      <i class="fas fa-times"></i>
+    </button>
+
+    <button class="btn-carousel btn-lightbox-prev" *ngIf="controls" (click)="prev()">
+      <i class="fas fa-arrow-circle-left i-carousel i-prev"></i>
+    </button>
+    <button class="btn-carousel btn-lightbox-next" *ngIf="controls" (click)="next()">
+      <i class="fas fa-arrow-circle-right  i-carousel i-next"></i>
+    </button>
+    <div class="lightbox-img animation">
+      <img class="lightbox-img" [src]="currentLightboxImage" [alt]="alttexts">
+    </div>
+  </div>
+</div>

src/app/gallery/gallery.component.scss

@@ -1,37 +1,130 @@
-.gallery {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: space-around;
-  align-items: center;
-  align-content: space-between;
-  margin-bottom: 24px;
-
-  a {
+@import "@fortawesome/fontawesome-free/css/all.css";
+
+:host {
+  display: block;
+  text-align: center;
+  .gallery {
     display: flex;
-    flex: 0 0 auto;
-    width: 25%;
-    padding: 10px;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    align-items: center;
+    align-content: space-between;
+    margin-bottom: 24px;
 
-    img {
+    a {
       display: flex;
-      flex: 1 0 auto;
+      flex: 0 0 auto;
+      width: 25%;
+      padding: 10px;
+
+      img {
+        display: flex;
+        flex: 1 0 auto;
+      }
     }
-  }
 
-  &.columns-1 a {
-    width: 100%;
-  }
+    &.columns-1 a {
+      width: 100%;
+    }
 
-  &.columns-2 a {
-    width: 50%;
-  }
+    &.columns-2 a {
+      width: 50%;
+    }
+
+    &.columns-3 a {
+      width: 33.3333333%;
+    }
 
-  &.columns-3 a {
-    width: 33.3333333%;
+    &.columns-4 a {
+      width: 25%;
+    }
   }
 
-  &.columns-4 a {
-    width: 25%;
+  .gallery-lightbox-container {
+    width: 100%; 
+    max-width: 1000px;
+    margin: 0 auto;
+
+    .lightbox {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(#000000, 0.8);
+    }
+    .lightbox-img img {
+      max-width: 70%; 
+      height: auto;
+    }
+    .count {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 7%;
+      height: 10%;
+      color: #fff;
+      opacity: 0.4;
+      font-size: 2rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-left: 5px;
+    }
+
+    .close-btn {
+      position: absolute;
+      top: 0;
+      right: 0;
+      padding: 0;
+      color: #fff;
+      background: 0 0;
+      border: 0;
+      cursor: pointer;
+      width: 7%;
+      height: 10%;
+      z-index: 2;
+      font-size: 2rem;
+    }
+    .btn-carousel {
+      position: absolute;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      z-index: 1;
+      width: 8%;
+      height: 8%;
+      color: #fff;
+      padding: 0;
+      font-size: 2rem;
+      text-align: center;
+      background: 0 0;
+      border: 0;
+    }
+    .btn-lightbox-prev {
+      left: 0;
+    }
+    .btn-lightbox-next {
+      right: 0;
+    }
+    .i-carousel {
+      color: #fff;
+      opacity: 0.45;
+      transition: all 0.3s ease-in-out;
+      &:hover {
+        opacity: 0.9;
+      }
+      &:active {
+        opacity: 0.5;
+      }
+      .i-prev,
+      .i-next {
+        font-size: 2rem;
+      }
+    }
   }
 }

src/app/gallery/gallery.component.ts

@@ -1,20 +1,96 @@
+import { animate, style, transition, trigger } from '@angular/animations';
 import { Component, Input } from '@angular/core';
-
 @Component({
   selector: 'dd-gallery',
   templateUrl: './gallery.component.html',
-  styleUrls: ['./gallery.component.scss']
+  styleUrls: ['./gallery.component.scss'],
+
 })
+
 export class GalleryComponent {
+  [x: string]: any;
 
-  @Input() galleryData : GalleryData;
+  @Input() galleryData: GalleryData = {
+    previews: [],
+    links: [],
+    columns: 0,
+    alttexts: []
+  };
   @Input()
   public set galleryjson(value: string) {
     this.galleryData = JSON.parse(value) as GalleryData;
   }
+
+  previewImages = false;
+  showMask = false;
+  currentLightboxImage = this.galleryData.previews[0];
+  currentLightboxImageIndex = 0;
+  controls = true;
+  totalImagesCount = 0;
+  alttexts = '';
+
+  constructor() {
+    this.galleryData = {
+      previews: [
+        'https://devday.webdesign-elbflorenz.de/wp-content/uploads/2023/07/fayette-reynolds-zmBdWQL7L4-unsplash-150x150.jpg',
+        'https://devday.webdesign-elbflorenz.de/wp-content/uploads/2023/07/fayette-reynolds-4o-mbzx3TvU-unsplash-150x150.jpg',
+        'https://devday.webdesign-elbflorenz.de/wp-content/uploads/2023/07/fayette-reynolds-zmBdWQL7L4-unsplash-150x150.jpg',
+        'https://devday.webdesign-elbflorenz.de/wp-content/uploads/2023/07/fayette-reynolds-4o-mbzx3TvU-unsplash-150x150.jpg',
+      ],
+      links: [
+        'https://devday.webdesign-elbflorenz.de/wp-content/uploads/2023/07/fayette-reynolds-4o-mbzx3TvU-unsplash-scaled.jpg',
+        'https://devday.webdesign-elbflorenz.de/wp-content/uploads/2023/07/fayette-reynolds-zmBdWQL7L4-unsplash-scaled.jpg',
+        'https://devday.webdesign-elbflorenz.de/wp-content/uploads/2023/07/fayette-reynolds-4o-mbzx3TvU-unsplash-scaled.jpg',
+        'https://devday.webdesign-elbflorenz.de/wp-content/uploads/2023/07/fayette-reynolds-zmBdWQL7L4-unsplash-scaled.jpg',
+      ],
+      columns: 4,
+      alttexts: [
+        'Image 1 Alt Text',
+        'Image 2 Alt Text',
+      ]
+    };
+  }
+
+  ngOnInit(): void {
+    this.totalImagesCount = this.galleryData.previews.length;
+  }
+
+  onPreviewClick(index: number) {
+    this.showMask = true;
+    this.previewImages = true;
+    this.currentLightboxImageIndex = index;
+    this.currentLightboxImage = this.galleryData.links[index];
+    this.alttexts = this.galleryData.alttexts[index];
+  }
+
+  onAnimationDone(event: any) {
+    if (event.toState === 'void') {
+      this.showMask = false;
+    }
+  }
+
+  onClosePreviewClick() {
+    this.previewImages = false;
+    this.showMask = false;
+
+  }
+  prev(){
+    if(this.currentLightboxImageIndex > 0){
+      this.currentLightboxImageIndex--;
+      this.currentLightboxImage = this.galleryData.links[this.currentLightboxImageIndex];
+      this.alttexts = this.galleryData.alttexts[this.currentLightboxImageIndex];
+    }
+  }
+  next(){
+    if(this.currentLightboxImageIndex < this.totalImagesCount - 1){
+      this.currentLightboxImageIndex++;
+      this.currentLightboxImage = this.galleryData.links[this.currentLightboxImageIndex];
+      this.alttexts = this.galleryData.alttexts[this.currentLightboxImageIndex];
+    }
+  }
 }
 
-interface GalleryData {
+export interface GalleryData {
   previews: string[],
   links: string[],
   columns: number,

src/app/pages/page/page.component.html

@@ -1 +1 @@
-<div [innerHTML]="content"></div>
+<div [innerHTML]="content">13212</div>

src/app/pages/test-gallery/test-gallery.component.html

@@ -0,0 +1,7 @@
+<div class="container">
+    <h1>My Image Gallery</h1>
+    <dd-gallery
+      [galleryData]="galleryDataMock"
+    ></dd-gallery>
+  </div>
+