P.favor.Ayuda. GAleria sencilla en tablas

potzio · #1 (**permalink**) 12/09/2009, 04:10

Hola.

Estoy haciendo una página web en ASP.
Tendo dos hojas. Reformas.asp y detalle_reformas.asp

En la primera, a través de un recordset recojo todos los registros de Access y los coloco en una tabla, un registro en cada fila, con solamente 2 campos:

1-Reforma realizada(hipervinculo a detalle_reformas.asp)
2-fotografia
Me crea tantas filas como registros tengo en Access.

Ese hipervínculo, lo que hacer es ir a la 2ª hoja, y que me rellene una tabla cono todos los campos, PERO DE ESE REGISTRO SOLAMENTE, no de todos ellos.

Sería como hacer una "ficha" con tolos los detalles de esa reforma en concreto.
En la tabla de Access tengo 4 campos:

1-id........................autonumérico

2-Título...................texto(es el hipervinculo de la 1ª página)

3-foto1....................texto

4-foto2.....................texto

3-foto3....................texto

4-foto4.....................texto

Ahora, el problema que tengo es en la segunda hoja,en detalles_reformas.asp ya que quiero que los 4 campos de fotos(foto1,foto2,foto3 y foto 4) me aparezcan como si fueran miniaturasa dentro de las misma linea de la tabla, en 4 celdas distintas.

Hasta ahí no tengo problemas. Obtengo los datos con un Request.QuerySting.

Paso los datos del Recordset y coloco cada campo en una celda.
Ahora bien, el PROBLEMA que tengo es que en otra fila de la tabla, en una celda quiero insertar una foto, que va a ser la foto1,2,3 o 4 dependiendo de en cuál de ellas haga click.
Osea, lo que quiero hacer es un vínculo en las 4 fotos, y que cuando haga click en cualquiera de ellas , la foto que corresponda a dicha celda, me aparezca en una celda inferior a un tamaño mayor.

Es hacer una especie de GALERIA DE FOTOS.

He probado con hacer un ancla en la celda destino, y como origen las 4 fotos, pero no puedo más.
Se me están acabando las ideas y las neuronas.

Si alquien me puede indicar como vincular cada celda de las 4 fotos a la celda específica para la fotografía destino, le estaría muy agradecido.

Desde Bilbao, España

Potzio
p.d. Perdón por la extensión, pero quería que quedara claro el problema.Gracias.

Adler · #2 (**permalink**) 12/09/2009, 05:19

Hola

Prueba con esto

Código javascript:

Ver original<html>
<head>
<script type="text/javascript">
window.onload = function () {
var elementos = document.getElementById("img").getElementsByTagName("IMG");
    for (var i=0;i < elementos.length; i++)  { 
        //alert(elementos[i].src)
        elementos[i].onclick = function () {document.getElementById("img_grande").innerHTML = "<img src="+this.src+" />";}    
         }
}
</script>
</head>
<body>
<table border="1">
<tr id="img">
<td><img src="./iconos/a.gif" width="20px" height="20px" /></td>
<td><img src="./iconos/b.gif" width="20px" height="20px" /></td>
</tr>
<tr>
<td colspan="2" id="img_grande"></td>
</tr>
</table>
</body>
</html>

EDITO: Se paciente y no dupliques las consultas. Post duplicado

Suerte

potzio · #3 (**permalink**) 12/09/2009, 06:20

Muchas gracias. Voy a probarlo. Pero tengo 1 duda.

getElementById............ésto qué es,en "img" qué tengo que poner, qué imagen

getElementById............ésto qué es,en "img" qué tengo que poner, qué imagen

var elementos = document.getElementById("img").getElementsByTagName("IMG");

Si me lo pudieras explicar un poco te lo agradecería.

Muchas gracias

Adler · #4 (**permalink**) 12/09/2009, 06:56

Hola

Veamos ...

document.getElementById("img") es la id del tr que contendrá las imágenes en miniatura

<tr id="img">
<td><img src="./iconos/a.gif" width="20px" height="20px" /></td>
<td><img src="./iconos/b.gif" width="20px" height="20px" /></td>
</tr>

document.getElementById("img_grande") es la id del td que contendrá la imagen ampliada

<td colspan="2" id="img_grande"></td>

var elementos = document.getElementById("img").getElementsByTagNam e("IMG"); se
usa para sacar todas la imágenes que contiene la id "img"

En resumidas cuentas puedes mantener esos nombres de id o poner los que tu prefieras, esto es solo un ejemplo

Suerte

potzio · #5 (**permalink**) 12/09/2009, 07:11

L unico es que los 4 campos de fotos, foto1, 2, 3 ,y 4 son celdas que cogen la imagen mediante el paso de variables.

El contenido de la celda sería <=%foto1%>, <=%foto2%>,<=%foto3%>,<=%foto4%>.

Entonces, en origen de la imagen qué tengo que poner?

<img src="<=%foto1%>">???????

Adler · #6 (**permalink**) 12/09/2009, 07:33

Hola

No entiendo a que te refieres cuando dices "Entonces, en origen de la imagen qué tengo que poner? <img src="<=%foto1%>">???????"

Suerte

potzio · #7 (**permalink**) 12/09/2009, 10:57

Vamos a ver.

Mediante cígo asp Vbscript:

Los 4 campos de foto los consigo mediantye el paso de una variable por URL.

En la primerapagina.asp introduzco el siguiente código para pasar la variable del "id" a la segundapagina.asp mediante la variable "ruta"

ruta="detalle_reformas.asp?id="&Server.URLEncode(t abla("id")).

En la segunda página lo que hago es una tabla, con 4 celdas para cada foto en una misma linea:

<table>
<tr>

<td><center><img src="<%=tabla("foto1")%>" width="40" height="40" /></center></td>
<td><center><img src="<%=tabla("foto2")%>" width="40" height="40" /></center></td>
<td><center><img src="<%=tabla("foto3")%>" width="40" height="40" /></center></td>
<td><center><img src="<%=tabla("foto4")%>" width="40" height="40" /></center></td>
</tr>

Luego, en otra linea nueva introduzco una sola celda,más grande,que va a ser donde quiero colocar la fotografía en grande.

<tr>
<td width="80%">..........</td>----aquí es donde aparece la grande
</tr>
Entonces, lo que quiero es lo siguiente:

Cuando clicke en una foto pequeña, p.ej, td><center><img src="<%=tabla("foto1")%>" width="40" height="40" /></center></td>, que la misma fotografía me aparezca en la celda más grande, <tr>
<td width="80%">..........</td>.
</tr>.

Entonces, cómo lohago?

Adler · #8 (**permalink**) 12/09/2009, 12:42

Hola

Fijate lo sencillo que es. El caso es intentarlo

Código html:

Ver original<table>
<tr id="img">
<td><center><img src="<%=tabla("foto1")%>" width="40" height="40" /></center></td>
<td><center><img src="<%=tabla("foto2")%>" width="40" height="40" /></center></td>
<td><center><img src="<%=tabla("foto3")%>" width="40" height="40" /></center></td>
<td><center><img src="<%=tabla("foto4")%>" width="40" height="40" /></center></td>
</tr>
<tr>
<td  id="img_grande" width="80%"></td>
</tr>
</table>

Adjuntale el javascript y clickea en cualquier imagen

Suerte

potzio · #9 (**permalink**) 12/09/2009, 13:01

Adler. ahora voy a probarlo.

Te estoy muy agradecido por tu generosidad y paciencia.

Llevo dándole vueltas toda la semana, y es que el Lunes tengo que empezar con esa página, porque si no me atrasaría demasiado.

No creas que no lo he intentado, pero llega un momento en el que me desborda.

Muchas gracias, y aquí estoy para lo que necesites.

potzio · #10 (**permalink**) 12/09/2009, 17:25

Hola de nuevo.

No será por no estar intentándolo, pero el código no me funciona.

Si no es molestia te posteo el código a ver si le encuantras algun fallo.

La conexion dns la llamo miconexion, p.ejemplo.
Base...................nombre para conexion
tabla...................nombre para recordset(en vez de rs).

Echame un cable, por favor.Gracias.

la SQL no sé si está bien o no

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>

<%option explicit
dim base
dim tabla
dim SQL
dim id
dim titulo
id=Request.QueryString("id")
%>

<html>
<head>

<title>detalles_reformas</title>

<script type="text/javascript">

window.onload = function () {

var elementos = document.getElementById("img").getElementsByTagNam e("IMG");

for (var i=0;i < elementos.length; i++) {

//alert(elementos[i].src)

elementos[i].onclick = function () {document.getElementById("img_grande").innerHTML = "<img src="+this.src+" />";}

}

}

</script>

</head>

<body>

<% SET base=Server.CreateObject("ADODB.Connection")
SET tabla=Server.CreateObject("ADODB.Recordset")
SQL="SELECT id,titulo,descripcion,foto1,foto2,foto3,foto4 FROM tabla_reformas where id =' "&id&" ' "
base.open "miconexion"
tabla.open SQL,base,3,3
%>

<table>
<%
DO WHILE NOT tabla.EOF

%>

<tr id="img">

<td width="52" height="40"><center><img src="<%=tabla("foto1")%>" width="40" height="40" /></center></td>

<td width="52"><center><img src="<%=tabla("foto2")%>" width="40" height="40" /></center></td>

<td width="52"><center><img src="<%=tabla("foto3")%>" width="40" height="40" /></center></td>

<td width="52"><center><img src="<%=tabla("foto4")%>" width="40" height="40" /></center></td>
<td width="382"> </td>

</tr>

<tr>

<td colspan="5" id="img_grande" height="500"> </td>

</tr>
</table>

<%
tabla.close
base.close
SET tabla=Nothing
Set base=Nothing
%>

</body>
</html>

Adler · #11 (**permalink**) 13/09/2009, 05:44

Hola

Lo primero es preguntarte ¿te lanza algún error el javascript o el ASP? si no te levanta error, ¿cuando clickeas en alguna
de las fotos no te la muestra ampliada?

Ahora vayamos al código. Si tienes un error en el ASP, será por dos motivos
+ La variable id la estas usando como alfanumérica

SQL="SELECT id,titulo,descripcion,foto1,foto2,foto3,foto4 FROM tabla_reformas where id ='"&id&"'"

cuando has de usarla como numérica, ya que el campo contra la que lo comparas es autonumérico
SQL="SELECT id,titulo,descripcion,foto1,foto2,foto3,foto4 FROM tabla_reformas where id ="&id&""

+ Siguiendo con ASP, el tipo de apertura y cerrojo no me convence demasiado, cambia esto
tabla.open SQL,base,3,3

por esto
tabla.execute(SQL)

+ En cuanto al ciclo, no veo la razón por el que lo usas, puesto el campo id es autonumérico, y solo te va a mostrar un registro

Ya que estamos con el ASP, no es el foro apropiado, pero si ningún moderador lo mueve, decirte que cuando recojas
una variable bien sea por get o post, valídala antes de usarla en el SQL, es decir; tu tienes esto

id=Request.QueryString("id")

para validarla, como quieres que sea númerica puedes hacerlo de dos maneras

1 Haciendo una condicional
if not isNumeric(Request.QueryString("id")) then

2 Usando un función, en este caso con CInt, el valor de la variable se convierte en interger
id=CInt(Request.QueryString("id"))

Suerte

potzio · #12 (**permalink**) 13/09/2009, 15:32

Gracias Adler.

Mañana Lunes lo probaré. He estado toda la tarde en el Hospital.

Hay una cosa que no entiendo, y es lo del ciclo:

"En cuanto al ciclo, no veo la razón por el que lo usas", a qué ciclo te refieres?
No lo entiendo.

Mil gracias.

Adler · #13 (**permalink**) 14/09/2009, 03:59

Hola

Me refiero a DO WHILE NOT tabla.EOF con un if not tabla.eof es suficiente

Suerte

potzio · #14 (**permalink**) 14/09/2009, 12:10

Hola Adler.

El problema que tengo es recoger la variable de URL.

No me la coge. Bueno, creo que n me la coge, porque tb pienso que la SQL me puede estar dando problemas.

Ya he cambiado la variable a numérica, he quitado el Do while, he quitado TAbla.Movenext..................................

Por hoy tiro la toalla, y mañana ya veremos

Gracias y un saludo

Adler · #15 (**permalink**) 14/09/2009, 13:00

Hola

Ya está durando mucho este problema que de ASP en este foro. Así que si no quieres que te lo cierren, mejor que translades el problema a ASP si esto que te voy a decir no funciona. Vamos hacer un bug para ver que es lo que te trae la variable y que si la consulta es lo que se espera

Código asp:

Ver original<&#37; SET base=Server.CreateObject("ADODB.Connection")
SET tabla=Server.CreateObject("ADODB.Recordset")
SQL="SELECT id,titulo,descripcion,foto1,foto2,foto3,foto4 FROM tabla_reformas where id ="&id&""
Response.Write SQL
Response.End()
%>

Suerte

potzio · #16 (**permalink**) 15/09/2009, 10:47

Hola, Adler.

Ya he solucionado el paso de variables,

Ahora voy a meterme de lleno con el código Javascript a ver si me sale el tema de la galería.

Muchas gracias. Te debo una.