Question

我需要帮助

我正在创建一个带有尖角和放大弹出窗口的画廊，但效果不佳。

当我输入html路由时，我需要刷新搜索引擎，以使其起作用，否则它将不起作用。

我不明白问题是什么。

谢谢

enter image description here

这是我的服务。

 import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class AgustinNietoService {

  private agustinNieto: AgustinNieto [] = [

{ img: 'assets/img/fotografos/agustin-nieto-web/agustin-nieto-00001.jpg' },
{ img: 'assets/img/fotografos/agustin-nieto-web/agustin-nieto-00002.jpg' },
{ img: 'assets/img/fotografos/agustin-nieto-web/agustin-nieto-00003.jpg' },
{ img: 'assets/img/fotografos/agustin-nieto-web/agustin-nieto-00004.jpg' },
{ img: 'assets/img/fotografos/agustin-nieto-web/agustin-nieto-00005.jpg' },
{ img: 'assets/img/fotografos/agustin-nieto-web/agustin-nieto-00006.jpg' },
{ img: 'assets/img/fotografos/agustin-nieto-web/agustin-nieto-00007.jpg' },
{ img: 'assets/img/fotografos/agustin-nieto-web/agustin-nieto-00008.jpg' },
{ img: 'assets/img/fotografos/agustin-nieto-web/agustin-nieto-00036.jpg' }

  ];

  constructor() {
console.log('Estamos trabajando;');
  }
  getAgustinNieto() {
    return this.agustinNieto;
  }
}

export interface AgustinNieto {
  img: string;
}

HTML HTML

<div id="modal-magic" class="container-fluid">
<div class="row">
    <div class="col-md-2">
        <div class="gallery" *ngFor="let agustinNieto of agustinNieto">
            <a class="view" href="{{ agustinNieto.img }}"><img class="animated fadeIn" id="img-all-hzt" src="{{ agustinNieto.img }}" alt=""></a>
        </div>
    </div>
</div>

这是代码jquery

$(document).ready(function() {

$('.view').magnificPopup({
    type: 'image',
    // other options
    preloader: true,
    gallery: { enabled: true },
    removalDelay: 900,
    callbacks: {
        beforeOpen: function() {
            this.st.mainClass = this.st.el.attr('data-effect');
        }
    },
});

}）;

这是一个组件。

import { Component, OnInit} from '@angular/core';
import { AgustinNietoService, AgustinNieto } from '../../../../services/agustin-nieto.service';


@Component({
  selector: 'app-all-view-agustin-nieto',
  templateUrl: './all-view-agustin-nieto.component.html',
  styleUrls: ['./all-view-agustin-nieto.component.css']
})
export class AllViewAgustinNietoComponent implements OnInit {

agustinNieto: AgustinNieto[] = [];

  constructor( private _agustinNietoService: AgustinNietoService ) {

  }

 ngOnInit() {

 this.agustinNieto = this._agustinNietoService.getAgustinNieto();

 console.log( this.agustinNieto);
 }

}

Answer 1

了解有关“有效”含义的信息会很有用。

您的magnificPopup是否正确启动，但是图像加载缓慢？刷新页面后，图像立即加载吗？
您的magnificPopup是否正确启动，但是图像根本没有加载？刷新页面后，图像立即加载吗？
您的magnificPopup根本没有启动吗？然后是magnificPopup 刷新页面后立即启动吗？

如何在角度创建弹出窗口

1 个答案: