View unanswered posts
View active topics
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: Select all
<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>
