First time I met lightbox effect while working on Joomla! I though it would be cool to have something like that in WP. But I couldn’t find anything in plugin directory. Finally on Polish WP forum I found post about wp-lightbox2-pl. Although that plugin didn’t work in my WP install ( I guess because it is translated into Polish) I managed to find way to original one :). You can get it here.

To use it in post you need to go to code view. There is tab lightbox2. You need provide url to original image and thumbnail, specify width and height of thumbnail. You can also add caption, title and name of group of pictures if you have entire gallery. And voile. You can see result on poppies ;).

poppies

Then I changed a little style.css to have better effect when picture is enlarged. Namely I removed background and added borders on right and bottom of image. I also created new class because I wanted to keep default shadow background on images which don’t use lightbox effect ;).

Here is original piece of code:

img
{
background:url(img/shadow.gif) no-repeat right bottom;
padding:4px 10px 10px 4px;
border-top:#eee 1px solid;
border-left:#eee 1px solid;
}
a img
{
background:none;
border:none;
padding:0;
background:url(img/shadow.gif) no-repeat right bottom;
padding:4px 10px 10px 4px;
border-top:#eee 1px solid;
border-left:#eee 1px solid;
}

and code I have now:

img.normal
{
background:url(img/shadow.gif) no-repeat right bottom;
padding:4px 10px 10px 4px;
border-top:#eee 1px solid;
border-left:#eee 1px solid;
border-bottom: none; /* special for ‘beloved’ IE */
border-right: none; /* as above : ) */
}
img
{
background:none;
padding:4px 4px 4px 4px;
border:#eee 1px solid;
}
a img
{
background:none;
padding:4px 4px 4px 4px;
border:#eee 1px solid;
}

And done :).