Just as a follow up to this in case any one else has trouble with jQuery and the Cycle.lite, I finally got it working.
It seems it was a conflict between jQuery and prototype over the $ shortcut for calling jQuery.
I had to change Banal's code snippet
$(function(){
$("#slideshow").cycle({fx: 'fade'});
});
to this
jQuery(document).ready(function() {
jQuery("#slideshow").cycle({fx: 'fade'});
});
That got rid of the conflict between jQuery and prototype js libraries. Just a quick mention of that the "Q" in jQuery is capital. On a *nix system this will not work if that's lowercase as *nix is case sensitive. Don't ask how long it took me to figure that one out.
So my working code ended up being...:
In mysite/code/HomePage.php file I added this
class HomePage_Controller extends Page_Controller {
public function init() {
parent::init();
Requirements::javascript("mysite/javascript/jquery-1.3.2.min.js");
Requirements::javascript("mysite/javascript/jquery.cycle.lite.js");
}
}
And in my themes/Blackcandy/templates/HomePage.ss file I added this at the bottom -
<script type="text/javascript" src="mysite/javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="mysite/javascript/jquery.cycle.lite.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#slideshow").cycle({fx: 'fade'});
});
</script>
Then in the CMS for the Home page I added the following HTML
<div id="slideshow">
<a href="link1/"><img src="assets/image1.jpg" /></a>
<a href="link2/"><img src="assets/image2.jpg" /></a>
<a href="link3/"><img src="assets/image3.jpg" /></a>
</div>
Hopefully that helps someone out. The trick was to use Firebug to debug the javascript using the console.
I also found a really cool link for working with jQuery along the way: http://encosia.com/2009/09/21/updated-see-how-i-used-firebug-to-learn-jquery/