Solved

jQuery cycle images not fading

Posted on 2009-03-28
4
1,092 Views
Last Modified: 2012-05-06
I'm trying to set up a slide show using the Cycle plugin: http://www.malsup.com/jquery/cycle/begin.html

The page loads and only one image displays but the effect does not happen.  The script I'm testing with does not fade.  Nothing happens.  I'm thinking there has to be a problem with my code.

Any ideas on what is wrong?
<!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>
	<title>SIYOL</title>
	<meta http-equiv="content-type" content="text/html;charset=UTF-8" />    
	<script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
    
	<style type="text/css" >
	.pics {  
    height:  200px;  
    width:   200px;  
    padding: 0;  
    margin:  0;  
    position: relative;
} 
 
.pics img {  
    padding: 15px;  
    border:  1px solid #ccc;  
    background-color: #eee;  
    width:  200px; 
    height: 200px; 
    top:  0; 
    left: 0 
} 
	
	</style>
	<script type="text/javascript">
	    $(document).ready(function() {
	        $('#s1').cycle('fade');
	    });
</script> 
	</head> 
	<body>
	<div id="s1" class="pics"> 
    <img src="images/01.jpg" width="200" height="200" /> 
    <img src="images/02.jpg" width="200" height="200" /> 
    <img src="images/03.jpg" width="200" height="200" /> 
</div> 
	
	</body>
</html>

Open in new window

0
Comment
Question by:PIER117
  • 2
  • 2
4 Comments
 
LVL 16

Expert Comment

by:anoyes
ID: 24011171
I don't see anything obvious.  Do you get any JS errors?  What browser?  And is the page available somewhere I can see it?
0
 
LVL 1

Author Comment

by:PIER117
ID: 24011218
IE, Chrome, Firefox

How do I check for JS errors?

http://tiny.cc/MEvKZ 


0
 
LVL 16

Accepted Solution

by:
anoyes earned 125 total points
ID: 24011437
I think I found your problem.  The cycle plugin requires jQuery v. 1.2.6 or higher, but you've got v 1.2.3.  Try upgrading your version of jQuery and see if that solves the problem.

RE checking for JS errors, in Firefox at least you can grab either the Web Developer (https://addons.mozilla.org/en-US/firefox/addon/60) or Firebug (https://addons.mozilla.org/en-US/firefox/addon/1843) plugins, and in IE there's the Microsoft Script Debugger (http://www.microsoft.com/downloadS/details.aspx?familyid=2F465BE0-94FD-4569-B3C4-DFFDF19CCD99&displaylang=en)
0
 
LVL 1

Author Closing Comment

by:PIER117
ID: 31563955
Bingo!  That was it.  Works like a charm now.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
javascript form submition 2 21
Html date format 9 20
Two decimal 5 25
Looking for solution to pass data to 3rd-party web platform? 4 24
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

679 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question