Gallery of Doodles in Lightbox 2
April 4th, 2008
NerdStarGamer now has a new Gallery page that features my doodles:
All of the images have been set up as a list of thumbnails which use Lightbox 2 to display large versions.
I spent a little extra time to set up Lightbox on this blog without using a plugin. I’ve been on a steady crusade to get rid of most of my plugins for quite some time. Setting up Lightbox in WordPress was fairly straightforward.
After downloading the Lightbox 2 files, I created a new directory in my template directory called lightbox and dropped all of the lightbox files into it. I then put a function call into the header.php file right before the line that reads <?php wp_head(); ?>.
<head profile="http://gmpg.org/xfn/11">
...some other tags...
<?php AKM_include_lightbox(); ?>
<?php wp_head(); ?>
</head>
The AKM_includ_lightbox(); function is just a short little function that I wrote and put in the functions.php file of my template. Here is the function:
function AKM_include_lightbox() {
$lbDir = get_bloginfo('template_directory') . "/lightbox";
// Echo out some file path variables for images used lightbox JS
$output = '<script type="text/javascript">' . "\n";
$output .= "\t" . 'var tplDir = "' . $lbDir . '";' . "\n";
$output .= '</script>' . "\n";
// Echo links to js and css for lightbox
$output .= '<script type="text/javascript" src="' . $lbDir . '/js/prototype.js"></script>' . "\n";
$output .= '<script type="text/javascript" src="' . $lbDir . '/js/scriptaculous.js?load=effects,builder"></script>' . "\n";
$output .= '<script type="text/javascript" src="' . $lbDir . '/js/lightbox.js"></script>' . "\n";
$output .= '<link rel="stylesheet" href="' . $lbDir . '/css/lightbox.css" type="text/css" media="screen" />' . "\n";
echo $output;
}
This first line of the function sets up a variable that includes the path to the Lightbox files inside my template directory. This is necessary because the lightbox.js file needs to reference the images included in the Lightbox folder. Without this part, the previous, next and close images will not show up because the link will be going to your WordPress uploads directory.
That second chunk of text in the function echos out a small bit of JavaScript into your header that simply declares the variable tplDir and sets it to the path to your LightBox installation. The last chunk of text inserts all of the necessary Lightbox JavaScript and CSS links into your header. I could have written all of this directly into the header.php file, of course, however I felt that my file was getting a bit messy and that this approach was much more clear.
We also need to make a small edit to the lightbox.js file which is going to use that tplDir variable we set. Find the line in the beginning of the file like this (around line 49):
fileLoadingImage: 'images/loading.gif',
fileBottomNavCloseImage: 'images/closelabel.gif',
Simply change those two lines to this:
fileLoadingImage: tplDir+'/images/loading.gif',
fileBottomNavCloseImage: tplDir+'/images/closelabel.gif',
That completes the Lightbox 2 setup in WordPress without using a plugin. Now all you have to do is add the rel="lightbox" tag to any link you want to use Lightbox. For example, if you have a thumbnail image that links to a larger image like this:
<a href="images/full-size-image.jpg"><img src="images/thumbnail" /></a>
To add the Lightbox effect, just add in the attribute like this:
<a rel="lightbox" href="images/full-size-image.jpg"><img src="images/thumbnail" /></a>
Be sure to check out the Lightbox 2 page for more information on what you can do with it.
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
1. Getting Geeky With YSlow | NerdStarGamer
May 29th, 2008 at 4:20 pm
[...] I first set up Lightbox, I wanted to avoid using a WordPress plugin for it, so I cooked up my own method of including it. Most of the work was simply trying to find a way around hard-coding my template directory in it [...]