Tworzenie wtyczki JQuery LightBox z wieloma galeriami

Próbuję zrobić tę wtyczkę jQuery =>http://leandrovieira.com/projects/jquery/lightbox/ pracować z wieloma galeriami na tej samej stronie.Tworzenie wtyczki JQuery LightBox z wieloma galeriami

Problem polega na tym, że za każdym razem, gdy klikam zdjęcie z określonej galerii, wszystkie zdjęcia ze wszystkich galerii znajdują się na tej samej stronie. Załóżmy, że mam 2 galerie po 6 zdjęć. Jeśli kliknę na zdjęcie z galerii 1, zobaczę też zdjęcia z galerii 2.

Próbowałem coś takiego, aby to działało, ale bez powodzenia:

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

Niestety, to nie działa !!!

Jakie jest obejście tego problemu?

Po raz kolejny próbuję to zrobić, aby móc oglądać zdjęcia w ich galerii. Nie chcę, aby wszystkie zdjęcia były traktowane jako jedna galeria.

Źródło

2010-01-12 lpdahito

umieścić HTML próbujesz dopasować z selektorów oraz (myślę, że to problem selektor) –

też, '$ ('div.gallery-6 a.lightbox') .lightBox(); 'jest tym samym co to, co robisz z mniejszym kodem (całkiem pewnym, że jest dokładnie taki sam) –

to nie ... ponieważ chcę, żeby wtyczka traktowała moje galerie jako 2 różne galerie. Załóżmy, że jedna galeria zawiera pewien zestaw zdjęć, a druga zawiera inny zestaw zdjęć. Przeglądając pierwszą galerię, nie powinieneś widzieć pozostałych. – lpdahito

Przy niewielu zmianach wykonałem tę pracę z wieloma galeriami na jednej stronie.

jQuery

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

HTML

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

Zmieniłem styl z identyfikatorem do klasy.

Źródło

2010-01-12 20:04:33 Cadoo

Po prostu wypróbowałem to rozwiązanie ... Działa doskonale thx. Ale dlaczego w tym przypadku mój poprzedni kod nie zadziałał? Mam na myśli to, że dwukrotne wywołanie funkcji lightbox jest takie samo jak znalezienie elementu, w moim przypadku div galerii, a następnie na każdej galerii div znaleźć elementy "a" i wywołanie funkcji lightbox ... Nie musiałbym podawać galerii ID powoduje wywołanie metody each() w div galerii. – lpdahito

także '$ ('. Gallery'). Each (function (i) { $ ('# gallery' + i) .lightbox(); }); ' – Matt

Nie mogę powiedzieć, że wcześniej pracowałem z tą konkretną wtyczką, ale zazwyczaj dodajesz element linku do elementu rel=lightbox[foo]. Foo będzie niepowtarzalny dla każdej galerii na stronie.

Mam nadzieję, że to zaczyna się na właściwej ścieżce; w przeciwnym razie istnieje dozens innych wtyczek lightbox, których możesz użyć.

Źródło

2010-01-12 18:41:54

jQuery lightbox pozwala ci użyć dowolnego selektora, który chcesz związać światło z elementem. więc nie musisz * dodawać do swoich elementów elementów rel = "lightbox [optional_slide_show]" (jak w wersji oryginalnej). można jednak naśladować to zachowanie za pomocą '$ ('[rel * =" lightbox "]') selektora jQuery. –

zrobić to w ten sposób:

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

ten sposób wszystkie trzeba zrobić, to miejsce każdej galerii w jakimś pojemniku, a dostaniesz jeden obraz ustawiony za kontener, na przykład, następujące utworzyć dwa zestawy obrazów:

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

Zamiast tego można użyć selektora "a", ale uważam, że używanie ".lightbox" zapewnia większą elastyczność.

Źródło

2010-02-04 04:58:14 Codeblind

To zdecydowanie najlepsze rozwiązanie. Dzięki, działa wspaniale przy użyciu tagu "a" zamiast dodawania ".lightbox" do każdego linku. – Klikerko

Alternatywnie, możesz zrobić coś takiego, aby automatycznie połączyć wszystkie lightbox [wstawki do galerii tutaj], podobnie jak standardowy lightbox.Funkcjonalność 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(); }); 

});

Źródło

2010-02-22 19:03:10 Ben

To nie działa –

Ta łatka na odpowiedź Bena, dla tych, którzy waht korzystać z wielu galerii, lub po prostu dodać efekt lightbox do obrazu, użyj go wewnątrz <head>...</head> tagu

Oto kod (Uwaga: Zmieniłem zmienna $ dla jQuery, to działa lepiej dla mnie):

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

to jest przykład zmieszanie wszystkich możliwych zastosowań, wszystkie one mogą pracować w tym samym html, mamy tu dwie galerie i trzeci jedno bez nazwy, tylko odwołanie "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" />

Mam nadzieję, że to pomoże!

Źródło

2010-05-11 03:58:19

Wszystko czego potrzebujesz to lightbox 2, który można uzyskać z linku poniżej.

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>

Można ustawić różne zestawy galerii przy użyciu „lightbox [roadtrip]” po prostu zmienić nazwę „kompanem podróży” z wybraną nazwą grupy galerii i będzie działać jak magia. Nie ma potrzeby kodu do niczego dodatkowego

Źródło

2010-07-01 00:52:29 Honshi

Oto, jak wykonałem podstawowe lightbox związany z jquery w oryginalnym pytaniu zachowuję się z wieloma galeriami. Bez hacków i niczego. Działa bezbłędnie.

Dałem każdemu Lightbox nazwę oddzielna:

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

Wtedy mój HTML wygląda tak:

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

I voila, mam 2 osobne galerie.

Źródło

2010-08-12 22:43:26 AntoNB

Może schowka zmieniła się od innych odpowiedzi zostały podane, ale myślałem, że odpowiedzi na tej stronie były dobre, ale potem odkryłem, że mogę po prostu zrobić:

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

który zakłada strukturę HTML:

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

Klasa opakowywania nie jest potrzebna, myślę, ale mój kod zawierał go z innych powodów.

Źródło

2012-05-30 23:55:16

Można to również zrobić bez JavaScriptu z atrybutami danych.

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

Działa również w przypadku pomieszania obrazów na stronie.

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

Źródło

2016-09-13 21:01:26

Tworzenie wtyczki JQuery LightBox z wieloma galeriami

Odpowiedz

Powiązane problemy