Making JQuery LightBox Plugin work with multiple galleries

后端未结

关注

 9  548

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

相关标签:

9条回答

执念已碎

2020-12-17 01:24

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.

0 讨论(0)

感情败类

2020-12-17 01:24

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.

0 讨论(0)
发布评论:

提交评论
- 加载中...

夕颜

2020-12-17 01:26

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!

0 讨论(0)

上一页 1 2