lpdahito lpdahito - 2 months ago 13
Javascript Question

Making JQuery LightBox Plugin work with multiple galleries

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

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.