jQuery 'cycle' function not working

Jonathan1

10-25-2010, 07:08 PM

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">©Copyright 2010</span>
</div>
</div>
</body>
</html>[CODE]

SB65

10-25-2010, 07:25 PM

Looks like you're missing the brackets for your function, no option for 'fade' and there's a spare comma. Try:

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

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

}); // end ready()

</script>

Jonathan1

10-25-2010, 07:40 PM

yup that worked, thank you.

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

Ta!

theman27

11-30-2010, 04:14 PM

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>

SB65

11-30-2010, 04:58 PM

I'd suggest removing that trailing comma just to be sure:

<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?

theman27

11-30-2010, 07:14 PM

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?

SB65

11-30-2010, 07:21 PM

Yes, fine.