Expanding Thumbs

HTML & CSS
1

No, it’s not a medical condition it’s a question. I’m not actually sure if it should be posted here or in the JS section or whatever as I’m not sure what technology will create the solution.

On my site I have four image thumbs running across the middle:
http://simonpaulcreative.com/

Now I don’t want to reformat them or alter them in any way, but when clicked on I’d like each image to expand into a mini window within the main window - Just like when one clicks on an image in someones photo album on Facebook. It would also be good if I had the ability to add a caption. So just to be clear, I don’t want it to open in a separate browser window or tab.

I’m using Dreamweaver at the moment but only to hand code HTML/CSS. I don’t have any understanding of JS (yet).

Any advice will be gratefully received.
Cheers,
simon

2

Yes, you really need JavaScript for that. It’s pretty easy to use a pre-made script, though. Here’s one I like:

3

Thanks Ralph, I’ve not used JavaScript before, but I’ll certainly give it a go. I was thinking of using CSS and absolute positioning to position the large pics off screen, and then change their coordinates on clicking the small thumbs, but I had no idea how lol.

4

If you do a search on CSS lightbox or modal, you’ll get quite a few CSS-only solutions.

Here’s one: http://www.cssplay.co.uk/menu/cssplay-radiobox.html

Most of them are not compatible with legacy browser versions, however, so JS might be a better solution.

5

Here are some other CSS versions I’ve bookmarked in the past:

http://thinkvitamin.com/design/how-to-create-a-valid-non-javascript-lightbox/
Demo: http://www.growldesign.co.uk/projects/lb/

http://www.visibilityinherit.com/code/pure-css-lightbox.php

http://playground.deaxon.com/css/lightbox/

6

Cheers for that Ralph, I was starting to get a bit daunted by the JavaScript, don’t think I’m quite ready for JS yet.
The first CSS looks promising, and it works back to IE6.

Thanks again,
simon