The issue

I have added a jQuery content slider (Coda Slider 2.) to my Wordpress template page however it breaks (just the text "loading" seems).

Demos

I have provided live good examples here to determine my code for action:

Broken slider Working Slider

What I have attempted

I have attempted replacing the dollar sign for "jQuery" during my templates mind but with no success.

<!--Slider-->
<!-- Begin Stylesheets -->
    <!--<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory') ?>/js/coda-slider/stylesheets/reset.css" type="text/css" media="screen" />-->
            <!--Commented out because it's already called previously.-->
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory') ?>/js/coda-slider/stylesheets/coda-slider-2.0.css" type="text/css" media="screen" />
<!-- End Stylesheets -->

<!-- Begin JavaScript -->
    <!--<script type="text/javascript" src="<?php bloginfo('stylesheet_directory') ?>/js/coda-slider/javascripts/jquery-1.3.2.min.js"></script>-->
    <script type="text/javascript" src="<?php bloginfo('stylesheet_directory') ?>/js/coda-slider/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="<?php bloginfo('stylesheet_directory') ?>/js/coda-slider/javascripts/jquery.coda-slider-2.0.js"></script>
    <script type="text/javascript">
        jQuery().ready(function() {
            jQuery('#coda-slider-1').codaSlider(
            {autoSlide: true, 
            autoHeight: false, 
            autoSlideStopWhenClicked: true, 
            autoSlideInterval:4000,
            dynamicArrows: false,
            dynamicTabs: false}
            );
        });
     </script>
<!-- End JavaScript -->

I'd greatly appreciate any help.

Use Firebug with Opera, or perhaps in Chrome or Safari or IE8, make use of the developer tools to check on for JS errors on demo that does not work. At this time, the JS reducing library is not loading due to a 404.

You're focusing on coda-slider-1, however your container div is coda-slider-wrapper (unless of course I am missing something apparent here). This could certainly mess some misconception. Try:

$(document).ready(function() {
            $('div#coda-slider-wrapper').codaSlider(
            {...
            );
        });


(unrelated) You could also consider pushing your actions into an exterior js document. Also, the most well-liked approach to placing javascript is thru wp_enqueue_scripts, that you simply do an add_action to inside your functions.php. Only a thought )

@songdogtech is certainly right, furthermore - 404 not found error. Firebug is the friend.

update
To guarantee the correct insertion of javascript in to the header, wordpress first registers after which enqueues any needed scripts. The right way to place custom scripts would be to add_action to wp's built-in techniques. Placing scripts by hand works, but there's an opportunity you might hinder any native script embeds. Anyway: it is really an example for that thickbox jquery wordpress plugin, and it is generic enough for any js. You can include this for your theme's functions.php script, in order to a custom wordpress plugin, or whatever your situation might be.

// register scripts 
if (! function_exists(thickbox_register){
function thickbox_register() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery','http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js');
    wp_register_script( 'thickbox', 'path to thickbox'.thickbox.js, 'jquery');
    }  
}   
add_action('init', 'thickbox_register');

//print the now registered scripts 
if (! function_exists(thickbox_enqueue){
function thickbox_enqueue() {
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'thickbox' );
    }  
}
add_action('wp_print_scripts', 'thickbox_enqueue');

check it out by doing this

$(function(){
         $('#coda-slider-1').codaSlider({
                autoSlide: true, 
                autoHeight: false, 
                autoSlideStopWhenClicked: true, 
                autoSlideInterval:4000,
                dynamicArrows: false,
                dynamicTabs: false
         });
});