Trying to implement jQuery Cycle Plugin - Help

JavaScript
1

Hi,

I am trying to implement the jQuery Cycle Plugin (with Transition Definitions) found at JQuery Cycle Plugin.

I am a newbie at this and I really could use some help. I will put my code below. I am sure I am missing some steps, but as I’ve never worked with this before, no clue what I’m missing.

My page can be viewed at: Oaknoll

Anyway, what I’ve done so far is:

I copied the two java script files into my root files:

jquery.cycle.all.min.js
jquery.easing.1.1.1.js

I copied the code from the super basic demo: JQuery Cycle Plugin - Basic Demo


 <div class="slideshow">
		<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
		<img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
		<img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
		<img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />
		<img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" />
	</div>

and pasted the css into my css page:



/**slideshow**/

.slideshow {  
    height:  232px;  
    width:   232px;  
    padding: 0;  
    margin:  0;  
} 
 
.slideshow img {  
    padding: 15px;  
    border:  1px solid #ccc;  
    background-color: #eee;  
    width:  200px; 
    height: 200px; 
    top:  0; 
    left: 0 
}

What am I missing??

Thanks for any help you can provide.

Sarb

2

Are you also including the actual jQuery library?

3

Am guessing I did not, cause I don’t know what that is. Would it be in the js files that are saved in the root folder?

4

jQuery is the library that the jQuery Cycle plugin hooks in to and extends.

You can either download a copy of the JS from the jQuery website, or have it hosted on a CDN e.g.:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

You’ll need to make sure that when JavaScript files are included they are executed in the right order, so that a dependency is loaded before it is required.

In any case where you use a jQuery plugin for example, you’ll want to include the actual jQuery library first.

I just had a quick look and it looks like the Cycle and Easing plugins are not being loaded (probably because the path to them is wrong) i.e.


GET http://www.sitesbysarah.com/DesktopModules/Rotator/script/jquery.cycle.all.min.js?v2.73 404 (Not Found)
GET http://www.sitesbysarah.com/DesktopModules/Rotator/script/jquery.easing.1.1.1.js 404 (Not Found)