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.

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.

3 Responses to “Creating WordPress Coda Slider – Part 2”

  1. Bruno Brant January 6, 2010 at 3:21 pm # Reply

    This “coda-slider.js” has a mistake.

    This:

    $scroll
    .before('')
    .after('');

    Must be:

    .before('')
    .after('');

    I’ve just tooked 50 minutes trying to fix this. =)

    The file at the zip (post part 3) are correct!

  2. patricia June 11, 2011 at 1:44 pm # Reply

    ok! thanks again im trying this 2 step with no sucess… :( i cannot get to load the javascript..well..im not using a child theme. im using my own theme that ive created from scratch..would it be the problem?
    thanks,
    patricia.

    • rusti June 11, 2011 at 8:15 pm # Reply

      It sure will make a difference! The tutorial is only for use with Hybrid!

Leave a Reply