I was originally using a prototype based version, which was fine until I started learning jQuery, then I had to search for an alternative.
Whilst this was easy to find, there were no instructions for the novice on how to put this into Wordpress easily. In this tutorial I’m using Wordpress 2.6.1 (the latest version). You should be able to do this in about 20 minutes with little hassle.
Resources
First things first you need the jQuery javascript library which you can get from http://jquery.com/ the latest version is 1.2.6. I would get the “minified” version as this has had all the unnecessary bits taken out making it faster for the browse to parse.
You then need to get the jQuery lightbox “plugin” from http://leandrovieira.com/projects/jquery/lightbox/.
Installation
So you’ve got your bits, open up the file “jquery.lightbox-0.5.js” and you are going to need to change the image paths to your theme image directory. This will probably be something like “/wp-content/themes/your-theme-name/images/imagename.gif”.
Then open up your FTP Client and upload all the images to that directory. Once you’ve got that far, go back to your browse of choice and login to your blog. You may or may not have a “js” folder in your theme directory, if not create one and upload the jQuery library and the Lightbox Plug-in. Finally upload the CSS file supplied with the lightbox to the root of the theme, or somewhere else if you prefer.
Now login to your Blog click on the “Design” tab then the “Theme Editor” sub tab. We want to edit the “header.php” file.
Note: This will not work if permissions haven’t been setup correctly. If your unable to save the file, go back to your FTP Client and use Chmod to correctly set permissions.
Once your looking at the header.php file we want to include the two Javascript files, then write a little bit of our own. Between the “<head></head>” tags you want to put:
<script type=”text/javascript” src=”<?php bloginfo(’template_directory’); ?>/js/jquery-1.2.6.min.js”></script>
<script type=”text/javascript” src=”<?php bloginfo(’template_directory’); ?>/js/jquery.lightbox-0.5.js”></script>
<link rel=”stylesheet” type=”text/css” href=”<?php bloginfo(’template_directory’); ?>/jquery.lightbox-0.5.css” media=”screen” />
So you’ve now successfuly included all the files needed, the last thing is to add:
<script type=”text/javascript”>
$(document).ready(function()
{
// jQuery LightBox
$(’a[@href$=".jpg"]‘).lightBox();
});
</script>
This will force all links ending with .jpg like the built in Gallery + any others in your posts to use the jQuery Lightbox Gallery.
Hope this helps.
Image from: http://danphilibin.com/flare-wallpapers-now-available/
September 30th, 2008 at 9:36 am
This tutorial doesn’t work.
September 30th, 2008 at 9:33 pm
It does work, maybe you could explain what bit your having a problem with or if you’ve set it up, on what site and I’ll take a look for you
October 1st, 2008 at 2:01 am
how to add other extensions like (gif, png)?
October 1st, 2008 at 6:18 am
All you need to do is add the other file extensions to the last JavaScript like so:
$(’a[@href$=".jpg"]‘).lightBox();
$(’a[@href$=".png"]‘).lightBox();
$(’a[@href$=".gif"]‘).lightBox();
and insert it into the header as discussed above. Hope this helps.
October 1st, 2008 at 7:48 am
yeah works like a chimp
thanks a million. it’s much better than the lightbox of prototype.
you should make it as plugin, it’ll be a good to see such a plugin with many options (animation, opacity, color, …).
thanks again
October 1st, 2008 at 12:28 pm
Your welcome
I may well make it as a plugin, there does seem to be one at the moment that doesn’t work. Hence why I ended up installing it manually.
October 1st, 2008 at 2:53 pm
yeah it doesn’t work well
I tried it. that’s why i tried google and reached your blog
November 16th, 2008 at 2:05 am
Is there are way to make it so that it only works on images with a specific tag on it. In other words, I do not want it to automatically apply to all jpg images, rather only the ones I specify.
Thanks
November 16th, 2008 at 7:32 pm
Thanks for your comment - sure is:
$(’a[@rel*="lightbox"]‘).lightBox();
That will only apply to links with the attribute rel=”lightbox”. Hope that helps.