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>
