lightbox not loading

[enin]

1) Script Title: Lightbox 2.03

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...box2/index.htm

3) Describe problem: I am not sure if I have the code wrong, if it is not playing well with the other scripts on the page or if lightbox doesn't like area maps (or none of the above).

Any help is much appreciated.

Here's a link to my test page:
www.mattsteffen.com/design

[enin]

I think I've ruled out the area maps as being the problem. Still having no luck getting it to operate.

I may have to stop looking at it for awhile...........

[jscheuer1]

Two major problems:

1 ) Your fault - you haven't uploaded the stylesheet to the server, or if you did, it isn't here where the page expects it:

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

which would be here (in absolute terms):

http://www.mattsteffen.com/design/css/lightbox.css

I just found it, it's here:

http://www.mattsteffen.com/css/lightbox.css

so use:

<link rel="stylesheet" href="http://www.mattsteffen.com/css/lightbox.css" type="text/css" media="screen" />

2 ) Not your fault - there is a bug in the script for area tags that have group names included in their rel="lightbox" attribute. To fix that, open lightbox.js in a text only editor like NotePad and around line number 370 or so, change this:

 . . .
		hideFlash();

		// stretch overlay to fill page and fade in
		var arrayPageSize = getPageSize();
		Element.setHeight('overlay', arrayPageSize[1]);

		new Effect.Appear('overlay', { duration: overlayDuration, from: 0.0, to: 0.8 });

		imageArray = [];
		imageNum = 0;		

		if (!document.getElementsByTagName){ return; }
		var anchors = document.getElementsByTagName('a');

		// if image is NOT part of a set..
		if((imageLink.getAttribute('rel') == 'lightbox')){
			// add single image to imageArray
			imageArray.push(new  . . .

to this:

 . . . 
		hideFlash();

		// stretch overlay to fill page and fade in
		var arrayPageSize = getPageSize();
		Element.setHeight('overlay', arrayPageSize[1]);

		new Effect.Appear('overlay', { duration: overlayDuration, from: 0.0, to: 0.8 });

		imageArray = [];
		imageNum = 0;		

		if (!document.getElementsByTagName){ return; }
		var anchors = document.getElementsByTagName(imageLink.tagName);

		// if image is NOT part of a set..
		if((imageLink.getAttribute('rel') == 'lightbox')){
			// add single image to imageArray
			imageArray.push(new . . .

[enin]

worked like a charm.

john, i can't thank you enough.

[rhlblue]

worked like a charm.

john, i can't thank you enough.

Yea he's an angel

[jscheuer1]

Just an added note here, for full compatibility across image sets that are represented by both <a> and <area> tags, this code:

var anchors = document.getElementsByTagName('a');

should really be expanded to:

var l=document.getElementsByTagName('a');
var a=document.getElementsByTagName('area');
var anchors = [];
for (var i = l.length-1; i > -1; --i)
anchors[i]=l[i];
for (var i = a.length-1; i > -1; --i)
anchors.push(a[i]);

This will support one, the other, or both type tag and will work for the original problem here as well as for more situations than the original solution did. However, as long as all image set(s) use only <a> or only <area> tags, the original solution is sufficient.