I’m fairly new to the jquery-powered slideshow, but have found several easy-to-use slideshow plugins that have really been fun to use.
I’ve used the plugin on a client’s static site, but wanted to figure out a way to have a jquery plugin, specifically Nivo Slider (because I really like it), integrate with WordPress in a non-obtrusive way.
That said, there is already a WordPress plugin for Nivo Slider, but you have to use a photo uploader on the sidebar, and I’m really particular about NOT confusing my clients, some of whom are scared to death of computers and the web 
I really just wanted a way for a client to be able to add a new post, upload a photo from the standard photo uploader, select a category, and have their photo added to the slideshow. No muss, no fuss…and no extra instructions.
As I was thinking about how to get a post photo to show up automatically, I thought about a plugin for WordPress that I already use quite frequently, The Attached Image. This great little plugin allows you to pull the first photo from your content and do a variety of things with it in your theme templates. I love it especially for adding thumbnails to article lists and the like, but I thought it might serve my purpose here as well.
You can see the working version at Waltrich.com, a great client who sells lawn chair webbing as well as old school aluminum webbed lawn chairs.
First, I created a slideshow category under Posts > Categories, so that a user could assign this category to the post.
Next, I double checked the category ID for use in my template ( Category ID 3 in this case), and added the following code.
<div id="slider"><?php $recent = new WP_Query("cat=3&showposts=100"); while($recent->have_posts()) : $recent->the_post();?><?php the_attached_image('img_size=full', $recent); ?><?php endwhile; ?></div><!--/slider-->
The slider id is called in the javascript and the WordPress query, “recent” is asking for the latest 100 (add your own number here) posts in the slideshow category.
The attached image code asked for the full sized image in the post, and displays each one from the loop.
After you’ve gotten this code installed, make sure you follow the usage instructions found on Nivo Slider’s website. You can use the following code in your header (inside the head tag) if you like. It’s a pretty basic install really.
<link rel="stylesheet" href="yourdomain.com/nivo-slider.css" type="text/css" media="screen" />
<script src="yourdomain.com/jquery-1.4.2.min.js" type="text/javascript"></script><script src="yourdomain.com/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect:'sliceDown', //Specify sets like: 'fold,fade,sliceDown'
slices:15,
animSpeed:500,
pauseTime:5000,
startSlide:0, //Set starting Slide (0 index)
directionNav:false, //Next & Prev
directionNavHide:false, //Only show on hover
controlNav:false, //1,2,3...
controlNavThumbs:false, //Use thumbnails for Control Nav
controlNavThumbsFromRel:false, //Use image rel for thumbs
controlNavThumbsSearch: '.jpg', //Replace this with...
controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
keyboardNav:true, //Use left & right arrows
pauseOnHover:false, //Stop animation while hovering
manualAdvance:false, //Force manual transitions
captionOpacity:0.8, //Universal caption opacity
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){} //Triggers after all slides have been shown
});
});
</script>
Style to taste, and VOILA! If you have any issues with either The Attached Image or Nivo Slider, they have extensive documentation and help for you. I’m not a guru for either, so forgive me if my help is slow in coming or ill-informed.