Faire JQuery LightBox Plugin de travail avec plusieurs galeries

J'essaie de faire de ce plugin jquery =>http://leandrovieira.com/projects/jquery/lightbox/ travailler avec plusieurs galeries sur la même page. Le problème est, chaque fois que je clique sur une image d'une certaine galerie, j'obtiens toutes les images de toutes les galeries sur la même page. Disons que j'ai 2 galeries de 6 photos chacune. Si je clique sur une photo de la galerie 1, je verrai également les photos de la galerie 2.Faire JQuery LightBox Plugin de travail avec plusieurs galeries

J'ai essayé quelque chose comme ça pour le faire fonctionner, mais sans succès:

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

Malheureusement, il ne fonctionne pas !!!

Quelle est la solution de contournement pour cela?

Encore une fois, ce que j'essaie d'accomplir est de pouvoir voir les images dans leur propre galerie. Je ne veux pas que toutes les photos soient traitées comme une seule galerie.

Source

2010-01-12 lpdahito

mettre le code HTML que vous essayez de faire correspondre avec les sélecteurs aussi bien (je pense qu'il est un problème de sélection) –

aussi, '$ ('div.gallery-6 a.lightbox') .lightBox(); 'est la même chose que ce que vous faites avec moins de code (à peu près sûr que c'est exactement la même chose) –

ce n'est pas ... puisque je veux que le plugin traite mes galeries comme 2 galeries différentes. Disons qu'une galerie contient un certain ensemble de photos et l'autre contient un autre ensemble de photos. Lorsque vous parcourez la première galerie, vous ne devriez pas voir les autres. – lpdahito

Avec très peu de changements, j'ai fait ce travail avec plusieurs galeries sur une seule page.

Le JQuery

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

Le code HTML

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

j'ai changé le style d'un identifiant à une classe.

Source

2010-01-12 20:04:33 Cadoo

Je viens d'essayer cette solution ... Cela fonctionne parfaitement thx. Mais pourquoi, dans ce cas, mon code précédent ne fonctionnait pas? Je veux dire, appeler la fonction lightbox deux fois est la même chose que trouver un élément, dans mon cas, la div de la galerie et ensuite sur chaque div de la galerie trouver les éléments "a" et appeler la fonction lightbox ... Je ne devrais pas donner à la galerie ID cause que j'appelle la méthode each() sur la div de la galerie. – lpdahito

également '$ ('. Gallery'). Chaque (fonction (i) { $ ('# gallery' + i) .lightbox(); }); ' – Matt

Je ne peux pas dire que j'ai déjà travaillé avec ce plugin particulier, mais généralement vous ajoutez un rel=lightbox[foo] à l'élément de lien. Foo sera unique pour chaque galerie sur la page.

Espérons que cela vous permet de démarrer sur le bon chemin; sinon il y a dozens d'autres plugins lightbox que vous pouvez utiliser.

Source

2010-01-12 18:41:54

jQuery lightbox vous permet d'utiliser n'importe quel sélecteur pour lier une boîte à lumière à un élément. vous n'avez donc pas * à * mettre rel = "lightbox [optional_slide_show]" sur vos éléments (comme dans la version originale). Cependant, vous pouvez imiter ce comportement avec le sélecteur '$ ('[rel * =" lightbox "]')' jQuery. –

je le fais de cette façon:

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

De cette façon, tout ce que vous devez faire est de placer chaque galerie dans une sorte de conteneur et vous aurez une image fixe par conteneur, par exemple, la volonté suivante créer deux séries d'images:

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

Vous pouvez utiliser le « un » sélecteur à la place mais je trouve en utilisant « .lightbox » offre plus de flexibilité.

Source

2010-02-04 04:58:14 Codeblind

C'est de loin la meilleure solution. Merci, fonctionne bien avec juste en utilisant "a" tag au lieu d'ajouter ".lightbox" à chaque lien. – Klikerko

Alternativement, vous pourriez faire quelque chose comme ceci pour câbler automatiquement tous les liens lightbox [insérer le nom de galerie ici], comme la lightbox standard.fonctionnalité 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(); }); 

});

Source

2010-02-22 19:03:10 Ben

Ça ne marche pas –

Ce patch pour la réponse de Ben, pour ceux qui WAHT d'utiliser plusieurs galeries, ou tout simplement ajouter l'effet de la visionneuse à une image, utiliser dans votre balise <head>...</head>

Voici le code (Note: J'ai changé la $ variable pour jQuery, il fonctionne mieux pour moi):

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

voici un exemple de mélange toutes les utilisations possibles, ils peuvent tous travailler dans le même html, nous avons ici deux galeries et une troisième un sans nom, juste la référence "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" />

J'espère que cela aide!

Source

2010-05-11 03:58:19

Tout ce dont vous avez besoin est lightbox 2 que vous pouvez obtenir à partir du lien ci-dessous.

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>

Vous pouvez définir vos différents ensembles de galerie à l'aide « lightbox [roadtrip] » renommer juste le « roadtrip » avec votre nom de groupe galerie souhaitée et que ça va marcher comme par magie. Pas besoin de coder pour quoi que ce soit de plus

Source

2010-07-01 00:52:29 Honshi

Voici comment j'ai fait la base jquery lightbox liée à la question d'origine se comporter avec plusieurs galeries. Pas de hacks, ou quoi que ce soit. Fonctionne parfaitement.

J'ai donné un nom à chaque lightbox séparé:

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

Alors mon HTML ressemble à ceci:

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

Et le tour est joué, je 2 galeries séparées.

Source

2010-08-12 22:43:26 AntoNB

peut-être lightbox a changé depuis d'autres réponses ont été données, mais je pensais que les réponses sur cette page étaient bons, mais je découvert que je pouvais simplement faire:

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

qui suppose une structure HTML:

La classe wrapper n'est pas nécessaire, je pense, mais mon code l'a inclus pour d'autres raisons.

Source

2012-05-30 23:55:16

Vous pouvez également le faire sans JavaScript avec les attributs de données.

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

Cela fonctionne également si les images sont mélangées dans la page.

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

Source

2016-09-13 21:01:26

Faire JQuery LightBox Plugin de travail avec plusieurs galeries

Répondre

Questions connexes