asked on

jQuery cycle images not fading

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

anoyes

I don't see anything obvious. Do you get any JS errors? What browser? And is the page available somewhere I can see it?

PIER117

ASKER

IE, Chrome, Firefox

How do I check for JS errors?

http://tiny.cc/MEvKZ

ASKER CERTIFIED SOLUTION

anoyes

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

PIER117

ASKER

Bingo! That was it. Works like a charm now.