Menu
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.
743
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.
188
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!
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
