Ever been on a site and see a thumbnail image that, when you click on it, pops up a bigger version of the picture right in the middle of your screen? It's not a window, it's just the image. Usually there's a little X in the top right or simply clicking the image itself makes it go away.

That's what I'm trying to do. I have snippets to pop up a window but that's kind of ugly and unprofessional anymore. I'd like to do what looks sleek and classy. Obviously it's possible since it's becoming ubiquitous. Anyone have some snippets of code I could use to do this? Thanks!

Lightbox 2 (the original, requires Prototype with Scriptaculous)
Lightbox for jQuery
Lightbox for YUI
Lightbox for Dojo Toolkit

Originally Posted by wayfarer07

Lightbox 2 (the original, requires Prototype with Scriptaculous)
Lightbox for jQuery
Lightbox for YUI
Lightbox for Dojo Toolkit

Thank you. But...

Idiot questions:

1) What is Prototype?

2) What is Scriptaculous?

Can you post the solution once you find out? It will be helpful for lot of people.
I can use the same code snippet as well.

Thanks

Prototype is a JavaScript framework. Scriptaculous is its user interface library.

Well, I've put the code for Lightbox on the site but now I'm having problems. The images don't show up even though I've linked them properly in the JS files (../images/close.gif). Not sure what's up. The overall popup function works but the buttons aren't there and it's pretty worthless without the "close" button.

Any ideas?

paths in a JS file should be considered to be relative to the HTML document, not the JS file. Just make sure everything is correct according to this.

Originally Posted by wayfarer07

paths in a JS file should be considered to be relative to the HTML document, not the JS file. Just make sure everything is correct according to this.

Ah! Thanks. Fixed it. The one last problem I have is that there's a purple line around the image. How do I get rid of that?

Fixed the last problem. Site is 100% functional.