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