Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jul 2009
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts

    jQuery 'cycle' function not working

    Hi,

    Does anyone understand why this isnt working? Tryed the code from the missing manual book to get a slideshow working of the three images listed and it just isnt happening! I feel thick!

    Any help would be appreaciated, thanks.

    ---

    [CODE]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <meta name="keywords" content="TO BE WRITTEN">
    <meta name="description" content="Office.">
    <meta http-equiv="expires" content="0" />
    <meta name="language" content="en" />
    <meta name="distribution" content="global"/>
    <meta name="robots" content="index, follow" />
    <title>Olympic Interiors</title>

    <link rel="stylesheet" type="text/css" href="olympic.css" />
    <script type="text/javascript" src="Scripts/jquery.js"></script>
    <script type="text/javascript" src="Scripts/jquery.cycle.js"></script>

    <script type="text/javascript">
    $(document).ready(function() {


    $('#slideshow').cycle({
    'fade',
    timeout: 3000,
    speed: 500,
    delay: -2000,
    }); // end ready()


    </script>

    </head>
    <body bgcolor="#970E0E">

    <table class="header">
    <tr><td class="headerleft"><img src="Images/olympiclogo.png" width="400" height="100" alt="olympic logo" /></td>
    <td class="headerright"><img src="Images/headerright.png" alt="image right" align="right"/></td></tr>
    </table>

    <div class="subheader"><img src="Images/headerimage.png" alt="image for header" width="1350px" height="20"/></div>
    <div class="menu"><span class="style5">Homepage Profile Contact Us Request a Brochure</span></div>

    <table class="bodytable"><tr>
    <td class="submenu">submenu</td><td class="images">
    <div id="slideshow">images
    <div><img src="Slideshowimages/03D.jpg" width="150px" height="150px" /></div>
    <div><img src="Slideshowimages/04100D25.jpg" width="150px" height="150px" /></div>
    <div><img src="Slideshowimages/08D.jpg" width="150px" height="150px" /></div>
    </div>
    </td><td class="description">description</td>
    </tr>
    </table>


    <div class="footer"><span class="style3">&copy;Copyright 2010</span>
    </div>
    </div>
    </body>
    </html>[CODE]

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Looks like you're missing the brackets for your function, no option for 'fade' and there's a spare comma. Try:

    Code:
    <script type="text/javascript">
    $(document).ready(function() {
    
    
    $('#slideshow').cycle({
    fx:'fade',
    timeout: 3000,
    speed: 500,
    delay: -2000//no comma
    });//end cycle()
    
    }); // end ready()
    
    
    </script>

  • Users who have thanked SB65 for this post:

    Jonathan1 (10-25-2010)

  • #3
    New Coder
    Join Date
    Jul 2009
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts
    yup that worked, thank you.

    In the missing manual example there was no line that said end cycle however.

    Ta!

  • #4
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question

    I am having a similar issue where the first image loads, but there is not scroll effect. Any help would be appreciated. Thank you for your time. Here is my code:

    <script type="text/javascript" src="http://www.domain.com/_include/js/jquery.cycle.lite.1.0.js"></script>


    <script type="text/javascript">
    $(function() {
    $('#slideshow').cycle({
    fx: 'fade',
    speed: 'slow',
    timeout: 4000,
    });
    });


    </script>

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    I'd suggest removing that trailing comma just to be sure:

    Code:
    <script type="text/javascript">
    $(function() {
    $('#slideshow').cycle({
    fx: 'fade',
    speed: 'slow',
    timeout: 4000,
    });
    });
    
    </script>
    You are including jQuery as well as the cycle.js?

    If this doesn't make any difference can you give a link to your page?

  • #6
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the response, but that did not seem to work. I have tried including jQuery as well as cycle. I have also added most of the js files in that directory, but still no effect. May I pm the link?

  • #7
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Yes, fine.


  •  

    Posting Permissions

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