¿Cómo hacer que un lightbox de jquery abra múltiples imágenes desde un enlace?

Usando un lightbox como ColorBox o jQuery Lightbox Plugin ¿cómo puedo hacer un único enlace que abra una galería/conjunto de imágenes?¿Cómo hacer que un lightbox de jquery abra múltiples imágenes desde un enlace?

Por ejemplo, tengo 1 miniatura y cuando un usuario hace clic en ella quiero que abra varias imágenes en la caja de luz para que el usuario pueda hacer clic en siguiente o anterior para ver todas las imágenes dentro de esa galería.

Mi pensamiento era que simplemente lo hago como normal 1 enlace a 1 imagen y luego uso jquery para ocultar todo menos el primer enlace. ¿Debe haber una mejor manera?

Gracias.

Fuente

2009-09-15 ritch0s

Aquí está la solución adecuada (y más eficiente):

HTML:

<div id='gallery'> <a href="images/big-image1.jpg"> <img src="images/thumbnail-image1.jpg"/> </a> <a href="images/big-image2.jpg" ></a> <a href="images/big-image3.jpg" ></a> <a href="images/big-image4.jpg" ></a> </div>

jQuery/JS:

$(document).ready(function() { $('#gallery a').lightBox(); });

Nota: Como puedes ver, simplemente haz una lista de los enlaces de anclaje a las otras imágenes que quieras que sean parte de la galería. No es necesario agregar imágenes al marcado y luego ocultarlas con JS. La única imagen que verá en el ejemplo de marcado anterior es images/thumbnail-image1.jpg Lightbox ocultará automáticamente el resto y luego mostrará cada una en el momento apropiado.

Fuente

2009-09-30 21:50:21

Me encanta cómo lo explicaste. – feihtthief

¡Héroe! Muy buena manera de hacerlo – Voles

El nuevo lightbox2 ni siquiera necesita la inicialización separada del elemento jquery. $> bower install lightbox2 --guarda, luego incluye el js y el css. Etiquete todas sus imágenes en la serie como data-lightbox = "image_gallery_unique_id" –

Podría ser un malentendido, pero me da la impresión de que desea hacer más que la galería de estilo de "foto agrupada" que ofrece ColorBox. No estoy muy seguro de la funcionalidad siguiente/anterior que está describiendo, pero mi pensamiento sería escribir esta funcionalidad sin ColorBox inicialmente.

Agregue su galería de visualización a un div normal dentro de la página. Cuando haya configurado la galería y su comportamiento a su gusto, puede llamar a ColorBox en línea en su div (mostrando su control recién creado en la ventana emergente).

Fuente

2009-09-15 17:09:14

Usando jQuery Plugin mesa de luz, el código de ejemplo dice que hacer lo siguiente:

$(document).ready(function() { 
    $('#gallery a').lightBox({fixedNavigation:true}); 
    $('#gallery a:gt(0)').hide(); 
});

Eso hace que todos los enlaces abrir una caja de luz y que deben tener los siguiente/Volver enlaces para navegar por la galería. ¿Es eso lo que estás buscando?

(El ejemplo está disponible aquí: http://leandrovieira.com/projects/jquery/lightbox/#example)

Fuente

2009-09-15 17:09:36

A continuación, podría agregar $ ('# gallery a: GT (0)') ocultar(); si desea ocultar todos los demás enlaces, aparte del primero. – richsage

Sé cómo usar las cajas de luz, supongo que no hice la pregunta lo suficientemente clara, pero Richsage tiene el código importante que oculta todo menos el primero que es lo que estaba buscando, pero no puedo darle la respuesta porque es un comentario. – ritch0s

parece que es posible que desee utilizar un complemento diferente. PrettyPhoto es ideal para galerías. .

Fuente

2009-09-30 21:57:29 GSto

<a href="../gallery/renos/logo.jpg" rel="lightbox[renovation]"></a>

Así:

rel="lightbox[renovation]"

Fuente

2011-07-31 03:08:46

@Cindy Lo siento, presione enter antes de que termine. Pones el rel = "aaaa" después de tu href, pero antes de>. Espero que tenga sentido. Traté de escribir toda la línea, pero supongo que los enlaces no están permitidos o algo así. Lo siento, esta es mi primera vez en el tablero. –

¿Cómo hacer que un lightbox de jquery abra múltiples imágenes desde un enlace?

Respuesta

Cuestiones relacionadas