Making JQuery LightBox Plugin arbeiten mit mehreren Galerien

Ich versuche dieses jquery Plugin =>http://leandrovieira.com/projects/jquery/lightbox/ arbeiten mit mehreren Galerien auf der gleichen Seite.Making JQuery LightBox Plugin arbeiten mit mehreren Galerien

Das Problem ist, jedes Mal wenn ich auf ein Bild von einer bestimmten Galerie klicke, bekomme ich alle Bilder von allen Galerien auf der gleichen Seite. Nehmen wir an, ich habe 2 Galerien mit jeweils 6 Fotos. Wenn ich auf ein Bild von Galerie 1 klicke, sehe ich auch die Bilder von Galerie 2.

Ich habe so etwas wie dies versucht, damit es funktioniert, aber kein Erfolg:

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

Leider hat es nicht funktioniert !!!

Was ist die Problemumgehung dafür?

Noch einmal, was ich versuche zu erreichen, ist in der Lage, die Bilder in ihrer richtigen Galerie zu sehen. Ich möchte nicht, dass alle Bilder wie eine Galerie behandelt werden.

Quelle

2010-01-12 lpdahito

die HTML setzen Sie versuchen, als auch mit den Wählern zu passen (ich glaube, es ist ein Selektor Problem) –

auch, '$ ('div.gallery-6 a.lightbox') .lightBox(); 'ist die gleiche Sache wie das, was Sie mit weniger Code tun (ziemlich sicher, es ist genau das gleiche) –

es ist nicht ... da ich möchte das Plugin meine Galerien als 2 verschiedene Galerien behandeln. Nehmen wir an, eine Galerie enthält eine bestimmte Menge von Bildern und die andere enthält eine weitere Reihe von Bildern. Wenn Sie die erste Galerie durchsuchen, sollten Sie die anderen nicht sehen. – lpdahito

Mit sehr wenigen Änderungen habe ich diese Arbeit mit mehreren Galerien auf einer Seite gemacht.

Die JQuery

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

Die HTML

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

ich den Stil von einer ID zu einer Klasse geändert.

Quelle

2010-01-12 20:04:33 Cadoo

Ich habe gerade diese Lösung versucht ... Es funktioniert perfekt thx. Aber warum, in diesem Fall, hat mein vorheriger Code nicht funktioniert? Ich meine, die Lightbox-Funktion zweimal aufzurufen, ist dasselbe wie das Finden eines Elements, in meinem Fall das Galerie-Div und dann auf jedem Galerie-Div die "a" -Elemente finden und die Lightbox-Funktion aufrufen ... Ich hätte der Galerie keinen geben müssen ID Ursache Ich rufe die each() -Methode auf der Galerie div. – lpdahito

auch '$ ('. Gallery'). Je (Funktion (i) { $ ('# gallery' + i) .lightbox(); }); ' – Matt

Ich kann nicht sagen, dass ich mit diesem bestimmten Plugin zuvor gearbeitet habe, aber normalerweise fügen Sie dem Linkelement rel=lightbox[foo] hinzu. Foo wird für jede Galerie auf der Seite eindeutig sein.

Hoffe, dass Sie damit auf den richtigen Weg gebracht werden; Ansonsten gibt es dozens von anderen Lightbox-Plugins, die Sie verwenden können.

Quelle

2010-01-12 18:41:54

jQuery Leuchtkasten können Sie verwenden, welche Selektor Sie Lichtbox an ein Element binden möchten. also musst du rel = "lightbox [optional_slide_show]" nicht mehr auf deine Elemente setzen (wie in der Originalversion). Sie können dieses Verhalten jedoch mit dem '$ ('rel * =" lightbox ")' jQuery-Selektor nachahmen. –

Ich mache es so:

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

Auf diese Weise alles, was Sie tun müssen, ist Platz jeder Galerie in einer Art Container und Sie werden ein Bild pro Behälter fertig, zum Beispiel des folgenden Wille erstellen zwei Bildsätze:

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

Sie könnten das ‚a‘ Selektor stattdessen aber ich finde, mit ‚.lightbox‘ mehr Flexibilität bietet.

Quelle

2010-02-04 04:58:14 Codeblind

Dies ist die beste Lösung bei weitem. Danke, funktioniert gut mit nur "a" -Tag stattdessen Hinzufügen von ".lightbox" zu jedem Link. – Klikerko

Alternativ könnten Sie so etwas tun, um automatisch eine beliebige Lightbox [Einfügen Galerie Name hier] Links, wie die Standard-Lightbox.js Funktionalität:

$(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(); }); 

});

Quelle

2010-02-22 19:03:10 Ben

Es funktioniert nicht –

Dies ist ein Patch für Ben Antwort für diejenigen, die mehrere Galerien verwenden WAHT oder einfach um den Leuchtkasten Effekt auf ein Bild hinzuzufügen, verwenden Sie es in Ihrem <head>...</head> Tag

Hier ist der Code (Hinweis: ich änderte die Variable $ für jQuery, es funktioniert besser für mich):

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

Dies ist ein Beispiel alle möglichen Anwendungen Mischen sie alle können in der gleichen hTML arbeiten, hier haben wir zwei Galerien und ein drittes eine mit keinem Namen, nur die "lightbox" Referenz:

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

Ich hoffe, das hilft!

Quelle

2010-05-11 03:58:19

Alles, was Sie brauchen, ist Lightbox 2, die Sie über den unten stehenden Link erhalten können.

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>

Sie können verschiedene Sätze von Galerie mit „Leuchtkasten [roadtrip]“ nur benennen Sie den „Roadtrip“ mit Ihren gewünschten Galerie Gruppennamen gesetzt und es wird wie Magie arbeiten. Keine Notwendigkeit, für etwas extra zu codieren

Quelle

2010-07-01 00:52:29 Honshi

Hier ist, wie ich die grundlegende jquery Leuchtkasten verknüpft in der ursprünglichen Frage mit mehreren Galerien verhalten. Keine Hacks oder so etwas. Funktioniert einwandfrei.

gab ich jeden Leuchtkasten einen alternativen Namen:

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

Dann ist mein HTML wie folgt aussieht:

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

Und voila, ich habe 2 separate Galerien.

Quelle

2010-08-12 22:43:26 AntoNB

Vielleicht da andere Antworten Leuchtkasten gegeben wurden geändert hat, aber ich dachte, die Antworten auf dieser Seite waren gut, aber dann entdeckte ich, dass ich einfach tun könnte:

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

die eine HTML-Struktur übernimmt:

Die Wrapper-Klasse wird nicht benötigt, denke ich, aber mein Code enthielt es aus anderen Gründen.

Quelle

2012-05-30 23:55:16

Mit den Datenattributen können Sie das auch ohne JavaScript machen.

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

Es funktioniert auch, wenn die Bilder auf der Seite vermischt sind.

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

Quelle

2016-09-13 21:01:26

Making JQuery LightBox Plugin arbeiten mit mehreren Galerien

Antwort

Verwandte Themen