Galeria de fotos com efeito Lightbox

Neste artigo estudaremos o desenvolvimento de uma galeria de fotos com efeito Lightbox. Este exemplo consistirá em 5 fases:

1ª Parte

Criar uma pasta no seu servidor IIS e copiar os arquivos em sua pasta raiz. Faça o download dos arquivos.

2ª Parte

Criar um banco de dados, em nosso caso Access com o nome de BD.mdb

3ª Parte

Criar uma tabela com o nome de TB_FOTOS com os seguintes campos: id_foto | foto

4ª Parte

Inserir nomes das figuras no seu banco de dados, conforme a figura abaixo:

5ª Parte

Montar a página de exibição, no nosso caso, default.asp

<%
' Descrevendo caminho do seu banco de dados
strCon = "DBQ=c:\inetpub\wwwroot\img\bd\BD.mdb;Driver={Microsoft Access Driver (*.mdb)};"

' Abrindo conexão e record set para chamar informações da Tabela com o nome das fotos.
Set objRS = Server.CreateObject("ADODB.Recordset")
objRS.CursorLocation = 3
objRS.CursorType = 0
objRS.LockType = 1
strSQL = "SELECT * FROM TB_FOTOS"
objRS.Open strSQL, strCon
%>
<html>
<head>
<title>Mostrando Imagens</title>
<%
'Chamando arquivos para CSS e javascript para utilização do script.
%>
<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>
<style type="text/css">
.texto {
font-family: Verdana;
font-size: 10px;
color: #000000;
}
</style>
</head>
<body scroll='auto">
<table width="265" border="0" align="center" cellpadding="15" cellspacing="1" bgcolor="#D4D0C8">
 <tr>
  <td align="center" bgcolor="#F7F5F4"><span class="texto"><strong>Galeria de Imagens</strong></span></td>
 </tr>
 <tr>
  <td align="center" bgcolor="#FDFDFD"><table width="0" border="0" align="center" cellpadding="5" cellspacing="1" bgcolor="#FAF9F8">
   <tr></tr>
   <tr>
<% 
'Iniciando variável contador e loop para exibir em colunas
i = 1 
Do While Not objRS.EOF 
%>
    <td align="center" bgcolor="#D4D0C8" class="texto"><a href="fotos/<%=objRS("foto")%>" rel="lightbox[roadtrip]"><img src="fotos/<%=objRS("foto")%>" border="0" width="100"height="80"></a></td>
    <%
'Define quantidade de colunas
If i = 2 Then 
i = 0 
Response.Write "</TR><TR>" 
End If 
i = i + 1 
objRS.MoveNext 
Loop 
%>
   </tr>
   <tr></tr>
  </table></td>
 </tr>
 <tr>
  <td align="center" bgcolor="#F7F5F4"><span class="texto"><strong>Desenvolvido por</strong>: 
Alexandre de Luccia </span></td>
 </tr>
</table>
</body>
</html>
<%
objRS.close
%>

O resultado da página default.asp é este:

E por fim veremos o efeito em funcionamento ao clicar sobre a imagem:

Observações importantes:

Você pode alterar as imagens para passar para próxima foto e fechar na pasta images.
Lembre-se se estiver usando <iframe> para exibir as fotos esse script não é útil.
Procure não mexer muito nos arquivos localizados na pasta js.

Referências:

http://www.dynamicdrive.com/

Qualquer dúvida entre em contato comigo deixando um comentário. Abraços!

De 0 a 10, o quanto você recomendaria este artigo para um amigo?