6 Feb 2010

jQuery lightBox with multiple galleries on one page

Posted by havvg

Lightbox is one great plugin for jQuery. As there is no option to set up relations for links of images to generate galleries of it like thickbox does, you have to call lightBox multiple times to get your galleries up and separated from each other.

A simple call for lightBox looks something like this.

?View Code JAVASCRIPT
$('#photos .gallery a').lightBox();

Imagine you have several separated elements of the class “gallery” nested under the photos node. LightBox will put all of these images in one gallery.

The following code snippet will call lightBox multiple times separating each gallery from all others.

?View Code JAVASCRIPT
$('#photos .gallery').each(function() {
  $('a', $(this)).lightBox();
});

Subscribe to Comments

2 Responses to “jQuery lightBox with multiple galleries on one page”

  1. I was wondering what file and where in the file I would change the javascript. (jquery.js or jquery.lightbox-0.5.js). the page I am working on is http://www.f22designs.come/test/southernlumber/gallery.html

    Thanks in advance,
    Chris

     

    Chris

    August 5th, 2010 at 6:28 pmpermalink

  2. The changes are done in your own Javascript. Seems like this 

    rel="lightbox[gallery1]"

    is working the same way.

     

    havvg

    August 5th, 2010 at 8:41 pmpermalink

Leave a Reply

Message: