Nice Popup Pictures With Javascript

This post will teach you how to make a thumbnail picture pop up right in the middle of the screen with a darker background.



Here's an example for you below ( initial page view and when clicked on picture ):

Inital page

Clicked on the picture with a cat

For this, you need to mark your pictures as a link and use a javascript function in it's reference.

<a href="javascript:enlargeImage('pictures/nicePicture1.jpg');"><img src="pictures/nicePicture1.jpg" /></a>

Next you need to implement the function.

Next we need to define the right styles for our classes with css.

And that's it, easy.

Full source code can be downloaded from ( here )