SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Sep 2007
    Posts
    203
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    trying to implement jQuery Cycle Plugin - Help

    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

    HTML Code:
     <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:

    Code:
    /**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. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Are you also including the actual jQuery library?
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Addict
    Join Date
    Sep 2007
    Posts
    203
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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.:
    Code:
    <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.

    Code:
    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)
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •