This article will guide you on how to build an image slider for wordpress version 3 using jQuery tools script from flowplayer.org.

Most of the code is taken from Drupal scrollable content module, so if you found this article useful don't forget to drop a thank you note for the jQuery tools and Drupal scrollable content module author.

Now let us begin coding.....

FIRST STEP

Download the latest jquery.tools.min.js from flowplayer.org or use the one that drupal scrollable content bundled with.

We need to load jQuery and jQuery.tools script first, this can be done by adding these lines :

In Your theme functions.php add this line:

add_action('init', 'add_slider_script');

function add_slider_script() {
    wp_register_script('jquery_tools', get_bloginfo('template_directory') . '/js/jquery.tools.min.js', array('jquery'), '1.2.5' );
    wp_enqueue_script('jquery_tools');
}

Notice : the path for the jquery.tools.min.js, the code will translate to your_theme_path/js/jquery.tools.min.js thus place the downloaded script to that directory.

Now we need to actually load the script, edit your theme header.php and add these lines :

<?php
 wp_enqueue_script
("jquery");
?>
<?php
 wp_enqueue_script
("jquery_tools");
?>

Notice: you need to add the lines inside tag and before wp_head(); command.

SECOND STEP

In this step we are going to code in the actual code for the slider. Edit the functions.php again and put these lines :

Image resize size for the slider

if ( function_exists( 'add_image_size' ) ) { 
  add_image_size( 'featured-slider', 960, 317,  true );
}

Inline jQuery options for jQuery tools taken from Drupal scrollable content

/**
 * Build javascript code for Scrollable Content
 * 
 * @param: $options: array of scrollable options
 * 
 */
function patriot_build_js_code($options) {
  $js = "jQuery(function() {\n";

  $js .= "jQuery(\"#scrollable_content_" . $options['items'] . "\").scrollable({\n";
  $js .= "  keyboard: " . $options['keyboard'] . ", \n";
  $js .= "  mousewheel: " . $options['mousewheel'] . ", \n";
  $js .= "  circular: " . $options['circular'] . ", \n";

  $js .= "  speed: " . $options['speed'] . ", \n";

  if (!$options['direction']) {
    $js .= "  vertical: true, \n";
  }
  $js .= "})";

  if ($options['navigator']) {
    $js .= ".navigator({\n";
    $js .= "  navi: \"#scrollable_content_" . $options['items'] . "_navi\", \n";
  //$js .= "naviItem: 'a', \n";
    $js .= "  activeClass: 'scrollable_content_active', \n";

    if ($options['history']) {
      $js .= "  history: " . $options['history'] . ", \n";
    }
    
    $js .= "})";
  }

  if ($options['autoscroll']) {
    $js .= ".autoscroll({\n";
    $js .= "  interval: " . $options['interval'] . ", \n";
    $js .= "  autoplay: " . $options['autoplay'] . ", \n";
    $js .= "  autopause: " . $options['autopause'] . ", \n";
    $js .= "})";
  }

  $js .= ";\n";

  $js .= "});";

  return $js;
}

The modified version of slider content builder function taken from Drupal scrollable content module

/**
 * Build javascript code for Scrollable Content
 * 
 * @param: $navigation: boolean (true or false) to build the navigation 
 * @param: $scroll_button: boolean to build scroll button or not
 * @param: $content_text: boolean to build the content text or not
 * @param: $content_header: boolean to build the content header or not
 * @param: $content_body: to build the content body or not
 * @param: $post_limit: Numeric How many content should the function fetch 
 * @param: $cat_id: Numeric The wordpress category id
 */
function patriot_build_slider($navigation, $scroll_button, $content_text = TRUE, $content_header = TRUE, $content_body = TRUE, $post_limit = 5, $cat_id = 1) {
	// grab the post first
	$featured_posts = query_posts('cat=' . $cat_id . '&posts_per_page=' . $post_limit );

	// check for lazy user
	if ($content_text == FALSE && ($content_header == TRUE || $content_body == TRUE)) {
		$content_text = TRUE;
	}
	
	// calculate the class first
	if (($content_text == FALSE && $content_header == FALSE && $content_body == FALSE && $navigation == TRUE) || $navigation == FALSE) {
		$class = ' fullwidth';
	}
      	
  $output =  '';
	$output .= '';
		foreach ($featured_posts as $post) {
  		if ($content_text) {
  			$body = '';
  			if ($content_header) {
  				$body .= 'guid . '">' . $post->post_title . '';
  			}
  			
  			if ($content_body) {
  				$body .= 'guid . '">' . $post->post_content . '';
  			}
  			
  			$body .= '';
  		}
		
			$output .= 'guid .'" title="'. $post->post_title.'">' . get_the_post_thumbnail( $post->ID, 'featured-slider' ) . $body .''; 
		}
	$output .= '';
	
	if ($scroll_button) {
		$output .= '';
		$output .= '';
	}

	if ($navigation) {
		$output .= '
'; } $output .= ''; return $output; }

Now we add the options parameter for the jQuery tools script, add these lines to header.php in the tag and after the wp_head(); command

 $options = array(
   'autoscroll' => true,
   'direction' => 'horizontal',
   'interval' => 1200,
   'speed' => 800,
   'keyboard' => true,
   'mousewheel' => true,
   'circular' => true,
   'navigator' => true,
   'autoplay' => true,
   'autopause' => true,
	 'items' => 'items',
  );
  
  print patriot_build_js_code($options);

THIRD STEP

Now we need to take care of the css for the slider, without it the slider won't work correctly.

Create slider.css and place it to your theme directory with these contents

#slider-header {
  float:left;
  height:317px;
  margin-top:50px;
  overflow:hidden;
  padding-bottom:106px;
  width:960px;
}
#slider-frame {
  width: 960px;
  height: 317px;
  overflow: hidden;
  float: left;
  position: relative;
}
.scrollable_content {
  direction: ltr;
  float: left;
  height: 317px;
  overflow: hidden;
  position: relative;
  width: 960px;
}
.scrollable_content .items {
  clear: both;
  position: absolute;
  width: 20000em;
}

/* single item */
.scrollable_content .items .slide {
  cursor: pointer;
  float: left;
  height: 317px;
  position: relative;
  text-align: center;
  width: 960px;
}
div.horizontal .items div {
  float: left;
}

.scrollable_content .items a {
  display: block;
}
.scrollable_content .items img {
  height: 317px;
  width: 960px;
}

.scrollable_content .slide-body {
  position: absolute;
  left: 0;
  bottom: 0;
 /** change this to your image, for best performance use small black png with alpha transparency
  background: transparent url('images/blacktrans.png') repeat;
**/
  width: 500px;
  height: 60px;
  padding: 8px 10px;
  overflow: hidden;
}
.scrollable_content .slide-body h3 a {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  text-align: left;
  font-family: geneva, Arial, Helvetica, sans-serif;
  height: 18px;
  overflow: hidden;
  line-height: 110%;
  text-decoration: none;
}

.scrollable_content .slide-body p a {
  font-size: 12px;
  color: #fff;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 110%;
  height: 40px;
  overflow: hidden;
  text-decoration: none;
}
ul#scrollable_content_items_navi {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 420px;
  padding: 12px 10px;
         /** change this to your image, for best performance use small black png with alpha transparency
  background: transparent url('images/blacktrans.png') repeat;
        **/
  height: 52px;
  margin: 0;
}

ul#scrollable_content_items_navi li {
  float: left;
  width: 50px;
  height: 50px;
  border: 1px solid #3a3a3a;
  margin: 0 5px;
  overflow: hidden;
  list-style: none;
  list-style-image: none; 
  color: #fff;
  font-size: 10px;
  font-family: Geneva, Arial, Helvetica, sans-serif;
  cursor: pointer;
}

/* custom positioning for navigational links */
a.scrollable_content_prev, a.scrollable_content_next {
  cursor: pointer;
  display: block;
  height: 39px;
  width: 39px;
}

a.scrollable_content_prev {
  position: absolute;
  top: 50%;
  left: 10px;
         /** change this to your image
  background: transparent url(images/slider-left.png) no-repeat center center; **/
}

a.scrollable_content_next {
  position: absolute;
  top: 50%;
  right: 10px;
        /** change this to your image 
  background: transparent url(images/slider-right.png) no-repeat center center; **/
}


/* disabled navigational button */
a.disabled {
  visibility: hidden !important;    
}


/* get rid of those system borders being generated for A tags */
li.scrollable_content_active {
  outline: none;
  border: 1px solid #FFCC00 !important;
}
ul#scrollable_content_items_navi li:hover {
  -moz-outline-style: none;
  border: 1px solid #FF3300 !important;
}

/** generic classes **/
.fullwidth {
  width: 940px !important;
}

FINAL STEP

Now we implement all the codes above for displaying purpose, You can embed the code in this step in different php file depending on your theme. In this article we are going to embed it on header.php.

Build the silder...

<?php
 
$cat_id
= 1; // change this to whatever your category id that you wish to display
print patriot_build_slider(true, true, true, true, true, 5, $cat_id);
?>

Notice: You need to find the category id for the function to work.

HOW TO USE IT?

Now you need to create a "post" and add title, content and category (must be the same category id as the one you set in previous step).

Then upload an image and set it as featured image, by now the slider should show images and if you have more than 1 post in the category, the slider should automatically slide the featured image.

Enjoy...

Notice: the code is implemented in our themes, the one in this article is the untested and modified code, the reason we modified the code is because the one in our theme utilizes GUI configuration for the jQuery options and category selection. If you encounter error in implementing the codes above, drop a comment.