Making JQuery LightBox Plugin work with multiple g

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 I click on a picture from a certain gallery, I get all the pictures from all the galleries on the same page. Let's say i've got 2 galleries of 6 photos each. If I click on a pic from gallery 1, I will see the pics from gallery 2 as well.

I've tried something like this to make it work but no success:

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

Unfortunately, it doesn't work!!!

What's the workaround for that?

Once again, what I'm trying to accomplish is to be able to view the pictures in their proper gallery. I don't want all the pics to be treated as one gallery.

Answer 1

Can't say I've worked with this particular plugin before, but usually you add a rel=lightbox[foo] to the link element. Foo will be unique for each gallery on the page.

Hope this gets you started on the right path; otherwise there are dozens of other lightbox plugins you can use.

Answer 2

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 3

With very few changes I made this work with multiple galleries on one page.

The JQuery

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

The HTML

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

I changed the style from an id to a class.

Answer 4

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 5

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>

Answer 6

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

});