One of my clients asked me to create an ‘image of the week’ page for them using whatever method I thought looked and worked best. I remembered seeing the JavaScript/Ajax tool Lightbox JS in another blog recently and thought that looked pretty cool, and had the capability of showing a slideshow as well, so I got it and installed it on my client’s home page.

It worked great, unless the images were bigger than about 400px on a side. Then Firefox didn’t like it and the ‘close’ button’s functionality was lost (actually the clickable part was just pushed down in the y direction so that you couldn’t get to it to close the image. This problem didn’t occur in IE (to my amazement), just in FF and Opera.

So… back to the drawing board. I really liked the way the script functioned so I went looking for similar ones and came across Thickbox. This is another JavaScript/Ajax tool, it functions nearly identically but for my purposes this one was the better choice because it doesn’t break on large images.

Well, let me clarify – Thickbox is set by default to resize images larger than the current browser window. I tried changing this in the code, but if you don’t use it you can’t scroll up or down to see the rest of the image. So…

I put the code back to its original state and showed the result to my client. He’d originally wanted to show 800px images, too big for Firefox/Opera if I used Lightbox JS and forcing a resize in Thickbox. But he was okay with the resizing and is now happy with the results.

Here’s his page with Thickbox in action. Pretty cool and it really only took about 30 minutes to get it installed and running once I decided to use it.

« »