Simple Slideshow for Wordpress

Admittedly I don't know Wordpress very well, so you are welcome to take this with a grain of salt. I wanted a slideshow plugin that could use all existing media plus media that a user uploaded to their blog post landing pages. I did not want to create tags for slide shows etc. I did not want the user to have to deal with gallery vs. upload vs. library vs. stashing images in some other random place.The idea was to be as dead simple but to change the user process as little as possible.

Enter the jQuery. There are lots of great jQuery plugins to do slide shows. I used the jQuery Cycle Plugin. Markup is straight forward- just put a bunch of images into a div and use .cycle(). My approach was to grab all the images in a post, hide them, and add them into the jQuery Cycle div. Not much to it. I used a custom field to enable the slide show if the user wanted it and then they could just add as many images to their post as they liked.

The downside is if you have images on your post that you do not want in the slideshow. Adding a class on the images  to filter by would be easy enough, but again my goal was simplicity. Also this is not going to be too happy if there are multiple slideshows.

<?php
// Transform images to slideshow if custom field has been set
if (get_post_meta($post->ID, 'Use Slideshow', TRUE)) { ?>
<script type="text/javascript" src="/js/jquery.cycle.js"></script>
<script>
(function($) {  
  // Taken from http://brandonaaron.net/blog/2007/06/17/jquery-snippets-outerhtml/
  $.fn.outerHTML = function(s) {
    var p = document.createElement('p');
    var c = this.eq(0).clone();
    p.appendChild(c[0]);        
    return (s) ? this.before(s).remove() : p.innerHTML;
  }  

  $(document).ready(function () {
    // Find images and move them into the slideshow div
    $('#post-<?php the_ID(); ?> img').each(function () {    
      $(this).hide();
      var html = $(this).outerHTML();        
      $('#slideshow').append(html);   
    });  
    // Start the slideshow
    $('#slideshow').cycle({fx: 'fade'});  
  });  

})(jQuery);
</script>
<div id="slideshow"></div>
<?php } ?>