Malsup Cycle Won't Work
Malsup Cycle Won't Work
OK, I'm new to jQuery so excuse the ignorance. I downloaded and installed the cycle .jquery.cycle.all.2.74.js and jquery.cycle.min.js and set up the code like on the example:
<head>
<style type="text/css">
.slideshow { margin: 0px 50px 0px 0px;
width: 713px;
height: 478px;
position: relative;
padding: 0px;
text-align: left;
clear: left;
float: right; }
.slideshow img { display: none }
.slideshow img.first { display: block }
</style>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script>
<!-- initialize the slideshow when the DOM is ready -->
<script type="text/javascript">
$(function() {
$('.slideshow img:first').fadeIn(2000, function() {
$('.slideshow').cycle();
});
});
</script>
</head>
<body>
<div class="slideshow">
<img src="images/index_images/green.jpg" width="713" height="478" class="first"/>
<img src="images/index_images/print.jpg" width="713" height="478" />
<img src="images/index_images/mail.jpg" width="713" height="478" /></div>
</body>
This works: http://sustainableprintandmail.com/index1.html
When I try and change the link to the local js files though, it stops working - example:
<head>
<style type="text/css">
.slideshow { margin: 0px 50px 0px 0px;
width: 713px;
height: 478px;
position: relative;
padding: 0px;
text-align: left;
clear: left;
float: right; }
.slideshow img { display: none }
.slideshow img.first { display: block }
</style>
<!-- include jQuery library -->
<script type="text/javascript" src="jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="jquery.cycle.all.2.74.js"></script>
<!-- initialize the slideshow when the DOM is ready -->
<script type="text/javascript">
$(function() {
$('.slideshow img:first').fadeIn(2000, function() {
$('.slideshow').cycle();
});
});
</script>
</head>
I also found it worked better if I put the class styles in the head and not on a separate CSS file. Any thoughts to what's wrong?