<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var slideImages = $('#slideshow > img');
slideImages.hide().filter(':first').show();
$('#imagealt p').text(slideImages.filter(':first').attr('alt'));
$('ul.imagelist li a').click(function(){
if (this.className.indexOf('current') == -1) {
slideImages.hide();
slideImages.filter(this.hash).fadeIn(500);
$('ul.imagelist li a').removeClass('current');
$(this).addClass('current');
$('#imagealt p').text(slideImages.filter(this.hash).attr('alt'));
}
return false;
});
});
</script>
<style type="text/css">
body {
text-align:center;
}
#slideshow {
position: relative;
margin:0 auto 5px auto;
background: #fff;
width: 360px;
height: 258px;
border: 1px solid #eee;
}
#slideshow img {
position: absolute;
top: 5px;
left: 5px;
z-index: 10;
background: #fff;
}
#imagealt {
background:#eee;
width:360px;
margin:0 auto 5px auto;
border-top:1px #fff solid;
border-bottom:1px #fff solid;
}
#imagealt p {
padding:5px;
}
.imagelist {
width:360px;
margin:0 auto;
}
.imagelist li {
display: inline;
}
.imagelist li a, .imagelist li a:visited {
display: block;
float: left;
background: #eee;
padding: 4px 8px;
margin-right: 1px;
color: #426579;
text-decoration: none;
}
.imagelist li a:hover, .imagelist li a:visited:hover {
background: #5b7e91;
color: #fff;
}
.imagelist li a.current {
background: #426579;
color: #fff;
}
</style>
</head>
<body>
<div id="slideshow">
<img id="image1" src="images/01.jpg" alt="Image 1" />
<img id="image2" src="images/02.jpg" alt="Image 2" />
<img id="image3" src="images/03.jpg" alt="Image 3" />
<img id="image4" src="images/04.jpg" alt="Image 4" />
<img id="image5" src="images/05.jpg" alt="Image 5" />
</div>
<div id="imagealt"><p></p></div>
<ul class="imagelist">
<li><a class="current" href="#image1">1</a></li>
<li><a href="#image2">2</a></li>
<li><a href="#image3">3</a></li>
<li><a href="#image4">4</a></li>
<li><a href="#image5">5</a></li>
</ul>
</body>
</html>