http://bc-bd.org

Lightbox and Hover can be integrated, although some pople might consider it a little hackish…

First we need the image we’d like to display including a thumbnail. For this example I’ll be using “New York City” (thanks to the creator Paulo Barcellos Jr. for letting me use his image in this demo. Head over to InterfaceLIFT for more …).

After placing the image, the tumbnail and Lightbox on the web server, we need to include Lightbox’s javascript and CSS file into out theme. I simply added the following lines to my theme’s header.php:

<script type="text/javascript" src="/images/lightbox.js"></script>
<link rel="stylesheet" href="/images/lightbox.css" type="text/css" media="screen" />

Please be sure to alter the paths to be valid on your system.

Now I created a Hover with exactly the following settings:

Whenever I use NewYorkCity in a posting it will be replaced with a Lightbox link and a Hover popup. When you click on the link a popup will be displayed.

Please note that Lightbox can not be used together with Websnapr, as you can see in the above example.