In this tutorial, we are going to install a small photo slideshow with a lightbox into the sidebar of a WordPress blog. This is a great way to add colorful images and interactivity to your site. I am going to use the Slate theme, which is available as a free download from our site. Let’s jump right in.

JavaScript files

To begin with, we are going to be using a JavaScript library called jQuery. JQuery is included in the normal installation of WordPress. In addition, we will be using a jQuery plugin called the jQuery Cycle Lite Plugin. You will need to download the min version, making sure to keep the original file name. Finally, you will need the jQuery lightBox plugin.

Upload jQuery Cycle Lite Plugin

Upload the file jquery.cycle.lite.min.js to /wp-includes/js/. . This is a good place to store any javascript files that you will be using to power features on your blog.

Configure and Upload the jQuery lightBox plugin

After unloading the zip file, upload all the .gif files in the images folder to /wp-content/themes/slate/images/. Open the file jquery.lightbox-0.5.js, in a text editor like notepad. Look for this section of code:

// Configuration related to images
			imageLoading:			'images/lightbox-ico-loading.gif',		// (string) Path and the name of the loading icon
			imageBtnPrev:			'images/lightbox-btn-prev.gif',			// (string) Path and the name of the prev button image
			imageBtnNext:			'images/lightbox-btn-next.gif',			// (string) Path and the name of the next button image
			imageBtnClose:			'images/lightbox-btn-close.gif',		// (string) Path and the name of the close btn
			imageBlank:				'images/lightbox-blank.gif',			// (string) Path and the name of a blank image (one pixel)

Change the paths to include our locations. As an example:

// Configuration related to images
			imageLoading:			'/wp-content/themes/slate/images/lightbox-ico-loading.gif',		// (string) Path and the name of the loading icon

Save these changes. Upload this file to /wp-includes/js/.

Our final step is to copy all the stylesheet information from the file jquery.lightbox-0.5.css and paste it onto the end of the stylesheet style.css, which you can access in the theme editor available through your WordPress dashboard. Remember to include the author’s information–it’s good form and should always be done.

Linking JavaScript files

Using the theme editor in your WordPress dashboard, open the template file header.php. Just before the </head> tag paste this code:

<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-includes/js/jquery/jquery.js"></script>

<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-includes/js/jquery.cycle.lite.min.js"></script>
<script type="text/javascript">
jQuery(function() {
    jQuery('#slideshow').cycle();
});
</script>

<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-includes/js/jquery.lightbox-0.5.js"></script>
    <script type="text/javascript">
	jQuery(function() {
		jQuery('#slideshow a').lightBox({fixedNavigation:true});
	});
    </script>

In this script we are accomplishing several things. First, we are linking our site to the three JavaScript files. Next, we are defining the container that will house our slideshow. In this instance, the container is #slideshow. Lastly, we are defining the linked images that we will be targeting with the lightbox script. Again, in this instance we are targeting linked images in the div #slideshow.

Making the image files

In order for this feature to work, you will need to create the image files that will be displayed in the slideshow and the files that will be displayed in the lightbox. In this example, the smaller slideshow images will be 200px square. The larger images can be whatever size you choose. Here is an example with just one image, one at 200px square, and the other at 320 x 427px:

HTML in the sidebar

I want my slideshow to display images at the top of the sidebar, above the search field. Open sidebar.php and add the following code just below the opening tag <div id="sidebar">:

<div id="slideshow">
	     <a href="<?php bloginfo('template_url'); ?>/images/your_image1.jpg" title=""><img src="<?php bloginfo('template_url'); ?>/images/your_thumb1.jpg" width="200" height="200" border="0" alt="" /></a>
             <a href="<?php bloginfo('template_url'); ?>/images/your_image2.jpg" title=""><img src="<?php bloginfo('template_url'); ?>/images/your_thumb2.jpg" width="200" height="200" border="0"  alt="" /></a>
             <a href="<?php bloginfo('template_url'); ?>/images/your_image3.jpg" title=""><img src="<?php bloginfo('template_url'); ?>/images/your_thumb3.jpg" width="200" height="200" border="0"  alt="" /></a>
             <a href="<?php bloginfo('template_url'); ?>/images/your_image4.jpg" title=""><img src="<?php bloginfo('template_url'); ?>/images/your_thumb4.jpg" width="200" height="200" border="0"  alt="" /></a>
	  </div>

Where your_image and your_thumb are replaced with the file names that you used. If you look at the structure of this html, you see that we have created the div slideshow and filled it with linked images where the destination of the link is the larger image.

Add css to the Stylesheet

Our final step is to give specific dimensions to our div. Open style.css and add:

#slideshow {
        height:  200px;
        width:   200px;
	}

Save your styesheet changes and give your blog a visit.

As a final thought, consider making a donation to the individuals or groups that supply the jQuery plugins. A little bit from a lot of people will make a big difference in their ability to produce more great stuff. Enjoy!