import { Component, OnInit, ViewEncapsulation } from '@angular/core'; import { ImageService } from '../../services/image.service'; @Component({ selector: 'app-image-lightbox', templateUrl: './image-lightbox.component.html', styleUrls: ['./image-lightbox.component.css'], encapsulation: ViewEncapsulation.None }) export class ImageLightboxComponent implements OnInit { images = []; slideIndex = 0; constructor(private imageService: ImageService) {} ngOnInit(): void { this.loadImages(); } loadImages(): void { this.imageService.fetchImages() .subscribe(images => this.images = images); } openModal() { document.getElementById('imgModal').style.display = "block"; } closeModal() { document.getElementById('imgModal').style.display = "none"; } plusSlides(n) { this.showSlides(this.slideIndex += n); } currentSlide(n) { this.showSlides(this.slideIndex = n); } showSlides(slideIndex); showSlides(n) { let i; const slides = document.getElementsByClassName("img-slides") as HTMLCollectionOf < HTMLElement > ; const dots = document.getElementsByClassName("images") as HTMLCollectionOf < HTMLElement > ; if (n > slides.length) { this.slideIndex = 1 } if (n < 1) { this.slideIndex = slides.length } for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[this.slideIndex - 1].style.display = "block"; if (dots && dots.length > 0) { dots[this.slideIndex - 1].className += " active"; } } }