Hello please help me I am having difficulites creating a rotating image in my homepage

I'm trying to use the jQuery Cycle Lite Plugin in SilverStripe but always get the error "$("#slideshow) is null

1. put jquery.cycle.lite.js and jquery-1.3.2.js in mysite/javascript

2. in Homepage_Controller I have put

function init() {

Requirements::javascript("../../../mysite/javascript/jquery-1.3.2.min.js");
Requirements::javascript("../../../mysite/javascript/jquery.cycle.lite.js");

parent::init();

3. in Homepage.ss I have included the following in the head of the document

<script type="text/javascript" src="mysite/javascript/jquery.cycle.lite.js"></script>
<script type="text/javascript" src="mysite/javascript/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#slideshow').cycle();
});
</script>

I have tried using the jQuery.noConflict (); code but this returns the error $ is not a function.

I have also used the following code :

jQuery(document).ready(function () {
jQuery('#slideshow').cycle();
});

but this returns the error
jQuery("#slideshow") is not a function,

I feel I have tried everything possible to get this to work but it will not, any help will be appreciated!

I'm not entirely sure about this but have you tried switching the two lines:

<script type="text/javascript" src="mysite/javascript/jquery.cycle.lite.js"></script>
<script type="text/javascript" src="mysite/javascript/jquery-1.3.2.js"></script> 

Around so that they're in this order:

<script type="text/javascript" src="mysite/javascript/jquery-1.3.2.js"></script>
<script type="text/javascript" src="mysite/javascript/jquery.cycle.lite.js"></script>

It seems to me that jquery should be included before any jquery plugins.

Hope that helps.

Edit: Although looking at your requirement calls they are in the correct order... can you link to the site your having troubles on that might make things easier?

I think the problem occurs, because you're including jQuery and the cycle plugin twice. Once in the init method, and a second time in your template source-code. Get rid of either one of those and load jQuery first (as jamesg pointed out).

Hi thanks for the advice, unfortunately it didnt work, I have attached the source code and if you could let me know if anything is wrong it would be greatly appreciated (as it is the error messgae $ ("#slideshow is null") is displayed in firebug.

The page can be found at

http://www.srmpromotions.com/

Thanks.

Hey thanks for replying, unfortunately it didnt wotk, I have attached the codes t this reply, if you can find any errors I will really appreciate it, thanks alot.

http://www.srmpromotions.com/

Umm.. It is null, because it doesn't exist? You don't have an element with id="slideshow" in your source. If you want to address items by class, use $(".slideshow"). #slideshow will find the element with the id slideshow

Hi, I have followed your advice and modified the code accordingly (#'slideshow' to '.slideshow') but the same error message occurs, if I remove:

$(document).ready(function()

the error message turns to $('.slideshow').cycle is not a function...I am totally lost as to what is going wrong. I think I have tried pretty much everything! would there be any reason why it is not recognising the function?

1) You still include jQuery and the cycle script twice on your page (http://www.srmpromotions.com/)
2) It won't work when the slideshow div is commented out, as in your page
3) I managed to make it work, by downloading your html source, removed the second jQuery and cycle script inclusion, un-commented the div (with class="slideshow") and added the following:

$(function(){
	$(".slideshow").cycle({fx: 'fade'});
});

/* // the above is equivalent to: 
jQuery(document).ready(function(){
	jQuery(".slideshow").cycle({fx: 'fade'});
});
*/

/* // remove this old code, of course:
 $(".slideshow").cycle({
	fx: 'fade' 
});
*/

What you might want to do:
Get a basic understanding of jQuery (http://docs.jquery.com/Tutorials)
Fix your HTML! Invalid HTML may result in non-working or broken scripts.
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.srmpromotions.com%2F