Galeria lightbox com moldura

Este script e documentação da vídeo aula: Aplicando moldura com CSS em galeria lightbox com essa formatação e possivel aplicar molduras as miniaturas de sua galeria lightbox, veja a V.A. e confira.

Para baixar os arquivos da vídeo aula clique aqui!

Formato:

<!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>Galeria UpInside</title>
<style type="text/css">
#box {width:900px; margin:0 auto;}
.gallery {list-style:none; margin:0; padding:0;}
.gallery li {margin:5px; padding:0; float:left; position:relative; width:212px; height:175px;}
.gallery img {width:170px; height:120px; border:0; margin:21px 0 0 21px;}
.gallery span {width:212px; height:175px; display:block; position:absolute; top:0; left:0; background:url(moldura/moldura.png) no-repeat; border:0;}
.gallery a {text-decoration:none;}
.gallery em {color:#333; font-style:normal; text-align:center; display:block; font:12px Tahoma, Geneva, sans-serif;}
</style>
 <link rel="stylesheet" href="scripts/css/lightbox.css" type="text/css" media="screen" />
 <script src="scripts/js/prototype.js" type="text/javascript"></script>
 <script src="scripts/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
 <script src="scripts/js/lightbox.js" type="text/javascript"></script>
</head>

<body>
<div id="box">
<ul>
<li><a href="images/01.jpg" rel="lightbox[roadtrip]"><span></span><img src="images/01.jpg" /><em>Imagem 01 da galeria</em></a></li>
<li><a href="images/02.jpg" rel="lightbox[roadtrip]"><span></span><img src="images/02.jpg" /><em>Imagem 02 da galeria</em></a></li>
<li><a href="images/03.jpg" rel="lightbox[roadtrip]"><span></span><img src="images/03.jpg" /><em>Imagem 03 da galeria</em></a></li>
<li><a href="images/04.jpg" rel="lightbox[roadtrip]"><span></span><img src="images/04.jpg" /><em>Imagem 04 da galeria</em></a></li>
</ul>
</div>
</body>
</html>