Galeria de Fotos com Efeito Lightbox, por Alexandre de Luccia

Nesta coluna aprenderemos como montar nossa área de fotos com efeito [B]Lightbox[/B].
Este exemplo consiste em 5 fases:

1ª Parte
Criar uma pasta no seu servidor IIS e copiar os arquivos em sua pasta raiz. [URL link='http://www.oficinadanet.com.br/imagens/conteudos/123/down/arqu.zip']Clique aqui[/URL] para baixar os 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

[CODE]<%
' 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
%>[/CODE]

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/

Ao final da coluna o arquivo .zip completo para download.

Qualquer dúvida entre em contato comigo deixando um comentário.

Abraços!

Alexandre de Luccia

Mario <arte_suave@hotmail.com>

Gostaria de saber com faço para rodar em um servidor externo?
obrigado

Alexandre de Luccia <alexandre.luccia@gmail.com>

Basta mudar a variavel strCon.

Abs!

claudio roney de luccia <crluccia@terra.com.br>

tbem gostaria de saber se vc e meu parente pelo sobre nome tenho quase certeza que sim

Jota <james.lopes@gmail.com>

Gostaria de colocar a legenda das fotos. Como posso fazer isso?

Criei uma nova coluna no Bd chamada legenda, mas não consegui entender o script que monta a DIV com a foto maior para chamar a variável da legenda.

Se puder peço que me ajude e desde já agradeço.

Abs

btuga only <btuga_only@hotmail.com>

Boas...
Tenho uma dúvida, eu já coloquei como voce tem escrito, só que me dá um erro no StrCon, diz que não está declarado...pode me ajudar?

btuga only <btuga_only@hotmail.com>

Desculpe a minha burrice, mas é que estou começando em ASP agora, mudo a váriavel strCon para que nome?

obrigadão