Making JQuery LightBox Plugin work with multiple galleries

Question

I\'m trying to make this jquery plugin => http://leandrovieira.com/projects/jquery/lightbox/ work with multiple galleries on the same page.

The problem is, everytime

Answer 1

Perhaps lightbox has changed since other answers were given, but I thought the answers on this page were good, but then I discovered that I could simply do:

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

That assumes an HTML structure of:

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

The wrapper class isn't needed, I think, but my code included it for other reasons.

Answer 2

Alternately, you could do something like this to automatically wire up any lightbox[insert gallery name here] links, like the standard lightbox.js functionality:

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

});

Answer 3

All you need is lightbox 2 which you can get it from the link below.

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>

You can set your different sets of gallery using "lightbox[roadtrip]" just rename the "roadtrip" with your desired gallery group name and it'll work like magic. No need to code for anything extra

Answer 4

Here's how I made the basic jquery lightbox linked in the original question behave with multiple galleries. No hacks, or anything. Works flawlessly.

I gave every lightbox a seperate name:

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

Then my HTML looks like this:

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

And voila, I have 2 separate galleries.

Answer 5

I do it this way:

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

This way all you have to do is place each gallery in some kind of container and you'll get one image set per container, for example, the following will create two image sets:

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

You could use the 'a' selector instead but I find using '.lightbox' offers more flexibility.

Answer 6

You can also do it without JavaScript at all with the data-attributes.

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

It works also if the images are mixed up in the 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>