Oficina da Net » Programação » ASP

Galeria de Fotos com Efeito Lightbox

Novo aqui no site? Talvez gostaria de assinar o
RSS feed do site?

Publicado em: 04/07/2007
Área: ASP
Visualizações: 14.066
Comentário(s): 8

imprimir envie por e-mail compartilhe
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:



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
%>
<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" cellpadding="15" cellspacing="1" bgcolor="#D4D0C8">
  <tr>
    <td bgcolor="#F7F5F4"><span class="texto"><strong>Galeria de Imagens</strong></span></td>
  </tr>
  <tr>
    <td bgcolor="#FDFDFD"><table width="0" border="0" 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 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 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/

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



Arquivo anexo: Clique aqui para download

Clique aqui para comentar comentários
Preencha o formulário para comentar:
Nome:*

E-mail:* (não será exibido)

Site: (http://)

Comentário:*

Deseja receber os comentários no e-mail?

Anti-spam: (nova imagem)





Nicolas

   - Publicado em: 04/07/2007 - 12:28

Olá Alexandre. Pow bacana esta galeria, vou ver se implemento em php ela, depois disponibilizo uma coluna também, no formato php. parabéns legal mesmo

 

Anderson Villela

   - Publicado em: 04/07/2007 - 16:07

Olá Alexandre, cara muito boa essa galeria, achei muito interessante gostaria que vc colocasse ela também no fórum para os usuários discutirem a respeito, valeu. Anderson - Redação Oficina da Net

 

Miriam

   - Publicado em: 14/09/2007 - 09:47

Fiz uma galeria de fotos com este recurso e funcionou, gostei bastante, mas agora descobri que só está funcionando no mozilla firefox, mas no internet explorer não está funcionando. é assim mesmo?

 

Ayro Luiz

   - Publicado em: 24/10/2007 - 15:02

Alexandre, como faço pra que as fotos saiam com legenda? obg. Ayro

 

Btuga Only

   - Publicado em: 25/03/2008 - 00:49

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?

 

Julio Cesar

   - Publicado em: 18/04/2008 - 23:31

Muito boa a dica vc tem esse mesmo exemplo pra asp.net 2.0 e visual studio com db access???

 

Bento

   - Publicado em: 03/06/2008 - 16:47

Boa Galeria.

 

Felipe

   - Publicado em: 30/07/2008 - 12:57

Por favor vc teria esse exemplo buscando as imagens de pastas aou invés do BD? Preciso fazer uma galeria de fotos em C# mas não sei como... por favor me ajude por e-mail se possíve

 

Autor da matéria
Alexandre de Luccia
» site do autor
Alexandre de Luccia
Analista e Desenvolvedor de Sistemas desde 2005, atualmente desenvolvendo sistemas na Telefônica Brasil, no Centro de Operações Comerciais - COC.

Todas as matérias de Alexandre de Luccia

Publicidade
Seguir o Oficina da Net
RSS

RSS

RSS
Top matérias do mês
Matérias relacionadas
Destaque
Tags

© 2005 - 2009 - Oficina da Net - v 4.0 - É proibida a reprodução parcial ou completa do conteúdo deste site sem autorização por escrito. Resolução adequada: 1024x768px.

Parceiros: Bahia em Foco  |  Blog do Vicente  |  BuscaKi  |  Chongas  |  ClicRN  |  Código Fonte  |  Coletânea de ícones  |  Comunicação Digital  |  Concurso Público  |  Concursos  |  Criação de sites  |  CriarWeb  |  Downloads  |  Fontes Grátis  |  GMasters  |  Hospedagem  |  Hospedagem de sites  |  Ícones  |  Infonet News  |  iParaiba  |  JLAMIM  |  MX masters  |  Notebook  |  Portal Super  |  Profissionais de Web  |  Qualidade Brasil  |  Renan Lima  |  SEO Master  |  Sonhos  |  tutoriais.org  |  WebLivre  |  Zoom Digital