trying to do a gallery with lightbox but does not pop up

Question

I'm new on angular,

And I'm trying to make a gallery with a lighbox that shows up when an image is clicked.

I already try the examples with bootstrap and also tried to do it by myself, but when I click on the img-link, the links throws me up to the home page maybe there is a config that I didn't know how to use it or is missing.

I don't know if its a problem about routes or if I need to do other commponent for that.

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

import { Component, OnInit } from '@angular/core';
import { CuadrosService, Cuadro } from '../cuadros.service';


@Component({
  selector: 'app-galeria',
  templateUrl: './galeria.component.html',
  styleUrls: ['./galeria.component.css']
})
export class GaleriaComponent implements OnInit {

  Cuadro:any [] = [];
  constructor(private _cuadosService:CuadrosService ) {
    console.log("constructor")
   }

  ngOnInit(): void {

    this.Cuadro = this._cuadosService.getCuadros();

    console.log(this.Cuadro);
  }

}

.container-galeria {
    display: flex;
    flex-wrap: wrap;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 400px;
    background-color: rgba(0, 0, 0, .80);
    justify-content: space-around;
}

.img-galeria {
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding: 10px;
}

.img-galeria:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
}

.item-galeria:nth-child(1) {
    grid-column-start: span 2;
}

.item-galeria:nth-child(2) {
    grid-row-start: span 2;
}

.lightbox {}

.lightbox:active {
    display: block;
    position: fixed;
    flex-wrap: wrap;
    height: fit-content;
    width: fit-content;
    max-width: 1200px;
    max-height: 800px;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 2000;
    justify-content: center;
}

<hr>
<div class="container-galeria container">
    <div class=" lighbox item-galeria col-4" *ngFor="let cuadro of Cuadro">

        <img class="img-galeria" [src]="cuadro.foto" alt="">

    </div>
</div>

<app-footer></app-footer>

Any idea? or somthing wrong in my code?

Thanks for the help.

Answer 1

1. So the way I am seeing it your lightbox is missing a t in the class name.
2. Secondly I would set a onclick listener for each image to remove and set an active class instead of using the :active css selector. The css selector :active will be removed as soon as the person stops clicking.
3. You will have to Pass your Element in to the function to determine what image will be active.

Also you might want to add a function to exit the active mode

<div class="lightbox item-galeria col-4" *ngFor="let cuadro of Cuadro" (click)="toggleActive($event, item)">
    <img class="img-galeria" [src]="cuadro.foto" alt="">
</div>

The function:

import { Component, OnInit } from '@angular/core';
import { CuadrosService, Cuadro } from '../cuadros.service';


@Component({
  selector: 'app-galeria',
  templateUrl: './galeria.component.html',
  styleUrls: ['./galeria.component.css']
})
export class GaleriaComponent implements OnInit {

  Cuadro:any [] = [];
  constructor(private _cuadosService:CuadrosService ) {
    console.log("constructor")
   }

  ngOnInit(): void {

    this.Cuadro = this._cuadosService.getCuadros();

    console.log(this.Cuadro);
  }

  toggle(event, item): void {
     if(item.classList.contains("active")){
        item.classList.remove("active"));
     }else{
        item.classList.add("active"));
     }
  }

I might add that I didn't test the code and some parts of code may need a little tweak. I hope I could help.