¿Cómo crear galerías separadas de Fancybox en la misma página?

Estamos usando jQuery 1.7.1 y Fancybox 1.3.4. Soy nuevo en Fancybox. Nunca lo había usado antes de ayer, pero se usa ampliamente en un sitio en el que estoy trabajando. La persona que configuró Fancybox fue cancelada porque era ... irrelevante. :)¿Cómo crear galerías separadas de Fancybox en la misma página?

Estoy creando una página de comparación de productos. Se mostrarán hasta cuatro productos en una sola página. Cada producto puede tener hasta cinco imágenes específicas de ese producto.

Actualmente, cuando hago clic en cualquier imagen, Fancybox se abre y crea una galería de todas las imágenes en la página. Entonces, si tengo un producto con cinco imágenes, hay una galería de cinco imágenes. Si tengo cuatro productos con cinco imágenes, hay una galería con veinte imágenes. Esto no funciona bien para mí.

Lo que quiero es que cada producto tenga su propia galería. Si hacen clic en el Producto A, verán solo las imágenes asociadas con el Producto A. Si hacen clic en el Producto B ... lo obtienen.

¿Cómo puedo hacer que Fancybox cree galerías separadas en una sola página?

EDITAR

Actualmente, mi atributo rel se establece en 'AutoGallery'. Una de las respuestas a continuación sugirió que lo cambio a algo como esto, lo que produciría lo que estoy buscando:

<img rel='Gallery1'> 
<img rel='Gallery1'> 
<img rel='Gallery2'> 
<img rel='Gallery2'> 
<img rel='Gallery3'> 
<img rel='Gallery3'>

Si cambio el atributo rel a cualquier cosa con excepción de 'AutoGallery', al hacer clic en la imagen que se acaba abre la imagen en una nueva ventana.

Fuente

2012-02-28 Evik James

usted no está compartiendo su código js pero supongo que el script personalizado FancyBox parece '$ (" un [rel = autoGallery] "). fancybox();' y es por eso que no funcionará si cambias el valor del atributo 'rel'. Ver mi comentario en mi respuesta a continuación. – JFK

Basta con asignar un atributo diferente rel a cada galería

<a class="fancybox" rel="gallery01" href="product01/image01.jpg">one</a> 
<a class="fancybox" rel="gallery01" href="product01/image02.jpg">one</a> 
<a class="fancybox" rel="gallery01" href="product01/image03.jpg">one</a> 
<a class="fancybox" rel="gallery01" href="product01/image04.jpg">one</a> 

<a class="fancybox" rel="gallery02" href="product02/image01.jpg">two</a> 
<a class="fancybox" rel="gallery02" href="product02/image02.jpg">two</a> 
<a class="fancybox" rel="gallery02" href="product02/image03.jpg">two</a> 

<a class="fancybox" rel="gallery03" href="product03/image01.jpg">three</a> 
<a class="fancybox" rel="gallery03" href="product03/image02.jpg">three</a> 
<a class="fancybox" rel="gallery03" href="product03/image03.jpg">three</a>

... y todos ellos pueden utilizar el mismo guión:

$(".fancybox").fancybox();

Fuente

2012-02-28 17:56:13 JFK

Creo que esa es la respuesta que estaba buscando. No puedo probarlo hasta mañana, ¡pero suena genial! –

No, no funciona para mí. Ya tengo un atributo rel. Su valor es 'autoGallery'. Si lo cambio a cualquier otra cosa, cada imagen solo se carga en una nueva ventana. –

muy probablemente porque su script de fancybox parece '$ (" a [rel = autoGallery] "). Fancybox();' pero si agrega 'class =" fancybox "' a cada enlace y usa el script como en mi respuesta anterior '$ (". fancybox "). fancybox();' a continuación, funcionará – JFK

que tenía los mismos problemas con FancyBox 3 - utilizando rel="gallery" y data-fancybox-group="gallery" no funcionó.

encontrado este codepen/violín que hizo el trabajo, mediante la adición de .attr('data-fancybox', 'gallery');

https://codepen.io/anon/pen/EwpOxE?editors=1010

Fuente

2018-01-30 10:04:52

Su ejemplo de CodePen no funciona. Las 3 miniaturas abren la misma galería – Brad

¿Cómo crear galerías separadas de Fancybox en la misma página?

Respuesta

Cuestiones relacionadas