Oficina da Net Logo

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 Pular para comentários
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. 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
Comentários
Carregar comentários