This topic is locked
Com este visualizador de fotos e imagens a pessoa vai passando as fotos clicando nos botões avançar e voltar.
Ao clicar sobre a foto miniaturas, abrirá uma nova janela com a foto tamanho real.
O banco de dados:
Para minha aplicação, eu utilizei uma banco de dados com as seguintes Campos:
ID | ID_Fotos | Foto | Foto1| Foto2
Mas alterando um pouco o Select, daria para mostrar por exemplo todas os links das fotos que foram registradas no BD, utilizando uma tabela por exemplo com os campos:
ID | ID_fotos | Foto
Vele sua criatividade, um pouco de conhecimento em ASP e muita força de vontade..
Todas as minhas fotos em miniatura foram salvas com "small_" na frente do nome da foto. As fotos foram gravadas em uma Pasta chamada "Fotos"
No meu caso, eu mostrava em uma outra página os nomes dos albuns que estavam gravados em uma outra tabela e que continham os seguintes Campos:
ID | ID_fotos | NomeAlbum
Portanto o link destes albuns ficavam:
fotos.asp?id_fotos=<%=rs("id_fotos")%>
Isso encaminhava o visitante para a página Fotos.asp com o ID_fotos correspondente ao album.
O código da página FOTOS.ASP segue abaixo:
Agradecimentos:
Este código Java Script foi retirado do site ScriptFacil.com
O Moderador " xxALExx " da sessão Java Script do WebFórum - Wmonline.com.br por ter elaborado a mudança de links das fotos conforme a foto miniatura é trocada.
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<%
id_fotos = request.querystring("id_fotos")
strConnect = "DRIVER={Microsoft Access Driver (*.mdb)};DBQ=" & Server.MapPath("database/SEUBANCO.mdb")
Set rs = Server.CreateObject("adodb.recordset")
sql="select * from TABELA where id_fotos =" & id_fotos & ""
RS.Open SQL, strConnect, 1, 3
TotalRecs = rs.recordcount
Foto=rs("foto")
Foto1=rs("foto1")
Foto2=rs("foto2")
%>
<table border="0" cellpadding="0" ALIGN="CENTER">
<tr>
<td width="260" height="260" align="center" valign="middle">
<div align="center"><a href="fotos/<%= rs("foto")%>" target="_blank" id=URL><img src="fotos/small_<%= rs("foto")%>" name="fotoGaleria" border="0"></a>
</div>
</td>
</tr>
<tr>
<td width="100%" ALIGN="CENTER">
<form method="POST" name="rotater">
<div align="center">
<script language="JavaScript1.1">
var fotos=new Array()
var exibir=0
// Coloque o nome de suas imagens pequenas aqui !!
<% If not FOTO = "" Then %>
fotos[0]='fotos/small_<%= rs("foto")%>'
<%else%>
<%End if%>
<% If not FOTO1 = "" Then %>
fotos[1]='fotos/small_<%= rs("foto1")%>'
<%else%>
<%End if%>
<% If not FOTO2 = "" Then %>
fotos[2]='fotos/small_<%= rs("foto2")%>'
<%else%>
<%End if%>
var URL=new Array()
// Coloque o link das imagens grandes, que ao clicar nas miniaturas abrirão em uma nova página
<% If not FOTO = "" Then %>
URL[0]='fotos/<%= rs("foto")%>' //coloque aqui o nome usado na primeira imagem da galeria
<%else%>
<%End if%>
<% If not FOTO1 = "" Then %>
URL[1]='fotos/<%= rs("foto1")%>'
<%else%>
<%End if%>
<% If not FOTO2 = "" Then %>
URL[2]='fotos/<%= rs("foto2")%>'
<%else%>
<%End if%>
// Funcao responsavel pela volta das imagens
function imgVoltar()
{
if (exibir>0)
{
window.status=''
exibir--
document.images.fotoGaleria.src=fotos[exibir];
document.getElementById("URL").href=URL[exibir];
}
}
//Funcao resposavel pelo avanco das imagens
function forward()
{
if (exibir<fotos.length-1)
{
exibir++
document.images.fotoGaleria.src=fotos[exibir];
document.getElementById("URL").href=URL[exibir];
}
else window.status='Fim da Galeria'
}
</script>
<input type="button" value="Voltar" onClick="imgVoltar()">
<input type="button" value="Próximo" onClick="forward()">
</div>
</form>
</td>
</tr>
</table>
</body>
</html>
Como demorei muito para conseguir fazer este código, estou disponibilizando para todos que também estiverem precisando, afinal o fórum é um local de ajuda !!!
Com um pouco de força de vontade dá´para melhorar este código e fazer as fotos abrirem em POP-UP, mas isso vai ficar por conta de cada um....
Grande abraço a todos,
Douglas Damame
----------------------
Para uma maior organização desta seção, todas as duvidas relacionadas a este tutorial devem ser tiradas na seguinte sala:-
http://forum.wmonlin...p?showforum=113
Edição feita por: Agente Linhares, 20/03/2006, 16:42.
