jQuery Lightbox By Group

I have worked on a project that requires image zooming ala Lightbox. Since I’m comfortable with jQuery, I used the jQuery Lightbox plugin instead of the original. Everything was so easy until I encountered a page whose images are grouped. That’s why I’m configuring jQuery Lightbox plugin to work on group of images.

The page I’m working on is a package tour page where there are several packages on a page. Each package tour has several images on it. Therefore, the lightbox effect should be per package. Here is the basic structure:

<div class="package">
  <div class="package_details">Details here</div>
  <div class="tour-lightbox-images" id="tour-lightbox-images-1">
    <a href="/images/pic1.jpg"><img src="/images/pic1.jpg" /></a>
    <a href="/images/pic2.jpg"><img src="/images/pic2.jpg" /></a>
    <a href="/images/pic3.jpg"><img src="/images/pic3.jpg" /></a>
  </div>
</div>

<div class="package">
  <div class="package_details">Details 2 here</div>
  <div class="tour-lightbox-images" id="tour-lightbox-images-2">
    <a href="/images/pic4.jpg"><img src="/images/pic4.jpg" /></a>
  </div>
</div>

<div class="package">
  <div class="package_details">Details 3 here</div>
  <div class="tour-lightbox-images" id="tour-lightbox-images-3">
    <a href="/images/pic5.jpg"><img src="/images/pic5.jpg" /></a>
    <a href="/images/pic6.jpg"><img src="/images/pic6.jpg" /></a>
    <a href="/images/pic7.jpg"><img src="/images/pic7.jpg" /></a>
    <a href="/images/pic8.jpg"><img src="/images/pic8.jpg" /></a>
    <a href="/images/pic.9jpg"><img src="/images/pic8.jpg" /></a>
  </div>
</div>

With that structure, image sets are grouped whose container class name is tour-lightbox-images. Here is the JavaScript code:

$(function() { 
  $("div.tour-lightbox-images").each(function(){
    $("#" + this.id + " a").lightBox({
      imageLoading: "/images/lightbox-ico-loading.gif",
      imageBtnClose: "/images/lightbox-btn-close.gif",
      imageBtnPrev: "'/images/lightbox-btn-prev.gif",
      imageBtnNext: "/images/lightbox-btn-next.gif",
      imageBlank: "/images/lightbox-blank.gif"	
    });
  });    												
});

The logic was to apply lightbox effect for each group so that when you click an image on that group, only the images on that group are display as a set.

There could be a better way but I really need to make it work fast and upload it fast. So I’m done.