I'm trying to load a slideshow using Cycle on a page that is loaded via AJAX Dynamic Content in a DIV tag.
<!doctype html>
<html>
<head>
<title>photos</title>
<style type="text/css">
.slideshow {
}
.slideshow img {
padding: 0px;
border: 0px solid #ccc;
padding-top: 20px;
}
</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">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade',
speed: 'slow',
timeout: 0,
next: '#next2',
prev: '#prev2'
});
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style>
</head>
<body>
<div class="nav"><a id="prev2" href="#">Prev</a> <a id="next2" href="#">Next</a></div>
<div class="slideshow"><img src="photos/final concert 2.jpg" width="430" height="605"><img src="photos/kitemusic1.jpg" width="720" height="482"><img src="photos/kitemusic2.jpg" width="720" height="482">
<img src="photos/kitemusic3.jpg" width="720" height="482"><img src="photos/kitemusic4.jpg" width="412" height="719">
<img src="photos/kitemusic5.jpg" width="360" height="719"><img src="photos/kitemusic6.jpg" width="720" height="482"><img src="photos/kitemusic7.jpg" width="720" height="482"><img src="photos/kitemusic8.jpg" width="482" height="720"><img src="photos/kitemusic9.jpg" width="720" height="482"><img src="photos/kitemusic10.jpg" width="720" height="482"><img src="photos/kitemusic11.jpg" width="720" height="482"><img src="photos/kitemusic12.jpg" width="720" height="482"><img src="photos/kitemusic13.jpg" width="720" height="482"><img src="photos/kitemusic14.jpg" width="720" height="482"><img src="photos/kitemusic15.jpg" width="720" height="482"><img src="photos/kitemusic16.jpg" width="720" height="482"><img src="photos/kitemusic17.jpg" width="482" height="720"><img src="photos/kitemusic18.jpg" width="720" height="482"><img src="photos/kitemusic19.jpg" width="720" height="482"><img src="photos/kitemusic20.jpg" width="720" height="482"><img src="photos/kitemusic21.jpg" width="720" height="482"><img src="photos/kitemusic22.jpg" width="720" height="482"><img src="photos/kitemusic23.jpg" width="482" height="720"><img src="photos/kitemusic24.jpg" width="720" height="482"><img src="photos/kitemusic25.jpg" width="720" height="482"><img src="photos/kitemusic26.jpg" width="720" height="541"><img src="photos/kitemusic27.jpg" width="720" height="541"></div>
</body>
</html>
It works on its own. Not when it's loaded with the AJAX though. They show up as images then...one next to the other.