为灯箱中同一页面上的多个链接制作单独的图库

Question

I am trying to make a gallery of images open from a link in a lightbox, I have the basics down, and I have one link that opens a gallery of images, but I have 6 different links on the page that I want to open a different gallery of images for each one, when I set it up it does not display the gallery, only one image. Is there a way to duplicate this:

HTML

 <div id='gallery'>
        <a href="images/big-image1.jpg">
            <img src="images/thumbnail-image1.jpg"/>
        </a>
        <a href="images/big-image2.jpg" ></a>
        <a href="images/big-image3.jpg" ></a>
        <a href="images/big-image4.jpg" ></a>
    </div>

JS

$(document).ready(function() {
    $('#gallery a').lightBox();
});

for each set-up, and have them work? Do I need to assign them different div names to make them work?

Thanks, Jessica

Answer 1

If you have six different divs, you'll have to call the jQuery Lightbox plugin six times:

$(document).ready(function() {
  $('#gallery1 a').lightBox();
  $('#gallery2 a').lightBox();
  $('#gallery3 a').lightBox();
  $('#gallery4 a').lightBox();
  $('#gallery5 a').lightBox();
  $('#gallery6 a').lightBox();
});

Another option would be to just have one div and each image have a rel tag attribute to group them into galleries:

HTML

<div id="gallery">

 <!-- gallery 1 -->
 <a href="full-image-1.jpg" rel="group1"><img src="thumb-1.jpg"></a>
 <a href="full-image-2.jpg" rel="group1"><img src="thumb-2.jpg"></a>
 <a href="full-image-3.jpg" rel="group1"><img src="thumb-3.jpg"></a>

 <!-- gallery 2 -->
 <a href="full-image-4.jpg" rel="group2"><img src="thumb-4.jpg"></a>
 <a href="full-image-5.jpg" rel="group2"><img src="thumb-5.jpg"></a>
 <a href="full-image-6.jpg" rel="group2"><img src="thumb-6.jpg"></a>

 <!-- gallery 3 -->
 <a href="full-image-7.jpg" rel="group3"><img src="thumb-7.jpg"></a>
 <a href="full-image-8.jpg" rel="group3"><img src="thumb-8.jpg"></a>
 <a href="full-image-9.jpg" rel="group3"><img src="thumb-9.jpg"></a>

 <!-- etc -->

</div>

then use this script (you'll still have to run it six times):

$("#gallery a[rel=group1]").lightBox();
$("#gallery a[rel=group2]").lightBox();
$("#gallery a[rel=group3]").lightBox();
// etc