Hello All,
I have a carousel set up with sliding images that defaults to the first image when landing on the page.
What I need help with is setting it up so I can link to the second or third image from a different page.
Here is my code, all help is appreciated. Thank you:
Code:<html> <head> <title>Carousel Test</title> <link type="text/css" rel="stylesheet" href="css/style.css" media="screen"> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/jquery.scrollTo-1.4.0-min.js" type="text/javascript"></script> <script src="js/jquery.localScroll-1.2.6-min.js" type="text/javascript"></script> <script src="js/jquery.serialScroll-1.2.1-min.js" type="text/javascript"></script> <script src="js/carousel.js" type="text/javascript"></script> </head> <body> <div id="wrap"> <div id="page_ext"> <div id="page"> <div id="canvas"> <div id="scroll"> <div id="scrollContainer"> <div class="panel" id="cat1"> <div class="foto"> <a href="#"><img src="img/matt_rubin.jpg" onmouseover="this.src='img/matt_rubin_hover.jpg'" onmouseout="this.src='img/matt_rubin.jpg'" border="0"></a> </div> </div> <div class="panel" id="cat2"> <div class="foto"> <a href="#"><img src="img/ann_benjamin.jpg" onmouseover="this.src='img/ann_benjamin_hover.jpg'" onmouseout="this.src='img/ann_benjamin.jpg'" border="0"></a> </div> </div> <div class="panel" id="cat3"> <div class="foto"> <a href="#"><img src="img/andrew_ceisler.jpg" onmouseover="this.src='img/andrew_ceisler_hover.jpg'" onmouseout="this.src='img/andrew_ceisler.jpg'" border="0"></a> </div> </div> </div><!-- scroll --> </div><!-- scrollContainer --> <div id="nav-pos"> <div id="nav"> <ul> <li><a href="#cat1">1</a></li> <li><a href="#cat2">2</a></li> <li class="last"><a href="#cat3">3</a></li> </ul> </div><!-- nav --> </div><!-- nav-pos --> </div><!-- canvas --> </div><!-- page --> </div><!-- page_ext --> </div><!-- wrap --> </body> </html>



Reply With Quote
Bookmarks