[jQuery] Cycle Multiple elements
I'm trying to figure out how to make the code below cycle though the
images, and make a li have class active then it matches the slide
image. Any help would be great.
<!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" />
<title>Front Slide Show</title>
<!--Call jQuery-->
<script type="text/javascript" src="assets/scripts/jquery-1.3.2.js"></
script>
<script type="text/javascript" src="assets/scripts/
jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.fade').cycle({
fx: 'fade',
speed: 50,
timeout: 2000
});
});
</script>
<style>
#content{
width:750px;
height:800px;
margin-left:auto;
margin-right:auto;
margin-top:auto;
margin-bottom:auto;
}
#gallery{
width:550px;
height:300px;
margin-left:0;
}
#thumbnails{
width:200px;
height:300px;
}
#slide-info{
background:url(assets/images/slide-info.png) repeat-x;
height:40px;
width:550px;
position:relative;
top:-40px;
color:#FFFFFF;
}
#slide{
height:300px;
width:550px;
}
.active{
border:1px thin #FF0000;
}
</style>
</head>
<body>
<div id="content">
<div id="gallery" class="fade">
<div id="slide">
<img src="assets/images/image1.png" height="300px"
width="550px" alt="" >
<div id="slide-info">This is Information on this slide</
div>
</div>
<div id="slide">
<img src="assets/images/image2.png" height="300px"
width="550px" alt="" >
<div id="slide-info">This is Information on this slide
image 2</div>
</div>
<div id="slide">
<img src="assets/images/image3.png" height="300px"
width="550px" alt="" >
<div id="slide-info">This is Information on this slide
image 3</div>
</div>
</div>
<div id="thumbnails" class="fade">
<ul>
<li class="active"><img src="assets/images/thumbnail-
image1.png" alt="" /></li>
<li><img src="assets/images/thumbnail-image2.png"
alt="" class="active" /></li>
<li><img src="assets/images/thumbnail-image3.png"
alt="" class="active" /></li>
</ul>
</div>
</div>
</body>
</html>