0

Buen día, intento crear una galería con Fancybox en la cual tengo unos registros en una tabla y un botón que pueda ver las imágenes que tenga cada registro.

introducir la descripción de la imagen aquí

Creé un arreglo de ejemplo con varios objetos el cual recorro con un *ngFor

public productos = [
    {id: 'prod1', nombre: 'Producto 1', url: 'https://i.blogs.es/07fc5b/el-libro-de-imagenes-3/1366_2000.png'},
    {id: 'prod1', nombre: 'Producto 2', url: 'https://images.ctfassets.net/hrltx12pl8hq/VZW7M82mrxByGHjvze4wu/216d9ff35b6980d850d108a50ae387bf/Carousel_01_FreeTrial.jpg?fit=fill&w=800&h=450'},
    {id: 'prod1', nombre: 'Producto 3', url: 'https://i.blogs.es/055219/photos/450_1000.jpg'},
    {id: 'prod2', nombre: 'Producto 4', url: 'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSGP5SugfE1GKFwqO9QfHoesP4I9Oq29IBmfA&usqp=CAU'},
    {id: 'prod2', nombre: 'Producto 5', url: 'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSr57jHIaC8E_644lZyDVSoOQ-cTPgod6devA&usqp=CAU'},
    {id: 'prod2', nombre: 'Producto 6', url: 'https://cdn.pixabay.com/photo/2017/05/04/01/15/the-evening-sun-2282607_960_720.jpg'},
  ];

Hasta este punto todo funciona bien, me muestra la imagen individualmente por cada elemento que recorre el *ngFor

      <tr *ngFor="let producto of productos">
        <td>{{producto.id}}</td>
        <td>{{producto.nombre}}</td>
        <td>      
          <a data-fancybox href="{{producto.url}}" rel="{{producto.id}}" class="success p-0">
            <button type="button" class="btn btn-secondary">Ver galería de fotos</button>          
          </a>
        </td>
      </tr>             
  

En la documentación de Fancybox menciona que al atributo data-fancybox se le puede agregar un nombre para crear un grupo de imágenes, el cual agrego de esta manera: <a data-fancybox="gallery" ...>, y me crea una galería de 6 imágenes (por los elementos que recorre el *ngFor), lo cual no me sirve en este caso ya que necesito que se muestre las imágenes correspondientes al registro seleccionado.

Entonces se me ocurrió colocar el valor del ID de cada elemento del *ngFor para que me creara dos galerías, es decir, una galería con tres imágenes de ID prod1 y otra galería de tres imágenes con ID prod2 de esta manera:

<a data-fancybox="{{producto.id}}" href="{{producto.url}}" ...>

Lo cual me marca un error:

Uncaught Error: Template parse errors:
Can't bind to 'fancybox' since it isn't a known property of 'a'. ("
      <td>{{producto.nombre}}</td>
      <td>      
        <a [ERROR ->]data-fancybox="{{producto.id}}" href="{{producto.url}}" rel="{{producto.id}}"

Tal parece que no acepta interpolación en el atributo data-fancybox. ¿Como podría resolver este problema? He estado investigando y no he logrado resolver este problema.

1 respuesta 1

1

En atributos que no son del estándar html puedes agregarlos usando attr.

<a attr.data-fancybox="{{proyecto.id}}" href="{{proyecto.url}}" ...>

Referencia

1
  • En efecto, me faltaba agregar el attr, con eso me funcionó, en verdad muchas gracias. Commented el 9 oct. 2020 a las 3:26

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.