Simple Javascript Help :: Document.Images[]

[meetmandeep]

I'm naive in javascript...need some help. I'm using the Lightbox v2.0 script

Script Link: http://www.dynamicdrive.com/dynamici...box2/index.htm

I'm trying to write another javascript which simply adds rel="lightbox" to all images <a> tag on the page. So, all I would have to do is call two scripts (or combine them) and my images will automatically have lightbox effect.

Since I've not done any coding with javascript, i'm not sure how to achieve this. I was thinking along the lines of using document.images to get all the images and then possibly looking at the <a> tag right before it and appending rel="lightbox".

However, I have no idea how to achieve that with code and therefore I seek assistance fro Javascript Pros....

any help is much appreciated...thanks

[jscheuer1]

I'm not really sure of the best way to go here, two choices - you can try them both to see which, if either, is best (they both may be fine). OK, at the end of lightbox.js we have this:

function initLightbox() { myLightbox = new Lightbox(); }
Event.observe(window, 'load', initLightbox, false);

Add to it like so:

function initLightbox() {
var imgs=document.images;
for (var i_tem = 0; i_tem < imgs.length; i_tem++)
if(imgs[i_tem].parentNode.tagName.toLowerCase()=='a')
imgs[i_tem].parentNode.setAttribute('rel', 'lightbox', 0);
myLightbox = new Lightbox();
}
Event.observe(window, 'load', initLightbox, false);

Or like so:

function initLightbox() {
var imgs=document.images;
for (var i_tem = 0; i_tem < imgs.length; i_tem++)
if(imgs[i_tem].parentNode.tagName.toLowerCase()=='a')
imgs[i_tem].parentNode.rel='lightbox';
myLightbox = new Lightbox();
}
Event.observe(window, 'load', initLightbox, false);

Also, some folks may prefer:

document.getElementsByTagName('img')

to:

document.images

document.images is supported by more browsers but, the lightbox script itself will not work in browsers that don't support document.getElementsByTagName('img') and I think it works better in the browsers that do support it (less resources, faster or something).