Images on websites - Blacked out background?

[Rathji]

I know there are some much smarter web design people here than me so I thought I would toss this out.

I am trying to make a picture so when you click the link/thumbnail it opens in almost a popup type interface with the website in the background kind of blacked out. Seems like it would be a php or js solution, but for the life of me I cant even figure out what to search for to find details.

Can anyone point me in the right direction?

[Regular_John]

Hey Rathji,

What your describing is a 'lightbox' solution. Much like this:
http://www.lokeshdhakar.com/projects/lightbox2/

It typically runs on JS and doesn't need PHP to run, but obviously can be used in conjunction with PHP/ASP if you need. But that's more for dynamic websites.

There's been quite a few 'lightbox' type plugins created for many different javascript libraries (jQuery/Prototype/MooTools) such as these:
http://www.designyourway.net/blog/re...htbox-plugins/

Personally I recommend finding one that runs on jQuery over prototype, I quite like http://fancybox.net/ (although there site seems to be down right now).

Setting them up is ussually pretty easy, you include the JS & CSS files in the header, activate the script & attach a custom class or rel to the links you want to trigger the lightbox with.

tl;dr: Use This: http://www.lokeshdhakar.com/projects/lightbox2/

[psyang]

Originally Posted by Rathji

I know there are some much smarter web design people here than me so I thought I would toss this out.

I am trying to make a picture so when you click the link/thumbnail it opens in almost a popup type interface with the website in the background kind of blacked out. Seems like it would be a php or js solution, but for the life of me I cant even figure out what to search for to find details.

Can anyone point me in the right direction?

Similar to clicking an image in Google Image search? There are js frameworks out there that will do most of the heavy lifting for you. I've been using ExtJS (now Sencha) for a while now, and you can accomplish this by creating an Ext.Window that is set as modal, and populating it with your image.

If you want to do this yourself, the basics steps are:
1) Dynamically create a div tag that covers the browser client area, set to grey and transparent, and place it on top of everything. This is your mask.

2) Create another div tag containing the image on top of the mask, sized how you like.

[Rathji]

Originally Posted by jaydorn

Hey Rathji,

What your describing is a 'lightbox' solution. Much like this:
http://www.lokeshdhakar.com/projects/lightbox2/

....


tl;dr: Use This: http://www.lokeshdhakar.com/projects/lightbox2/

Exactly what I needed, and simple to set up.

Thanks a ton.