How to Create an Image Lightbox in Angular
Thu Nov 25 2021 01:32:52 GMT+0000 (Coordinated Universal Time)
Saved by
@sofiabedoy_96
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";
}
}
}
content_copyCOPY
https://levelup.gitconnected.com/how-to-create-an-image-lightbox-in-angular-d7254e2c099
Comments