Haciendo que el complemento JQuery LightBox funcione con múltiples galerías

Estoy tratando de hacer que este plugin jquery =>http://leandrovieira.com/projects/jquery/lightbox/ trabaje con múltiples galerías en la misma página.Haciendo que el complemento JQuery LightBox funcione con múltiples galerías

El problema es que, cada vez que hago clic en una imagen de una galería determinada, obtengo todas las imágenes de todas las galerías en la misma página. Digamos que tengo 2 galerías de 6 fotos cada una. Si hago clic en una imagen de la galería 1, también veré las fotos de la galería 2.

que he probado algo como esto para hacer que funcione, pero sin éxito:

<script type="text/javascript"> 
    $(function(){ 
     $('div.gallery-6').each(function() { 
     $(this).find('a.lightbox').lightBox(); 
     }); 
    }); 
</script>

Por desgracia, no funciona !!!

¿Cuál es la solución para eso?

Una vez más, lo que intento lograr es poder ver las imágenes en su galería adecuada. No quiero que todas las fotos sean tratadas como una galería.

Fuente

2010-01-12 lpdahito

poner el código HTML que está tratando de coincidir con los selectores también (creo que es un problema de selección) –

también, '$ ('div.gallery-6 a.lightbox') .lightBox(); 'es lo mismo que lo que estás haciendo con menos código (bastante seguro de que es exactamente el mismo) –

no es ... ya que quiero que el complemento trate a mis galerías como 2 galerías diferentes. Digamos que una galería contiene un cierto conjunto de fotos y la otra contiene otro conjunto de imágenes. Cuando navegas por la primera galería, no deberías ver las otras. – lpdahito

Con muy pocos cambios hice que funcionara con varias galerías en una página.

El JQuery

$(function() { 
    $('#gallery1 a').lightBox(); 
    $('#gallery2 a').lightBox(); 
    ... 
    $('#galleryN a').lightBox(); 
});

El HTML

<div class="gallery" id="gallery1"> 
<div class="gallery" id="gallery2"> 
... 
<div class="gallery" id="galleryN">

que cambió el estilo de un identificador a una clase.

Fuente

2010-01-12 20:04:33 Cadoo

Acabo de probar esta solución ... Funciona perfectamente thx. Pero ¿por qué, en ese caso, mi código anterior no funcionó? Quiero decir, llamar a la función lightbox dos veces es lo mismo que encontrar un elemento, en mi caso la galería div y luego en cada div de la galería encontrar los elementos "a" y llamar a la función lightbox ... No tendría que dar a la galería ID porque invoco el método each() en la galería div. – lpdahito

también '$ ('. Gallery'). Each (función (i) { $ ('# gallery' + i) .lightbox(); }); ' – Matt

No puedo decir que he trabajado con este complemento en particular anteriormente, pero generalmente agrega un rel=lightbox[foo] al elemento de enlace. Foo será único para cada galería en la página.

Espero que esto lo inicie en el camino correcto; de lo contrario, hay dozens de otros complementos lightbox que puede usar.

Fuente

2010-01-12 18:41:54

jQuery lightbox te permite usar cualquier selector al que quieras vincular la caja de luz a un elemento. por lo que no * tiene * para poner rel = "lightbox [optional_slide_show]" en sus elementos más (como en la versión original). sin embargo, puede imitar este comportamiento con el selector '$ ('[rel * =" lightbox "]')' jQuery. –

lo hago de esta manera:

<script type="text/javascript"> 
    $(function(){ 
     $('.lightboxGallery').each(function(){ 
      $('.lightbox', this).lightBox(); 
     }); 
    }); 
</script>

De esta manera todo lo que tiene que hacer es colocar cada galería en algún tipo de recipiente y obtendrá una imagen fija por contenedor, por ejemplo, lo siguiente crear dos conjuntos de imágenes:

<div id="gallery1" class="lightboxGallery"> 
    <a href="image1.jpg" class="lightbox">Image 1</a><br /> 
    <a href="image2.jpg" class="lightbox">Image 2</a><br /> 
    <a href="image3.jpg" class="lightbox">Image 3</a><br /> 
</div> 
<div id="gallery2" class="lightboxGallery"> 
    <a href="image4.jpg" class="lightbox">Image 4</a><br /> 
    <a href="image5.jpg" class="lightbox">Image 5</a><br /> 
    <a href="image6.jpg" class="lightbox">Image 6</a><br /> 
</div>

podría utilizar el 'a' selector de cambio, pero me parece usando '.lightbox' ofrece más flexibilidad.

Fuente

2010-02-04 04:58:14 Codeblind

Esta es la mejor solución con diferencia. Gracias, funciona muy bien con solo usar la etiqueta "a" en lugar de agregar ".lightbox" a cada enlace. – Klikerko

Alternativamente, podría hacer algo como esto para conectar automáticamente cualquier lightbox [inserte el nombre de la galería aquí] enlaces, como el lightbox estándar.funcionalidad JS:

$(function() { 
    var boxen = []; 

    //find all links w/ rel=lightbox[... 
    $('a[rel*=lightbox\\[]').each(function() { 

    //push only unique lightbox[gallery_name] into boxen array 
    if ($.inArray($(this).attr('rel'),boxen)) boxen.push($(this).attr('rel')); 

    }); 

    //for each unique lightbox group, apply the lightBox 
    $(boxen).each(function(i,val) { $('a[rel='+val+']').lightBox(); }); 

});

Fuente

2010-02-22 19:03:10 Ben

No funciona –

Este

un parche para la respuesta de Ben, para los que WAHT utilizar múltiples galerías, o simplemente añadir el efecto de luz a una imagen, usarlo dentro de su <head>...</head> etiqueta

Aquí está el código (Nota: he cambiado la variable $ para jQuery, funciona mejor para mí):

<script type="text/javascript"> 
    jQuery(function() { 
     var boxen = []; 
     //find all links w/ rel="lightbox[gallery_name]" or just rel="lightbox" it works both ways 
     jQuery('a[rel*=lightbox]').each(function() { 
     //push only unique lightbox[gallery_name] into boxen array 
     if (jQuery.inArray(jQuery(this).attr('rel'),boxen)) boxen.push(jQuery(this).attr('rel')); 
    }); 
    //for each unique lightbox group, apply the lightBox 
    jQuery(boxen).each(function(i,val) { jQuery('a[rel='+val+']').lightBox(); }); 
    }); 
</script>

Ésta es una mezcla de todos los usos posibles ejemplo, todos ellos pueden trabajar en el mismo html, aquí tenemos dos galerías y una tercera uno sin nombre, solo la referencia "lightbox":

<a href="images/image1.jpg" rel="lightbox[gallery1]"><img border="0" height="50" src="images/image1_thumbnail.jpg" width="50" /> 
<a href="images/image2.jpg" rel="lightbox[gallery1]"><img border="0" height="50" src="images/image2_thumbnail.jpg" width="50" /> 
<a href="images/image3.jpg" rel="lightbox[gallery2]"><img border="0" height="50" src="images/image3_thumbnail.jpg" width="50" /> 
<a href="images/image4.jpg" rel="lightbox[gallery2]"><img border="0" height="50" src="images/image4_thumbnail.jpg" width="50" /> 
<a href="images/image5.jpg" rel="lightbox"><img border="0" height="50" src="images/image5_thumbnail.jpg" width="50" />

Espero que esto ayude!

Fuente

2010-05-11 03:58:19

Todo lo que necesita es lightbox 2 que puede obtener desde el siguiente enlace.

http://www.huddletogether.com/projects/lightbox2/

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a> 
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a> 
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

Puede configurar sus diferentes conjuntos de galería usando "la colección [roadtrip]" simplemente cambiar el nombre del "recorrido" con su nombre galería grupo deseado y que funcionará como magia. No es necesario codificar nada extra

Fuente

2010-07-01 00:52:29 Honshi

Así es como hice que el lightbox jquery básico vinculado en la pregunta original se comportara con múltiples galerías. Sin hacks, ni nada. Funciona perfectamente.

me dio cada caja de luz un nombre particular:

<script type="text/javascript" charset="utf-8"> 
$(function() { 
    $('a[@rel*=lightboxG1]').lightBox(); 
    $('a[@rel*=lightboxG2]').lightBox(); 
}); 
</script>

Entonces mi HTML se parece a esto:

<a href="images/image-1.jpg" rel="lightboxG1">image #1</a> 
<a href="images/image-2.jpg" rel="lightboxG1">image #2</a> 
<a href="images/image-3.jpg" rel="lightboxG1">image #3</a> 

<a href="images/image-1.jpg" rel="lightboxG2">image #1</a> 
<a href="images/image-2.jpg" rel="lightboxG2">image #2</a> 
<a href="images/image-3.jpg" rel="lightboxG2">image #3</a>

y listo, tengo 2 galerías separadas.

Fuente

2010-08-12 22:43:26 AntoNB

Tal caja de luz ha cambiado desde otras respuestas fueron dadas, pero me pareció que las respuestas en esta página eran buenas, pero luego descubrí que simplemente lo que podía hacer:

jQuery('.lightbox').each(function(){ 
      jQuery('a', this).lightBox(); 
    });

que asume una estructura HTML de:

<div class="lightbox"> 
    <div class="wrapper"> 
    <a href="asdasd.jpg"><img src="asdasd.jpg"></a> 
    <a href="asdasd2.jpg"><img src="asdasd2.jpg"></a> 
    </div> 
</div>

La clase contenedora no es necesaria, creo, pero mi código la incluía por otros motivos.

Fuente

2012-05-30 23:55:16

También puede hacerlo sin JavaScript en absoluto con los datos-atributos.

<div id="gallery-1"> 
    <a href="images/image-1.jpg" data-lightbox="gallery-1" data-title="Gallery 1 Image 1"><img src="images/image-1.jpg"></a> 
    <a href="images/image-2.jpg" data-lightbox="gallery-1" data-title="Gallery 1 Image 2"><img src="images/image-2.jpg"></a> 
    <a href="images/image-3.jpg" data-lightbox="gallery-1" data-title="Gallery 1 Image 3"><img src="images/image-3.jpg"></a> 
</div> 
<div id="gallery-2"> 
    <a href="images/image-4.jpg" data-lightbox="gallery-2" data-title="Gallery 2 Image 1"><img src="images/image-4.jpg"></a> 
    <a href="images/image-5.jpg" data-lightbox="gallery-2" data-title="Gallery 2 Image 2"><img src="images/image-5.jpg"></a> 
    <a href="images/image-6.jpg" data-lightbox="gallery-2" data-title="Gallery 2 Image 3"><img src="images/image-6.jpg"></a> 
</div> 
<div id="gallery-3"> 
    <a href="images/image-7.jpg" data-lightbox="gallery-3" data-title="Gallery 3 Image 1"><img src="images/image-7.jpg"></a> 
    <a href="images/image-8.jpg" data-lightbox="gallery-3" data-title="Gallery 3 Image 2"><img src="images/image-8.jpg"></a> 
    <a href="images/image-9.jpg" data-lightbox="gallery-3" data-title="Gallery 3 Image 3"><img src="images/image-9.jpg"></a> 
</div> 
<div id="gallery-4"> 
    <a href="images/image-10.jpg" data-lightbox="gallery-4" data-title="Gallery 4 Image 1"><img src="images/image-10.jpg"></a> 
    <a href="images/image-11.jpg" data-lightbox="gallery-4" data-title="Gallery 4 Image 2"><img src="images/image-11.jpg"></a> 
    <a href="images/image-12.jpg" data-lightbox="gallery-4" data-title="Gallery 4 Image 3"><img src="images/image-12.jpg"></a> 
</div>

Funciona también si las imágenes están mezcladas en la página.

<div id="gallery"> 
    <a href="images/image-1.jpg" data-lightbox="gallery-1" data-title="Gallery 1 Image 1"><img src="images/image-1.jpg"></a> 
    <a href="images/image-4.jpg" data-lightbox="gallery-2" data-title="Gallery 2 Image 1"><img src="images/image-4.jpg"></a> 
    <a href="images/image-2.jpg" data-lightbox="gallery-1" data-title="Gallery 1 Image 2"><img src="images/image-2.jpg"></a> 
    <a href="images/image-9.jpg" data-lightbox="gallery-3" data-title="Gallery 3 Image 3"><img src="images/image-9.jpg"></a> 
    <a href="images/image-3.jpg" data-lightbox="gallery-1" data-title="Gallery 1 Image 3"><img src="images/image-3.jpg"></a> 
    <a href="images/image-8.jpg" data-lightbox="gallery-3" data-title="Gallery 3 Image 2"><img src="images/image-8.jpg"></a> 
    <a href="images/image-5.jpg" data-lightbox="gallery-2" data-title="Gallery 2 Image 2"><img src="images/image-5.jpg"></a> 
    <a href="images/image-12.jpg" data-lightbox="gallery-4" data-title="Gallery 4 Image 3"><img src="images/image-12.jpg"></a> 
    <a href="images/image-10.jpg" data-lightbox="gallery-4" data-title="Gallery 4 Image 1"><img src="images/image-10.jpg"></a> 
    <a href="images/image-6.jpg" data-lightbox="gallery-2" data-title="Gallery 2 Image 3"><img src="images/image-6.jpg"></a> 
    <a href="images/image-7.jpg" data-lightbox="gallery-3" data-title="Gallery 3 Image 1"><img src="images/image-7.jpg"></a> 
    <a href="images/image-11.jpg" data-lightbox="gallery-4" data-title="Gallery 4 Image 2"><img src="images/image-11.jpg"></a> 
</div>

Fuente

2016-09-13 21:01:26

Haciendo que el complemento JQuery LightBox funcione con múltiples galerías

Respuesta

Cuestiones relacionadas