abrir imagen en ventanita

Dundee · #1 (**permalink**) 10/10/2008, 02:16

Hola gente quiero hacer una cosilla que se como hacerla con php pero prefería dar un poco de descanso a la bd y tirar del Javascript ,el problema es que javascript todavía lo tengo muy verde. Quería hacer una cosa sencillita que es pinchar en una imagen y que se abra una ventanita con la misma imagen algo más grande, he estado mirando algunos manuales que tengo de javascript pero no me sale. Por ahora he hecho esto.

Esta es la página view_picks.php que se abrirá como ventanita (eso si funciona,es decir se abre).

Código:

<script language="javascript" type="text/javascript">
imagen=document.getElementByName('pick');
document.write(imagen);
</script>

Este es el enlace con php que abre la ventanita y la función que se encarga de ello

Código:

function show_img() {
window.open("view_picks.php" , "ver imagen" , "width=320,height=300,scrollbars=NO") 
}
<a href='javascript:show_img()'> 
<img src='users/images/".$_SESSION['adds'][$i]['AdId']."$sufijo".$photo."' border='0' alt='ampliar' name='pick'/>
</a>

Resultado: Se me abre una ventana vacía ¿se le puede pasar la imagen de algún modo?. Por favor sean compresivos que no controlo casi nada el javascript.

Un saludo y gracias de antemano

David · #2 (**permalink**) 10/10/2008, 06:58

Puedes tener un tag <img> dentro de lo que llamas "ventanita", cambiar su src y su height y width. Para cambiar el src, un ejemplo:
http://www.forosdelweb.com/f13/como-...amente-632779/

Dundee · #3 (**permalink**) 10/10/2008, 07:13

Cita:

Iniciado por David el Grande

Puedes tener un tag <img> dentro de lo que llamas "ventanita", cambiar su src y su height y width. Para cambiar el src, un ejemplo:
http://www.forosdelweb.com/f13/como-...amente-632779/

GRACIAS por la respuesta ante todo ,pero creo que no me he explicado bien, haber yo se que con una etiqueta <img > puedo mostrar una imagen , el tema es que la imagen YA EXISTE , lo que yo quiero es pinchar en una imagen y que se abra una ventanita que musetre ESA MISMA IMAGEN . Eso lo puedo hacer con una nueva consulta a la Bd con php pero es lo que quería evitar.

Un saludo y gracias

David · #4 (**permalink**) 10/10/2008, 07:24

Y creo que te sirve entonces lo que te comenté:

Código html:

Ver original<!-- img dentro de la "ventanita" -->
<img id="ampliar" src="nada.jpg" alt="texto" />
<!-- img donde muestras la imagen -->
<img id="original" src="imagen.jpg" alt="texto" />

Código javascript:

Ver originaldocument.getElementById("ampliar").src = document.getElementById("original").src;

Y cambiar los atributos height y width para ampliar o reducir.

Dundee · #5 (**permalink**) 10/10/2008, 09:43

DAvid el Grande pillo el tema pero no me sale. Entiendo que el valor del src de la imagen principal se le pasa a el src de la imagen que se abrirá en la ventanita y es genial es justo lo que necesito para no tener que volver ha hacer otra consulta a la Bd, pero algo debo estar haciendo mal.

Código:

<script language="javascript" type="text/javascript">
function ampliar_img() {
document.getElementById("ampliar").src = document.getElementById("pick").src;
}
</script>
<title>Documento sin t&iacute;tulo</title>
</head>

<body>
<script language="javascript" type="text/javascript">
ampliar_img();
</script>
<img id="ampliar"  src='' alt="ampliada" width='170'  height="170"/>

En src lo he dejado en blanco porque supongo que lo de nada.jpg era solo un ejemplo tuyo, de todas formas si pongo cualquiercosa.jpg tampoco me funciona.

Un saludo y mil gracias

David · #6 (**permalink**) 10/10/2008, 09:45

Es que estás tratando de acceder al elemento antes de que se cargue, prueba a usar el evento onload:

Código javascript:

Ver originalwindow.onload = function() {
   ampliar_img();
}

Dundee · #7 (**permalink**) 10/10/2008, 09:51

Cita:

Iniciado por David el Grande

Es que estás tratando de acceder al elemento antes de que se cargue, prueba a usar el evento onload:

Código javascript:

Ver originalwindow.onload = function() {
   ampliar_img();
}

Bueno lo he probado y tampoco me funciona de este modo con window.onload, pero de todas formas ¿como dices que intento acceder al elemento antes de que cargue?, no entiendo, se supone que yo pincho encima de una imagen YA CARGADA y se abre una ventanita que la muestra más grande ¿como que tiene que cargar?.
Perdón si meto la pata pero no lo pillo.

un saludo y gracias

David · #8 (**permalink**) 10/10/2008, 10:05

Fíjate que la llamada a ampliar_img la tenías antes del tag <img>, por lo que se ejecutaba antes de que esta fuera creada

.

¿Puedes poner la página completa?.

Dundee · #9 (**permalink**) 10/10/2008, 10:15

Cita:

Iniciado por David el Grande

Fíjate que la llamada a ampliar_img la tenías antes del tag <img>, por lo que se ejecutaba antes de que esta fuera creada

.

¿Puedes poner la página completa?.

Si claro que puedo pero en realidad la imagen forma parte de una función php, por eso te pongo el cacho en el que la imagen es cargada perfectamente.

Código:

<? 

if ($photo=chek_pick( $_SESSION['adds'][$i]['AdId'])) {
			 
echo "<tr><td><a href='operations/viev_picks.php?AdId=".$_SESSION['adds'][$i]['AdId']."&pos=$pos' >
<a href='javascript:show_img()'> 
<img src='users/images/".$_SESSION['adds'][$i]['AdId']."$sufijo".$photo."' border='0' alt='ampliar' id='pick'/>
			</a>
			</td>
			</tr>";
					
			}
	?>

Y este es el código de la ventanita

Código:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<script language="javascript" type="text/javascript">
function ampliar_img() {
document.getElementById("ampliar").src = document.getElementById("pick").src;
}
</script>
<title>Documento sin t&iacute;tulo</title>
</head>

<body>

<img id="ampliar"  src="cacuni.jpg" alt="ampliada" width="170"  height="170"/>
		
<script language="javascript" type="text/javascript">
   
  ampliar_img();
  
</script>
</body>

en ampliar_img() ; también he probado con onload y no me funciona.

un saludo y mil gracias

David · #10 (**permalink**) 10/10/2008, 10:18

No tienes un tag <img> que tenga el id "pick".

Dundee · #11 (**permalink**) 10/10/2008, 10:23

Cita:

Iniciado por David el Grande

No tienes un tag <img> que tenga el id "pick".

Quizas no se vea muy bien pero si lo tengo

Código:

<img src='users/images/".$_SESSION['adds'][$i]['AdId']."$sufijo".$photo."' border='0' alt='ampliar' id='pick'/>

Gracias de nuevo

David · #12 (**permalink**) 10/10/2008, 10:24

Coloca el código de la página completa (no el PHP sino el HTML generado), será más fácil, y mira la Consola de Errores de tu navegador para saber qué está pasando.

Dundee · #13 (**permalink**) 10/10/2008, 10:31

Cita:

Iniciado por David el Grande

Coloca el código de la página completa (no el PHP sino el HTML generado), será más fácil, y mira la Consola de Errores de tu navegador para saber qué está pasando.

Hola , el código completo es el que te he pegado , el resto no tiene nada que ver ,son dos páginas
PRIMERA: show.php donde hay una burrada de cosas, llamadas a funciones y demás (entre ellas la que carga la imagen.

SEGUNDA: La ventanita

TERCERA: detalles_anuncio(por llamarla de algún modo) es la función que es llamada por show.php que carga la imagen.

Voy a poner todo el show.php pero aviso que la mayoría salvo el cacho que pegué antes (la función llamada por show.php) no tiene nada que ver.

[B]Salida html

Código:

<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Anuncios clasificados en Ciudad</title>
<script language="javascript" type="text/javascript" src="fns/js/forms.js"></script>	
<script language="javascript" type="text/javascript" src="fns/js/jscripts/tiny_mce/tiny_mce.js"></script>

<script language="javascript" type="text/javascript">
tinyMCE.init({
	mode : "textareas"
});
function show_img() {
window.open("view_picks.php" , "ver imagen" , "width=320,height=300,scrollbars=NO") 
}
</script>
<link href="estilos.css" rel="stylesheet" type="text/css" />
<link href="capas.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="header">
</div>
<div id='adds_wraper'>

	<div id='sponsors'>			

 <div id="top_menu" align="center">
<a href="/categories.php" accesskey="p">Inicio</a>

 &nbsp;|&nbsp;
<a href="/show.php?new_post=1" accesskey="i" rel="nofollow">Insertar anuncios clasificados</a>
 &nbsp;|&nbsp;
<a href="/show.php?register=1" accesskey="v">Registro</a>

 &nbsp;|&nbsp;
<a href="/login.php?option=1" accesskey="c">Salir</a>

 &nbsp;|&nbsp;
<a href="/acount.php">Tu Cuenta</a>
	
	 &nbsp;|&nbsp;
<a href="#">Ayuda</a>
	
 <div id='user'>
 [email protected] </div>

 <div>
 <noscript>
 <P class='aviso'> Necesita habilitar javascript en su navegadaor , para poder utilizar esta página, gracias</P>
</noscript>
</div>
  </div>			
<div>
<fieldset><p class='patrocinan'>Patrocinan</p><img src=' users/logos/logo_peq.jpg '/></fieldset>   	        </div>

<div id="adds_right_menu">	
<p ><b> C </b></p>
</div>
   
   <div id="adds">

     <a href='show.php?subcat=ats'>Volver atras</a>
<div class='add_bg'> <p >Id: <span class='titulo'>216</span> <p ><span class='titulo'>soy una oveja clónica</span><br><br><p ><p>Soy una oveja cl&oacute;nica</p><br></div>	<form action='reply.php' method='post'>

<table>
<tr>
<td>	Responde al anuncio</td>
</tr>
<tr>
<td>	<textarea name="tema" cols="70" rows="7" ></textarea></td>
</tr>

<tr>
<td>	<input type="submit" name="send"  value="responder" /></td>
</tr>
	
<tr>
<td>	<input type="hidden" name="AdId"  value="216" /></td>
</tr>
<tr><td><a href='operations/viev_picks.php?AdId=216&pos=pri' >
<a href='javascript:show_img()'> 
<img src='users/images/216andolly.gif' border='0' alt='ampliar' id='pick'/>

</a>
</td>
</tr>	</table>
	</form>
	<div class='add_bg'><p> <span class='titulo'>Email</span>:<a href='mailto:Array[0][AdEmail]'>
											 [email protected]</a></p> <p ><span class='titulo'>Teléfono: 32767</span></div>

Gracias y saludos

David · #14 (**permalink**) 10/10/2008, 10:35

Sí, he visto, pero pusiste código PHP, y simplemente con eso es difícil saber el problema. Coloca la salida HTML que se genera, no el código PHP.

Si no entiendes a qué me refiero, sería abre tu página con el Navegador > Ver Código Fuente. Y ese código coloca aquí.

Dundee · #15 (**permalink**) 10/10/2008, 10:45

Cita:

Iniciado por David el Grande

Sí, he visto, pero pusiste código PHP, y simplemente con eso es difícil saber el problema. Coloca la salida HTML que se genera, no el código PHP.

Si no entiendes a qué me refiero, sería abre tu página con el Navegador > Ver Código Fuente. Y ese código coloca aquí.

Ok , pero ya lo había puesto antes , insisto que la salida es una función , la he vuelto a poner esta vez entera. Se que lo suyo es seguir los patrones MVC para separar el contenido de la lógica y el modelo , pero lo dejaré para la proxima aventura en la que me meta jeje.

Un saludo y gracias

David · #16 (**permalink**) 10/10/2008, 10:51

Definitivamente no estás entendiendo lo que quiero decirte, yo en este momento, no tengo PHP, y ni si tuviera no estoy en el contexto de tu página, así que tampoco las variables de sesión que usas. En fin, no puedo probar tu código PHP.

Así que lo que te decía es que no pongas el código PHP sino lo que resulta de ella, el PHP se ejecuta en el servidor y envía una "salida" al navegador. Es esa "salida" la que quisiera que pongas para que pueda probar tu código y por qué no funciona.

Dundee · #17 (**permalink**) 10/10/2008, 10:55

Ok , ahora creo que si te he entendido , he editado y copiado la salida html que me envía el servidor al navegador despúes de procesar el php. ¡¡ojo¡¡ pero la de la página principal donde se ve la imagen NO LA DE LA VENTANITA que no se como ver el código fuente de esta.

Un saludo y gracias

David · #18 (**permalink**) 10/10/2008, 11:01

Creo que estamos en las mismas, porque yo también no te había entendido, no sé por qué pero desde el principio pensé que con "ventanita" no te referías a un popup sino a una capa que simulara una ventana

.

Bueno, aclaradas las cosas debería ser:

Código javascript:

Ver originaldocument.getElementById("ampliar").src = opener.document.getElementById("pick").src;

Con opener.document hacemos referencia al documento de la ventana que abrió el popup.

Saludos

.

Dundee · #19 (**permalink**) 10/10/2008, 12:37

Cita:

Iniciado por David el Grande

Creo que estamos en las mismas, porque yo también no te había entendido, no sé por qué pero desde el principio pensé que con "ventanita" no te referías a un popup sino a una capa que simulara una ventana

.

Bueno, aclaradas las cosas debería ser:

Código javascript:

Ver originaldocument.getElementById("ampliar").src = opener.document.getElementById("pick").src;

Con opener.document hacemos referencia al documento de la ventana que abrió el popup.

Saludos

.

Gracias DAvid el Grande , ¡¡ahora si funciona ¡¡ ,el javacript me trae de cabeza pero voy a empezar a tomármelo más enserio e incar los codos hasta que al menos lo entienda como el php (tampoco es que sea demasiado ejej).

Un saludo y mil gracias