Also for the benefit of other people looking at this site, I used the code from Framboos to handle putting captions under thumbnail images. I found that this caused a formatting problem displaying images that were not part of a link. There was extra space between the title and the caption, probably from the extra whitespace that some browsers add in when you add an element. This was avoided by checking if(parent.tagName == ‘A’) and running Framboos code else running just the IMG code that’s listed here.

	if(parent.tagName == 'A'){
			grandparent.insertBefore(frame, parent);
			parent.removeChild(img);
			grandparent.removeChild(parent);
			frame.appendChild(parent);
			parent.appendChild(img);
			frame.appendChild(txt);
	}
	else{
	      parent.insertBefore(frame, img);
	      parent.removeChild(img);
	      frame.appendChild(img);
	      frame.appendChild(txt);
	} 

Hope this helps someone.

var images = document.getElementsByClassName(className);
//to
var images = $('img.figure');

I am using IE6 SP2 and I had a problem with some additional whitespace on the right hand side of the images. It was like I had more padding on the right hand side.

On IE7 this space wasn’t as noticeable, however if you had a long title the first word would sometimes appear on the right hand side of the image instead of underneath it. On your demonstation page in ie6 I see more whitespace on the right hand side of your images. When I look at your demo page with IE7, there is no padding at all on the right hand side of the lower image. I found that these problems were fixed by concatenating a space to the start of the title. This space doesn’t show up in the caption under the image. I did this with the following line:

var txt = document.createTextNode(' '+img.getAttribute('title'));

I’d appreciate your comments on all this.

Regards,
Paul.