Thumbnail Gallery

<!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>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>

<style type="text/css">
@CHARSET "UTF-8";

body { font-family: Helvetica; font-size: 12px; color: #63665F }

#page { width: 700px; }
#thumbs { padding-top: 10px; overflow: hidden; cursor: pointer; }
#thumbs img, #largeImage { border: 1px solid gray; padding-top: 4px; padding-left: 4px; padding-right: 4px; padding-bottom: 35px; background-color: white; }
#thumbs img { float: left; margin-right: 6px; margin-bottom: 6px; }
#description { background: black; color: white; position: absolute; bottom: 0; padding: 10px; width: 480px; margin: 5px; }
#panel { position: relative; }
</style>

<body>
<div id="page">
<div id="gallery">
<div id="panel">
<img id="largeImage" src="images/image_01_large.jpg" />
<div id="description">Caption here</div>
</div>
<div id="thumbs">
<img src="images/image_01_thumb.jpg" alt="Caption here" />
<img src="images/image_02_thumb.jpg" alt="Caption here" />
<img src="images/image_03_thumb.jpg" alt="Caption here" />
<img src="images/image_04_thumb.jpg" alt="Caption here" />
<img src="images/image_05_thumb.jpg" alt="Caption here" />
<img src="images/image_06_thumb.jpg" alt="Caption here" />
<img src="images/image_07_thumb.jpg" alt="Caption here" />
<img src="images/image_08_thumb.jpg" alt="Caption here" />
<img src="images/image_09_thumb.jpg" alt="Caption here" />
<img src="images/image_10_thumb.jpg" alt="Caption here" />
<img src="images/image_11_thumb.jpg" alt="Caption here" />
</div>
</div>
</div>

<script>
$('#thumbs').delegate('img','click', function(){
$('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
$('#description').html($(this).attr('alt'));});
</script>

</body>
</html>