Need help, Image Cycler, trying to cycle 3 jpeg images.

Need help, Image Cycler, trying to cycle 3 jpeg images.

Hello,

I am completely new to JQuery, but I think it's fascinating stuff. I spent the better part of last night trying to wrap my head around the basics, but I was unable to get an image cycle plugin working.

As far as I know, I am in possession of the necessary elements to make the image cycler run: those being the "jquery-1.2.3" javascript file, and the "jquery.cycle.all" file, which I obtained from this link: http://www.malsup.com/jquery/cycle/download.html

Samples can be seen at this link: http://www.malsup.com/jquery/cycle/

On the surface, it seemed easy enough, but in my lack of programming experience (I am primarily CSS layout if anything) I was unable to get the plugin working. I looked at the source code for a few pages with examples, but still could not crack it.

So I am here asking for help because I really need to get this functional within the next 24 hours, else I'll have to scrap the whole thing due to time constraints.. hopefully someone can help.

I'll attach a sample of code below, and hopefully someone can help me figure out how to make this go.

Here is exactly what I am trying to do... I want the 3 images inside the div labeled "Increase-panel-top" to cycle through repeatedly. I am trying to use the fade/ pause on hover plugin:

$('#s3').cycle({
fx: 'fade',
speed: 300,
timeout: 3000,
next: '#s3',
pause: 1
});

that's it.

My images are placed in a local images folder in the site root.

Major thanks to anyone who can help me make sense of this and get it working.. you would surely be a life saver.

-Sean


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="verify-v1" content="CJHeoT9H/XLqdnTBMHsP20fVvo1TVPwusDFcNWWdbpc=" />

<style type="text/css">

body {
   margin-left: 0px;
   margin-top: 0px;
   margin-right: 0px;
   margin-bottom: 0px;
   background-image: url(images/gradient-background.jpg);
   background-repeat: repeat-x;
}
    #container {
        width: 958px;
        margin-right: auto;
        margin-left: auto;
        overflow: hidden;
    }
    #Top {
        width: 786px;
        height: 160px;
        background-image: url(images/Top.jpg);
        float: left;
    }
#topline-blue {
   background-color: #010E5D;
   height: 12px;
}


#Increase-panel-top {
        height: 301px;
        width: 786px;
        float: left;
}



    #wrapper
    {
        width: 786px;
        overflow: hidden;
    }

   .pics { 
    height:  301px; 
    width:   786px; 
    padding: 0; 
    margin:  0; 
}

.pics img { 
    padding: 0px; 
    background-color: #eee; 
    width:  786px;
    height: 301px;
    top:  0;
    left: 0
   }

   
-->
</style>
<script type="text/javascript" src="jquery.js">   
    $('#s3').cycle({
    fx:     'fade',
    speed:   300,
    timeout: 3000,
    next:   '#s3',
    pause:   1
});</script>
<script type="text/javascript">
</script>


</head>

<div id="topline-blue"></div>



<div id="container">


   
    <div id="wrapper">
   

   

  <div id="Top"></div>
  <div id="Top-nav">
     
 
  </div>
  <div id="Increase-panel-top" class="pics">
    <img src="images/revolve-test1.jpg" width="786" height="301" />
    <img src="images/revolve-test2.jpg" width="786" height="301" />
    <img src="images/revolve-test3.jpg" width="786" height="301" />
    </div>
 



</div>

</div>



</body>
</html>