What is the way to load an image on top of your webpage using a seethrough layer?

Question

check this webiste:

http://www.ramziarabi.com/portfolio/art-portfolio/

when you click on an image it opens itself on top of the webpage without hiding it or opening new page. I'm assuming this is done by JavaScript, but can someone explain how? provide some code I can use to do that?

Answer 1

It's very simple to do those these days with open source plugins.

The one they are using on that site is LightBox, which can be found here.

http://leandrovieira.com/projects/jquery/lightbox/

One that I like to use is called prettyPhoto and here is a link with GREAT examples and instructions

http://www.no-margin-for-errors.com/projects/prettyPhoto-jquery-lightbox-clone/

Good luck and enjoy!

Answer 2

Do a search for Javascript Lightbox, there are many out there with easy to use examples to get it up and running.