Pagination

Ahhoz, hogy a lightboxban lapozhass, néhány módosítást kell tenned.

Az alábbiakban leírom, hogyan adhatsz hozzá lapozást a lightboxhoz:

1. Változók hozzáadása a komponenshez:
   Tárold el a kiválasztott kép indexét a photos tömbön belül:

selectedIndex: number | null = null;

2. Módosítsd a openImage metódust:
   Amikor egy képet megnyitsz, tárold el annak indexét is:

openImage(image: any, index: number): void {
  this.selectedImage = image;
  this.selectedIndex = index;
}

3. Két új metódus hozzáadása a lapozáshoz:

nextImage(): void {
  if (this.selectedIndex !== null && this.selectedIndex < this.photos.length - 1) {
    this.selectedIndex++;
    this.selectedImage = this.photos[this.selectedIndex];
  }
}

prevImage(): void {
  if (this.selectedIndex !== null && this.selectedIndex > 0) {
    this.selectedIndex--;
    this.selectedImage = this.photos[this.selectedIndex];
  }
}

4. Navigációs gombok hozzáadása a lightboxhoz:
   Adj hozzá gombokat a lightbox template részhez a képek közötti navigáláshoz:

<!-- Lightbox -->
<div *ngIf="selectedImage" class="lightbox" (click)="closeImage()">
  <img [src]="selectedImage.url" class="lightbox-image" />
  <button class="lightbox-nav lightbox-prev" (click)="$event.stopPropagation(); prevImage()">❮</button>
  <button class="lightbox-nav lightbox-next" (click)="$event.stopPropagation(); nextImage()">❯</button>
</div>

A (click)="$event.stopPropagation()" azért van, hogy a lightbox bezárását blokkolja, amikor a navigációs gombokra kattintasz.

5. Stílusok hozzáadása a navigációs gombokhoz:

.lightbox {
  // ...meglévő stílusok...

  .lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    font-size: 20px;
    padding: 10px 15px;
    cursor: pointer;
    transition: background 0.3s;

    &:hover {
      background: rgba(0, 0, 0, 0.8);
    }

    &.lightbox-prev {
      left: 10px;
    }

    &.lightbox-next {
      right: 10px;
    }
  }
}

Ezzel most már képes leszel lapozni a lightboxban a képek között!