Galeria de Fotos com Efeito Lightbox

Quer montar uma galeria de fotos com um efeito lightbox? Exemplo prático para ser implantado em sua página sem complicações.

Por | @oficinadanet Programação
Nesta coluna aprenderemos como montar nossa área de fotos com efeito Lightbox.
Este exemplo consiste em 5 fases:

1ª Parte
Criar uma pasta no seu servidor IIS e copiar os arquivos em sua pasta raiz. target="_blank">Clique aqui 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:

Galeria de Fotos com Efeito Lightbox

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

<%
' Descrevendo caminho do seu banco de dados
strCon = "DBQ=c:inetpubwwwrootimgbdBD.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
%>


Mostrando Imagens
<%
'Chamando arquivos para CSS e javascript para utilização do script.
%>








  
    
  
  
    
  
  
    
  
Galeria de Imagens

      
      
<%
'Iniciando variável contador e loop para exibir em colunas
i = 1
Do While Not objRS.EOF
%>
        
        <%
'Define quantidade de colunas
If i = 2 Then
i = 0
Response.Write ""
End If
i = i + 1
objRS.MoveNext
Loop
%>
      
      
    
" rel="lightbox[roadtrip]">Galeria de Fotos com Efeito Lightbox" border="0" width="100"height="80">
Desenvolvido por:
Alexandre de Luccia



<%
objRS.close
%>


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

Galeria de Fotos com Efeito Lightbox

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

Galeria de Fotos com Efeito Lightbox


Observações importantes:
- Você pode alterar as imagens para passar para próxima foto e fechar na pasta images.
- Lembre-se se estiver usando