Making JQuery LightBox Plugin work with multiple galleries

Question

Hi guys... 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.

Thanks for your help guys.

LP

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

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 3

Same question I had - Cadoo what did your div class look like?

Answer 4

Same Question i have post here

Answer 5

Cadoo, I have copied your proposed fix and I noticed that it works with the following exception: If the user tries to navigate between photos within any gallery other than gallery1 using the arrow keys on the keyboard it toggles between photos from gallery 1 not the correct gallery the user is in. However, if the user uses the "next" and Prev" buttons on the pucture the navigation works correctly.

Have you noticed this and do you have any idea how to fix it?

Answer 6

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 7

Hi folks, I am a newbie on ligthbox plugin, I followed your instructions to make a several gallery plugin but it doesnt work. When I click on the link to one gallery it only shows me th first image of the set 1.

my code is like this http://dpaste.com/hold/157799/

What am I doing wrong thanks

Answer 8

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 9

can any body show his demo where he applied this damm code

Answer 10

This a patch for Ben's answer, for those who waht to use multiple galleries, or simply add the lightbox effect to an image, use it inside your <head>...</head> tag

Here's the code (Note: I changed the variable $ for jQuery, it works better for me):

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

This is an example mixing all possible uses, they all can work in the same html, here we have two galleries and a third one with no name, just the "lightbox" reference:

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

I hope this helps!

Answer 11

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 12

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 13

Honshi,

I wish this worked:

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"

In my case, the "magic" means that the first gallery worked fine, the second didn't. When I clicked on the thumbnail it reloaded the page to the image only. I guess that's magic, just not the kind I was looking for.