I recently wanted to add some jQuery javascript to my website and it's pretty easy to do once you get the correct syntax down.

First, I added the javascript file to my theme directory and included it in my theme by adding the line:

scripts[] = js/example.js

to my theme's .info file

Inside example.js you can execute jQuery code after the onLoad event by using the following syntax:

(function($) {
    $(document).ready(function() {
        // insert code here
    });
}(jQuery));

Orbit Image Slider

For example, to add the Orbit Image Slider to your website you could:

Add the jquery.orbit-1.2.3.min.js to your theme and include it in your .info file. Then create a Javascript file named o.js in your theme and include it in your .info file.

In o.js you could put the code to initialize the image slider:

(function ($) {
    $(window).load(function() {
        $('#featured').orbit({
            animation: 'horizontal-push',    // fade, horizontal-slide, vertical-slide, horizontal-push
            animationSpeed: 600,             // how fast animations are
            timer: true,                     // true or false to have the timer
            advanceSpeed: 5000,              // if timer is enabled, time between transitions
            pauseOnHover: false,             // if you hover pauses the slider
            startClockOnMouseOut: false,     // if clock should start on MouseOut
            startClockOnMouseOutAfter: 1000, // how long after MouseOut should the timer start again
            directionalNav: true,            // manual advancing directional navs
            captions: false,                 // do you want captions?
            captionAnimation: 'fade',        // fade, slideOpen, none
            captionAnimationSpeed: 800,      // if so how quickly should they animate in
            bullets: false,                  // true or false to activate the bullet navigation
            bulletThumbs: false,             // thumbnails for the bullets
            bulletThumbLocation: '',         // location from this file where thumbs will be
            afterSlideChange: function(){}   // empty function
        });
    });
})(jQuery);

Then include the orbit-1.2.3.css in your theme's .info file by adding the line:

stylesheets[all][] = css/orbit-1.2.3.css

Then create a new block where you want your image slider to appear, and use this as the HTML

<div id="featured">
    <a href="/example"><img alt="" src="/files/images/example.jpg" /></a><a href="example2"><img alt="" src="/files/images/example2.jpg" /></a>
</div>