Lightbox Mother Bitches!

Post by **tandino** » June 6th, 2011, 20:56

A quick question for the web geniuses amongst us. I'm looking to create a light box style effect for a website I'm working on whereby when a punter clicks on an image it opens a larger version of that image on the same page, but darkens the background. My question is thus: Is it possible to include textual information on said image as it opens up. Basically it's for a section of a site where clicking actors' images will open a larger version of that image and include information from their biographies. I've done google fu and it only seems to lead me to standard lightbox scripts for images alone and possibly a caption.

Any thoughts? Ideally I'd like to avoid using pop ups too. Any help will be gratefully received and rewarded with a bummin gof your choice (or an alternative reward, should you deny the bumming.

Post by **deject** » June 6th, 2011, 21:19

It's entirely possible, but it probably requires some PHP or AJAX knowledge, of which I have essentially none. I'm guessing you just need to have your script load up a div containing the text you want to show in the lightbox, erm, box.

Stoat · Post by **Stoat** » June 6th, 2011, 21:26

Can you not just repurpose one of the ones with a caption? It sounds like the feature you want is there, it just needs positioning and styling differently.

Post by **tandino** » June 6th, 2011, 22:34

Stoat wrote:Can you not just repurpose one of the ones with a caption? It sounds like the feature you want is there, it just needs positioning and styling differently.

You know what Toast, you're probably right. Maybe I shouldn't be so ambitious... I'll give it a crack anyway. Deej, I possess limited PHP and no AJAX skills, so a re-purposing might be the best option.

Post by **Grimmie** » June 6th, 2011, 23:21

I PRESENT TO YOU, THE ANSWER: JQUERY

I've not used it myself, but we use it on our sites at work.
You just stick a reference to a javascript file (a JQuery Library) in the head, and then bung the code, example HTML, provided CSS and Images into your site.

http://colorpowered.com/colorbox/

Post by **ProfHawking** » June 7th, 2011, 7:08

yep, jquery all the way for this.
load up jquery, then my personal fav would be fancybox (but colorbox is probably much the same). just have a hidden div with the content you want to show, and get fancybox to open it in a lightbox when you click a link or something.
alternatively if you want to keep your page code light you coulf have the bio on a different page, and pull it in dynamically with fancybox. that way they only load it if they want to view it.
jqueryui dialog controls may also be worh a look.