Question

I have a question about how to rewrite a lightbox script that uses jquery.

Its using div ids to differentiate galleries. I’d like to have it use the rel="" attribute, with perhaps a trailing number. Can this be written to check for something such as rel="gallery1" but within a loop that increments the number? I’m unfamiliar with the js syntax for such things. Or perhaps a loop with checks the dom for objects with that rel. Thx.

Javascript

$(function() {
    $('#gallery1 a').lightBox();
    $('#gallery2 a').lightBox();
});

Answer 1

This will loop through a for loop 3 times calling .lightBox() on links with rel of gallery1, gallery2 and gallery3. You can increase the loop number to however many you want.

Javascript

for (x = 1; x <= 3; x += 1) {
    $('a[@rel*=gallery' + x + ']').lightBox();
}​

Although I think you can group lightboxes just by specifying different rel properties and calling .lightBox() on all the links.

Give all your lightbox links a class of lightbox and then specify different rel groups such as gallery1, gallery2 and gallery3 for all the links. Then call the following, I think .lightBox() and they should all be grouped seperately.

HTML

<a href="[image_src]" class="lightbox" rel="gallery1">[link text or thumbnail]</a>
<a href="[image_src]" class="lightbox" rel="gallery1">[link text or thumbnail]</a>
<a href="[image_src]" class="lightbox" rel="gallery1">[link text or thumbnail]</a>

<a href="[image_src]" class="lightbox" rel="gallery2">[link text or thumbnail]</a>
<a href="[image_src]" class="lightbox" rel="gallery2">[link text or thumbnail]</a>

<a href="[image_src]" class="lightbox" rel="gallery3">[link text or thumbnail]</a>
<a href="[image_src]" class="lightbox" rel="gallery3">[link text or thumbnail]</a>
<a href="[image_src]" class="lightbox" rel="gallery3">[link text or thumbnail]</a>

Javascript

$('a.lightbox').lightBox();

What should happen is gallery1 links group together, the gallery2 links group together and the gallery3 links group together. This should happen by default.

I hope this helps.

Edit 1

Something to note, the jQuery lightbox plugin has not been updated for 4.5 years. You may want to look at a better maintained alternative like colorbox.