Making JQuery LightBox Plugin work with multiple galleries

lpdahito picture lpdahito · Jan 12, 2010 · Viewed 30.4k times · Source

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

Cadoo picture Cadoo · Jan 12, 2010

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.