How to add Lightbox

The lightbox image add-on is already packed and ready to use with my new theme Blogvaria. However including this to your existing theme shouldn’t take to long. Start by downloading the original source code from Lokesh Dhakar’s website. Unzip the archived files and upload them to your theme folder:

../yourtheme/css/ (1 file)
../yourtheme/images/ (10 files)
../yourtheme/js/ (4 files)

Then open up your header.php file in your theme folder and add the following lines somewhere between <head> and </head>:

<!-- Include the Lightbox Magic -->
<link rel="stylesheet" href="<?php echo bloginfo('template_directory') ?>/css/lightbox.css" type="text/css" media="screen" />
<script src="<?php echo bloginfo('template_directory') ?>/js/prototype.js" type="text/javascript"></script>
<script src="<?php echo bloginfo('template_directory') ?>/js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="<?php echo bloginfo('template_directory') ?>/js/lightbox.js" type="text/javascript"></script>

Then to apply the magic see my post about the Blogvaria plugins (and add-ons).

You should also open ../yourtheme/js/lightbox.js and look for the following lines (62 and 63):

var fileLoadingImage = "images/loading.gif";
var fileBottomNavCloseImage = "images/closelabel.gif";

To make sure it works with all browsers and various rewrite rules you should edit the URI’s from relative to absolute. In plain English this means that you add http://mysite.com/wp-content/themes/yourtheme/ just before images/… on both occurrences.