Lightbox

A lightbox használata egy népszerű funkció weboldalakon a képek nagyított megjelenítésére. Angularban többféle megoldás és könyvtár is elérhető erre a célra, de az alábbiakban egy egyszerű saját megoldást mutatok be, amelyhez nem kell külső könyvtárat használni.

1. A komponensben tárolj egy változót a megjelenítendő képnek:

selectedImage: any = null;

2. Készíts egy függvényt, amelyik megnyitja a képet a lightboxban:

openImage(image: any): void {
  this.selectedImage = image;
}

closeImage(): void {
  this.selectedImage = null;
}

3. Frissítsd a template-et, hogy kattintáskor megnyissa a lightboxot:

<figure *ngFor="let image of photos">
  <img [src]="image.thumbnailUrl" alt="" class="gallery-item" (click)="openImage(image)" />
</figure>

<!-- Lightbox -->
<div *ngIf="selectedImage" class="lightbox" (click)="closeImage()">
  <img [src]="selectedImage.url" class="lightbox-image" />
</div>

4. Adj hozzá stílusokat az SCSS fájlodban a lightboxhoz:

.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.lightbox-image {
  max-width: 80%;
  max-height: 80%;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

Most, ha a felhasználó rákattint egy képre a galériában, akkor az a kép megjelenik nagyítva egy lightboxban. A lightboxot a háttérre kattintva lehet bezárni.

Ez a megoldás alapvetően működőképes, de sok bővítési lehetőség adódik, mint például navigációs gombok a képek közötti váltáshoz vagy animációk a megjelenítéshez/bezárásához. Ha komplexebb funkcionalitást szeretnél, érdemes lehet egy külső Angular könyvtárat keresni erre a célra.