Conheça o Plugfeed | » Início » Programação » ASP » Galeria de Fotos com Efeito Lightbox
Conheça o Plugfeed | » Início » Programação » ASP » Galeria de Fotos com Efeito Lightbox -->
 
Avaliação: | Publicado em: 05/07/2007
Galeria de Fotos com Efeito Lightbox
Alexandre de Luccia Analista e Desenvolvedor de Sistemas. Cursando Análise e Desenvolvimento de Sistemas no IBTA


Galeria de Fotos com Efeito Lightbox

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

Arquivos anexos ao artigo

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
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
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?
Desculpe a minha burrice, mas é que estou começando em ASP agora, mudo a váriavel strCon para que nome?


obrigadão
Poxa eu não concigo acompanhas esses codigos preciso de ajuda para criar um simples album de fotos para um site
Muito bom este site, ajuda e muito a galera que quer fazer um site em Asp, com galeria de fotos forum, musica,cadastro ,valeu msm, a vcs que postam estes codigos para nós leigos muitissimo obrigado!!
Não funcionou, fiz exatamente como descreveu
Más houve um erro queira saber porque quando vou roidar

sa uma olhada
Microsoft OLE DB Provider for ODBC Drivers error '80004005'

MicrosoftODBC Microsoft Access DriverGeneral error Unable to open registry key 'Temporary (volatile) Jet DSN for process 0x4ec Thread 0x7e0 DBC 0x29308bc Jet'.

/teste/LightBox/img/Default.asp, line 18
objRS.Open strSQL, strCon porque?