Imagens com LightBox

Bom galera, como sempre à pedido de um dos nossos visitantes da UP, hoje trago-lhes um tutorial de como colocar o efeito LightBox nas suas imagens do seu site... A ideia é darem um toque profissional aos vossos sites através do uso de um pequeno script (LightBox), que vos permite dar uma efeito especial na apresentação de uma série de imagens. Eu dei uma personalizada no meu e vou disponibilizar aqui para vocês.. confiram a DEMO abaixo:

Demonstração

Primeiramente faça o download dos arquivos abaixo:

Download
Descompacte os arquivos e coloque na pasta raiz do seu site.

Agora vá na edição da página que deseja conter a galeria e coloque abaixo da tag <header>, a seguinte chamada de arquivos:

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
Agora, para chamar as imagens dentro da pasta "images", coloque o seguinte código com o CSS delas:

<style>
/* Edite a Galeria */
.galeria {
width:300px; /* Edite a largura das imagens no modo "Galeria" */
height:200px; /* Edite a altura das imagens no modo "Galeria" */
margin-left:3px; /* Edite o esparsamento entre elas */
margin-right:3px; /* Edite o esparsamento entre elas */
margin-bottom:10px; /* Edite o esparsamento entre elas */
background: #ccc; /* Edite bg delas */
padding: 5px; /* Edite o tamanho da borda */
border-radius: 10px; /* Edite a curva da borda */
}
.galeria ul{
margin-bottom:10px; /* Edite o esparsamento entre elas */
}
</style>

<ul>
<a href="images/image-1.jpg" rel="lightbox" title="Titulo da Imagem"><img src="images/thumb-1.jpg" class="galeria" /></a>
<a href="images/image-1.jpg" rel="lightbox" title="Titulo da Imagem"><img src="images/thumb-1.jpg" class="galeria" /></a>
<a href="images/image-1.jpg" rel="lightbox" title="Titulo da Imagem"><img src="images/thumb-1.jpg" class="galeria" /></a>
</ul>
Neste caso a imagem que eu quero q apareça está na pasta "images", com o nome "image-1" sendo que o formato dela é "jpg"... portanto a chamada dela ficará assim "images/image-1.jpg", se não quiser dessa maneira é só upar em um servidor e colocar o link lá.

ou se preferir que a pré-visualização seja um texto coloque assim:

<a href="images/image-1.jpg" rel="lightbox" title="Titulo da Imagem">Seu Link</a>
Pronto é isso ai galera, bem fácil espero que gostem e até mais!