Anthony Shapley » Javascript Archives – Anthony Shapley http://www.anthonyshapley.co.uk Search Engine Optimisation & Pay Per Click Mon, 10 Oct 2011 07:46:54 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 jQuery Lightbox on WordPress – Simple install guide http://www.anthonyshapley.co.uk/jquery-lightbox-on-wordpress-simple-install-guide/ http://www.anthonyshapley.co.uk/jquery-lightbox-on-wordpress-simple-install-guide/#comments Wed, 20 Aug 2008 17:32:02 +0000 Anthony http://www.anthonyshapley.co.uk/?p=469 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/

]]> http://www.anthonyshapley.co.uk/jquery-lightbox-on-wordpress-simple-install-guide/feed/ 17