This uses Google's copy of the 
jQuery library. So we don't have to keep a copy of it.
twitter
flickr
facebook
Equipment
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Slideshow</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3");
google.load("jqueryui", "1.7");
</script>
</head>
<body>
</body>
</html>
You need something for our script to play with inside the html. We are going to use an image tag with a an id of harness.
Add this into your body of html:
<h1>My Slideshow</h1> <img id="harness" />
The $(document).ready( --- stuff here ---); is asking jQuery to run stuff for you when the html document is ready.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Slideshow</title>
<style type="text/css">
#harness {
display: none;
}
</style>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3");
google.load("jqueryui", "1.7");
</script>
<script type="text/javascript">
function hello () {
return "Hello World";
};
var greeting = function () {
return "Greetings World";
};
var msg = hello;
$(document).ready( function () {
alert( greeting() );
});
</script>
</head>
<body>
<h1 id="title">Slideshow</h1>
<img id="harness" src="http://danm.ucsc.edu/eban/uploading/2009_09_11_3430.jpg"/>
</body>
</html>