Posted in the Blog

Create a Slideshow Using Nivo Slider and WordPress Attachments

Note: this post was originally written when I used Nivo Slider on my site. This tutorial is quite old and may not function properly with either new versions of WordPress or Nivo Slider. I would recommend taking a look at the Nivo Slider WordPress plugin.

For the work section of this site the previous theme for this site I wanted a simple slideshow to showcase my design and development work over the years, but also make it very simple to create them as a WordPress post. I was a fan of the functionality of a jQuery add-on called Nivo Slider, and thought that it would work well for what I wanted to achieve if I could incorporate it with WordPress attachments.

The end result is pretty simple: create a post, upload some images and order them, then publish. The images that have been attached to the post will be put into a slideshow which you can modify with a few simple edits to Nivo Sliders options. The sizes of the images also conform to what you have specified in the media settings in the WordPress dashboard, so you should take that into consideration when planning your slideshow.

Let’s take a look at how I’ve set this up for my work portfolio you can set this up.

Note: any reference to this being active on my site no longer apply, this post was written while using another theme which has since been replaced.

Adding jQuery and Nivo Slider to Your Theme

First off, you need to download jQuery and Nivo Slider. I would recommend reading through the usage documentation for Nivo Slider, and maybe building an HTML example to see how it all works.

After downloading and copying the scripts into my theme folder, I added it to the footer right before the closing body and html tags. There are quite a few options available to customize how Nivo Slider acts, try them out and see what works for you. The following code is how I have things setup. Be sure to change the FILELOCATION and DIVNAME in two areas to match up with the path to your scripts as well as the div that your slideshow will be placed within.

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/FILELOCATION/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/FILELOCATION/jquery.nivo.slider.pack.js"></script>

<script type="text/javascript">
	$(window).load(function() {
		var total = $('#DIVNAME img').length;
		var rand = Math.floor(Math.random()*total);
		
		$('#DIVNAME').nivoSlider({
			effect:'fade', //Specify sets like: 'fold,fade,sliceDown'
			animSpeed:800, //Slide transition speed
			pauseTime:8000,
			directionNav:false, //Next and Prev
			controlNav:false, //1,2,3...
			pauseOnHover:false, //Stop animation while hovering
			captionOpacity:1, //Universal caption opacity
			startSlide:rand
		});
	});
</script>

Creating the Function

Once you have the two scripts added into your footer.php file we can create the function need. This can be added into your functions.php file, or directly into the page or post template that you want to use your slideshows.

<?php
	// get all of the images attached to the current post
	function nivo_get_images($size = 'large', $limit = '0', $offset = '0') {
		global $post;
		$images = get_children(
			array(
				'post_parent' => $post->ID,
				'post_status' => 'inherit',
				'post_type' => 'attachment',
				'post_mime_type' => 'image',
				'order' => 'ASC',
				'orderby' => 'menu_order ID'
			)
		);
		if ($images) {
			$num_of_images = count($images);
			if ($offset > 0) : $start = $offset--; else : $start = 0; endif;
			if ($limit > 0) : $stop = $limit+$start; else : $stop = $num_of_images; endif;
			$i = 0;
				foreach ($images as $image) {
				if ($start <= $i and $i < $stop) {
					$img_title = $image->post_title;   // title.
					$img_description = $image->post_content; // description.
					$img_caption = $image->post_excerpt; // caption.
					$img_url = wp_get_attachment_url($image->ID); // url of the full size image.
					$preview_array = image_downsize( $image->ID, $size );
					$img_preview = $preview_array[0]; // thumbnail or medium image to use for preview.
					// This is where you'd create your custom image/link/whatever tag using the variables above.
					// This is an example of a basic image tag using this method.
					echo '<img src="' . $img_preview . '" alt="<?php echo $img_caption; ?>" />';
					// End custom image tag. Do not edit below here.
				}
			$i++;
			}
		}
	}
?>

Adding the Slideshow to Your Template

Once you have created the function, all that’s left to do is add a small line of php into the area in which you want your slideshow to appear. You can set the size of the image by replacing ‘large’ in the example with ‘medium’ or ‘thumb’ and it will resize based on your media settings.

<?php nivo_get_images('large','0','0'); ?>

Once you have all of this done, you should be able to create a new post or page, and when uploading images, drag and drop them into your preferred order, give them title or alt tags, and let the scripts and functions handle the rest.

UPDATE: Styling the Slideshow with CSS

I realized late last night that I completely forgot to add the styling. If you had gone through the usage documentation on the Nivo Slider website you would have gone through this step already. If not, here’s an example of the simple CSS that I use for my slideshow. The third item (#DIVNAME img) is used to prevent all the images from displaying as the page loads, and adds a loading image, which you can replace with your own customized animated GIF.

#DIVNAME-bg {
	margin-top:8px;
	padding:5px;
	background-image:url(PATHTOTHEMEIMAGES/filename.png);
	background-repeat:repeat;
}

#DIVNAME {
	width:620px;
	height:620px;
}

#DIVNAME img {
	display:none;
	background:url(PATHTONIVOIMAGES/loading.gif) no-repeat 50% 50%
}