Creating WordPress Coda Slider – Part 2

the java script

Now is the time to work the magic. The first thing to do is to add the javascript files to our theme. You will need the following three files in a folder called “js” inside your root of your child theme folder.

• serialScroll
• scrollTo
• coda-slider (this should be a blank js file at this point)

Once these files are in place, add the following to your functions.php file for your child theme.

if( !is_admin()){
 wp_deregister_script('jquery');
 wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"), false, '1.3.2');
 wp_enqueue_script('jquery');
}

add_action( 'template_redirect', 'load_my_scripts' );

function load_my_scripts() {
 wp_enqueue_script( 'jquery.serialScroll', get_stylesheet_directory_uri() . '/js/jquery.serialScroll.js', false, '0.1', false );
 wp_enqueue_script( 'jquery.scrollTo', get_stylesheet_directory_uri() . '/js/jquery.scrollTo.js', false, '0.1', false );
 wp_enqueue_script( 'coda-slider', get_stylesheet_directory_uri() . '/js/coda-slider.js', false, '0.1', false );

}

The first chunk of code is taken directly from Digging Into WordPress.  The second part I figured out with help from the Hybird Support Forums.  It turns out you need to account for child themes when creating paths in your functions.php files.

Once you add this to your functions.php, reload your page and make sure the code is in the head.

If it is, go ahead and open the coda-slider.js file and put the following code into it.

$(document).ready(function () {

 var $panels = $('#utility-before-content .category-slider');
 var $container = $('#utility-before-content #query-posts-3');
 var $scroll = $('#utility-before-content .widget-inside').css('overflow', 'hidden');

 $scroll
 .before('<img src="/wordpress/wp-content/themes/hybrid-slider/images/scroll_left.png" />')
 .after('<img src="/wordpress/wp-content/themes/hybrid-slider/images/scroll_right.png" />');

 var scrollOptions = {
 target: $scroll,
 items: $panels,
 prev: 'img.leftb',
 next: 'img.rightb',
 axis: 'xy',
 duration: 500,
 easing: 'swing'
 };

 $('#utility-before-content').serialScroll(scrollOptions);

});

Along with this javascript, you also need a touch of CSS to make sure that things work as expected.  Add the following CSS to your style.css file (or whatever you call your stylesheet).

.content {
 position: relative;
}

#utility-before-content .widget-inside {
 height: 270px;
 width: 870px;
 overflow: auto;
 overflow-x: hidden;
 position: relative;
 clear: left;
 background: #999;
 margin: 0 auto;
}

#utility-before-content .widget-inside .category-slider {
 padding: 40px;
 height: 190px;
 width: 790px;
}

Please remember widths and heights are relative to your design.  This code is only provided as a starting point.

Here is the video, it ends kinda suddenly, we’ll continue on in part three.