Making JQuery LightBox Plugin work with multiple galleries

javascript jquery wordpress lightbox

30,909

Solution 1

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.

Solution 2

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!

Solution 3

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.

Solution 4

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

});

Solution 5

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

View more solutions

30,909

Author by

lpdahito

Web Developer. Ruby on Rails disciple. Team Lebron since the beginning 🏀

Updated on September 14, 2020

Comments

lpdahito over 3 years
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.