前端之家

  1. 首页
  2. 问答

试图用灯箱做一个画廊，但没有弹出

• 问答

我是 Angular 的新手，

我正在尝试制作一个带有灯箱的画廊，当单击图像时会显示该灯箱。

我已经尝试过使用 bootstrap 的例子，也尝试过自己做，但是当我点击 img-link 时，这些链接让我进入主页，也许有一个我不知道的配置使用它或丢失。

我不知道是路由问题还是我需要为此做其他组件。

<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,.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.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.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>

有什么想法吗？还是我的代码有问题？

感谢您的帮助。

steve313 回答：试图用灯箱做一个画廊，但没有弹出
  1. 所以在我看来，你的灯箱在类名中缺少一个 t。
  2. 其次，我会为每个图像设置一个 onclick 侦听器以删除并设置一个活动类，而不是使用 :active css 选择器。一旦用户停止点击，css 选择器 :active 将被删除。
  3. 您必须将您的元素传递给函数以确定哪个图像将处于活动状态。

另外你可能想添加一个函数来退出活动模式

<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>

功能：

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"));
     }
  }

我可能要补充一点，我没有测试代码，代码的某些部分可能需要稍作调整。 我希望我能帮上忙。

allow-modalsangularbootstrap-4htmlroutes
本文链接：https://www.f2er.com/985907.html

大家都在问