Este ejemplo muestra como hacer una galería de imágenes a partir de una base de datos que almacena la url de las imágenes.
Vas a necesitar el archivo de variables Adovbs.inc descárgalo
AQUI
La estructura de la bd es bastante simple
IMAGEN
simplemente almacena los datos de la imagen y su nombre fisico.
Consta de 2 módulos, el primero (galeria.asp) nos muestra la galería, con los datos de la imagen y un thumbail de las imágenes (almacenadas en un subdirectorio llamado images) paginando los resultados en bloques y el segundo (showimg.asp) es el que nos muestra la imagen a tamaño real
Para llamar a la imagen a tamaño real usamos javascript, de esta forma abrimos una nueva ventana con el tamaño exacto de la imagen (que sacamos de los campos Heigth y Width de la bd).
Esta es una alternativa valida (y bastante mas sencilla que la mostrada en el articulo http://www.asptutor.com/asp/vart.asp?id=54 que almacena los datos DENTRO de la BD) de mostrar imágenes desde datos almacenados en una bd.
galeria.asp
<!-- #include file="adovbs.inc" -->
<html>
<head>
<title>Galeria de Imagenes de www.asptutor.com</title>
<SCRIPT>
<!--
function displayWindow(url, width, height)
{
var Win = window.open(url,"displayWindow",'width=' + width + ',height=' + height + ',resizable=no,scrollbars=no,menubar=no,status=no' );
}
//-->
</SCRIPT>
</head>
<body bgcolor="#55B5F1">
<div align="center">
<center>
<table border="0" width="100%">
<tr>
<td width="6%"><img border="0" src="http://www.asptutor.com/images/logo1.jpg"></td>
<td width="94%">
<p align="center"><font color="#FFFFFF"><b><big><big><big>Galería de </big></big></big><big><big><big>Imágenes</big></big></big></b></font></td>
</tr>
</table>
</center>
</div>
<font color="#FFFFFF">
<%
set rs = CreateObject("ADODB.Recordset")
Set Conn = Server.CreateObject("ADODB.Connection")
Conn.Open("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.MapPath("/xxxxx/images.mdb"))
rs.CursorType = adOpenKeyset
rs.LockType = adLockOptimistic
sqltxt="SELECT * FROM images"
rs.Open sqltxt,conn
tamanopagina=3
paginaabsoluta=request.querystring("paginaabsoluta")
if paginaabsoluta="" then
paginaabsoluta=1
end if
if paginaabsoluta=1 Then
inicio=1
else
inicio=1+(paginaabsoluta-1)*tamanopagina
end if
fin=inicio+tamanopagina-1
if fin > rs.recordcount then
fin =rs.recordcount
end if
rs.pagesize= cint(tamanopagina)
rs.absolutepage=cint(paginaabsoluta)
contador=1%>
<br>
<div align="center">
<center>
<table border="1" width="66%" bgcolor="#FFFFFF" bordercolor="#3399FF">
<tr>
<td width="50%" align="center" bgcolor="#C0C0C0">Imágenes <font color="#FF0000"><%=inicio%> </font>
a <font color="#FF0000"><%=fin%></font> de un total de
<font color="#FF0000"><%=rs.recordcount%></font></td>
<td width="50%" align="center" bgcolor="#C0C0C0">Página <font color="#FF0000"><%=paginaabsoluta%>
</font> de <font color="#FF0000"><%=rs.pagecount%></font></td>
</tr>
</table>
</center>
</div>
<br>
<% do while not rs.eof and contador <= cint(tamanopagina) %>
<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="4" width="40%" bgcolor="#C0C0C0">
<tr>
<td rowspan="3" width="25%">
<A HREF="javascript:displayWindow('showimg.asp?id=<%=RS("ID")%>',<%=RS("Width")%>,<%=RS("Height")%>)">
<img src="images/<%=RS("Images")%>.<%=RS("Filtype")%>" height=100 width=70 border=0 alt="Pulsa para ampliar"></a></td>
<td width="75%"><font size="1" face="Tahoma">Tipo de archivo: <strong><%= RS("Filtype")%></strong></font></td>
</tr>
<tr>
<td width="75%"><font size="1" face="Tahoma">Alto: <strong><%= RS("Height")%></strong>px
Ancho: <strong><%= RS("Width")%></strong>px</font></td>
</tr>
<tr>
<td width="75%"><font size="1" face="Tahoma">Descripción: <strong><%= RS("Description")%></strong> </font></td>
</tr>
</table>
</center>
</div>
<br>
<%rs.movenext
contador=contador+1
loop%>
<p align="center"><b>Pulsa en la página a la que deseas ir</b> </p>
<table align="center" bgcolor="#ffffff">
<tr>
<%j=0
if cint(paginaabsoluta) <> 1 then
atras=cint(paginaabsoluta)-1
response.write "<td align=center><a href=galeria.asp?tamanopagina="&tamanopagina&"&paginaabsoluta=" & atras & ">"&"<<"&"</a></td>"
j=j+1
end if
for i = 1 to rs.pagecount
j=j+1
if j>20 then
response.write "</tr><tr>"
j=1
end if
if cint(i) = cint(paginaabsoluta) then
response.write "<td bgcolor=#00ff00 align=center>"&i&"</td>"
else
response.write "<td align=center><a href=galeria.asp?tamanopagina="&tamanopagina&"&paginaabsoluta=" & i & ">"&i&"</a></td>"
end if
next %>
<%if cint(paginaabsoluta) <> rs.pagecount then
atras=cint(paginaabsoluta)+1
response.write "<td align=center><a href=galeria.asp?tamanopagina="&tamanopagina&"&paginaabsoluta=" & atras & ">"&">>"&"</a></td>"
end if%>
</tr>
</table>
<p align="center"> </font></p>
<p align="center"> </p>
<p align="right"><font face="Verdana" size="1">Galeria de imagenes de</font> <a href="http://www.asptutor.com" target="_blank"><img border="0" src="http://www.asptutor.com/images/asptutor88x31.gif" align="middle"></a></p>
</body>
</html>
showimg.asp
<html>
<head>
<title>Ver una imagen de la galeria</title>
</head>
<body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0>
<%
Set Conn = Server.CreateObject("ADODB.Connection")
Conn.Open("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.MapPath("/xxxxx/images.mdb"))
strSQL = "Select * from Images where Id = " & Request.QueryString("Id")
Set RS = Conn.Execute(strSQL)
Response.Write "<img src='images/" & RS("Images") & "." & RS("Filtype") & "' border=0 width=" & RS("Width") & " height=" & RS("Height") & ">"
Conn.Close
Set Conn = Nothing
%>
</body>
</html>
podéis ver la galería en funcionamiento pulsando aquí.
La estructura de la bd es bastante simple
IMAGEN
simplemente almacena los datos de la imagen y su nombre fisico.
Consta de 2 módulos, el primero (galeria.asp) nos muestra la galería, con los datos de la imagen y un thumbail de las imágenes (almacenadas en un subdirectorio llamado images) paginando los resultados en bloques y el segundo (showimg.asp) es el que nos muestra la imagen a tamaño real
Para llamar a la imagen a tamaño real usamos javascript, de esta forma abrimos una nueva ventana con el tamaño exacto de la imagen (que sacamos de los campos Heigth y Width de la bd).
Esta es una alternativa valida (y bastante mas sencilla que la mostrada en el articulo http://www.asptutor.com/asp/vart.asp?id=54 que almacena los datos DENTRO de la BD) de mostrar imágenes desde datos almacenados en una bd.
galeria.asp
<!-- #include file="adovbs.inc" -->
<html>
<head>
<title>Galeria de Imagenes de www.asptutor.com</title>
<SCRIPT>
<!--
function displayWindow(url, width, height)
{
var Win = window.open(url,"displayWindow",'width=' + width + ',height=' + height + ',resizable=no,scrollbars=no,menubar=no,status=no' );
}
//-->
</SCRIPT>
</head>
<body bgcolor="#55B5F1">
<div align="center">
<center>
<table border="0" width="100%">
<tr>
<td width="6%"><img border="0" src="http://www.asptutor.com/images/logo1.jpg"></td>
<td width="94%">
<p align="center"><font color="#FFFFFF"><b><big><big><big>Galería de </big></big></big><big><big><big>Imágenes</big></big></big></b></font></td>
</tr>
</table>
</center>
</div>
<font color="#FFFFFF">
<%
set rs = CreateObject("ADODB.Recordset")
Set Conn = Server.CreateObject("ADODB.Connection")
Conn.Open("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.MapPath("/xxxxx/images.mdb"))
rs.CursorType = adOpenKeyset
rs.LockType = adLockOptimistic
sqltxt="SELECT * FROM images"
rs.Open sqltxt,conn
tamanopagina=3
paginaabsoluta=request.querystring("paginaabsoluta")
if paginaabsoluta="" then
paginaabsoluta=1
end if
if paginaabsoluta=1 Then
inicio=1
else
inicio=1+(paginaabsoluta-1)*tamanopagina
end if
fin=inicio+tamanopagina-1
if fin > rs.recordcount then
fin =rs.recordcount
end if
rs.pagesize= cint(tamanopagina)
rs.absolutepage=cint(paginaabsoluta)
contador=1%>
<br>
<div align="center">
<center>
<table border="1" width="66%" bgcolor="#FFFFFF" bordercolor="#3399FF">
<tr>
<td width="50%" align="center" bgcolor="#C0C0C0">Imágenes <font color="#FF0000"><%=inicio%> </font>
a <font color="#FF0000"><%=fin%></font> de un total de
<font color="#FF0000"><%=rs.recordcount%></font></td>
<td width="50%" align="center" bgcolor="#C0C0C0">Página <font color="#FF0000"><%=paginaabsoluta%>
</font> de <font color="#FF0000"><%=rs.pagecount%></font></td>
</tr>
</table>
</center>
</div>
<br>
<% do while not rs.eof and contador <= cint(tamanopagina) %>
<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="4" width="40%" bgcolor="#C0C0C0">
<tr>
<td rowspan="3" width="25%">
<A HREF="javascript:displayWindow('showimg.asp?id=<%=RS("ID")%>',<%=RS("Width")%>,<%=RS("Height")%>)">
<img src="images/<%=RS("Images")%>.<%=RS("Filtype")%>" height=100 width=70 border=0 alt="Pulsa para ampliar"></a></td>
<td width="75%"><font size="1" face="Tahoma">Tipo de archivo: <strong><%= RS("Filtype")%></strong></font></td>
</tr>
<tr>
<td width="75%"><font size="1" face="Tahoma">Alto: <strong><%= RS("Height")%></strong>px
Ancho: <strong><%= RS("Width")%></strong>px</font></td>
</tr>
<tr>
<td width="75%"><font size="1" face="Tahoma">Descripción: <strong><%= RS("Description")%></strong> </font></td>
</tr>
</table>
</center>
</div>
<br>
<%rs.movenext
contador=contador+1
loop%>
<p align="center"><b>Pulsa en la página a la que deseas ir</b> </p>
<table align="center" bgcolor="#ffffff">
<tr>
<%j=0
if cint(paginaabsoluta) <> 1 then
atras=cint(paginaabsoluta)-1
response.write "<td align=center><a href=galeria.asp?tamanopagina="&tamanopagina&"&paginaabsoluta=" & atras & ">"&"<<"&"</a></td>"
j=j+1
end if
for i = 1 to rs.pagecount
j=j+1
if j>20 then
response.write "</tr><tr>"
j=1
end if
if cint(i) = cint(paginaabsoluta) then
response.write "<td bgcolor=#00ff00 align=center>"&i&"</td>"
else
response.write "<td align=center><a href=galeria.asp?tamanopagina="&tamanopagina&"&paginaabsoluta=" & i & ">"&i&"</a></td>"
end if
next %>
<%if cint(paginaabsoluta) <> rs.pagecount then
atras=cint(paginaabsoluta)+1
response.write "<td align=center><a href=galeria.asp?tamanopagina="&tamanopagina&"&paginaabsoluta=" & atras & ">"&">>"&"</a></td>"
end if%>
</tr>
</table>
<p align="center"> </font></p>
<p align="center"> </p>
<p align="right"><font face="Verdana" size="1">Galeria de imagenes de</font> <a href="http://www.asptutor.com" target="_blank"><img border="0" src="http://www.asptutor.com/images/asptutor88x31.gif" align="middle"></a></p>
</body>
</html>
showimg.asp
<html>
<head>
<title>Ver una imagen de la galeria</title>
</head>
<body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0>
<%
Set Conn = Server.CreateObject("ADODB.Connection")
Conn.Open("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.MapPath("/xxxxx/images.mdb"))
strSQL = "Select * from Images where Id = " & Request.QueryString("Id")
Set RS = Conn.Execute(strSQL)
Response.Write "<img src='images/" & RS("Images") & "." & RS("Filtype") & "' border=0 width=" & RS("Width") & " height=" & RS("Height") & ">"
Conn.Close
Set Conn = Nothing
%>
</body>
</html>
podéis ver la galería en funcionamiento pulsando aquí.
Pedro Rufo Martín
Webmaster de www.asptutor.com