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>