Pop al tamaño de la Imagen

Alkatraz · #1 (**permalink**) 28/06/2004, 15:45

Hola a todos.

Estoy buscando un js para cuando hagan click en las imagenes vistas en miniatura se abra una ventana pop al tamaño original de cada imagen.

Muchas gracias a todos y cabe recordar que este foro siempre me ha sido de una valiosa utilitdad.

affv · #2 (**permalink**) 29/06/2004, 00:20

ok la forma es la siguiente habre el popup con cualquier tamaño sin barras de scroll y demas y en la pagina del popup pon lo siguiente:

onload="self.resizeTo(document.images[0].width+10,document.images[0].height+36)"

se me olvidaba la linea tiene que ir en <body>

caricatos · #3 (**permalink**) 29/06/2004, 01:35

Hola Alkatraz:

Si bien la redimensión del popup como el ejemplo de affv (¡Hola

!) es una buena solución, se corre el riesgo de que no se ajuste exactamente (como pasa en mi window XP), por lo que si conoces el tamaño de las imágenes grandes te recomiendo que le des el tamaño directamente en las opciones de la ventana...

Otra alternativa es averiguar el tamaño antes de abrir el popup desde sus propiedades width y height.

En el siguiente ejemplo se abre una ventana ajustada y centrada con una precarga previa de la imágen:

Código:

<html>
	<head>
		<script type="text/javascript">
			var _img_grande;

			function mostrar() {
				var ops = "top=" + ((screen.height - _img_grande.height) / 2);
				ops += ",left=" + ((screen.width - _img_grande.width) / 2);
				ops += ",width=" + _img_grande.width + ",height=" + _img_grande.height;
				var contenido = "<html><body style='background-image: url(" + _img_grande.src + ")'></body></html>";
				var ventana = window.open("", "", ops);
				ventana.document.write(contenido);
				ventana.document.close();
			}

			function cargando() {
				if (_img_grande.complete) mostrar();
				else setTimeout("cargando()", 100);
			}

			function abrir(imagen)	{
				_img_grande = new Image();
				_img_grande.src = imagen;
				cargando();
			}
		</script>
	</head>
	<body>
		<img src="../imagenes/fotos/mini/Diapositiva82.jpg" onclick="abrir					('../imagenes/fotos/maxi/Diapositiva82.jpg')"/>
	</body>
</html>

Puedes ver el resultado copiando el código en este probador de scripts: http://www.pepemolina.com/probador/ (de esa manera las rutas de las imagenes del ejemplo serían válidas...

)

Saludos

^CrAzY^ · #4 (**permalink**) 29/06/2004, 04:28

y abra manera de hacer resize para swf's?

sedinho · #5 (**permalink**) 02/09/2004, 04:31

Ante todo felicitar a caricatos por este pedazo de script.
Y ahora el problema:

Tengo una base de datos (MySql + PHP) que muestra imagenes en miniatura y luego usando el script de caricatos al hacer clic en cada una deberia aparecer en tamaño normal. El problema es que cuando hago clic en la foto me da un error de javascript-> 'document' es nulo o no es un objeto

Te pongo el codigo que tengo:

echo "<img src='imagenes/thumbs/tb-$registro[12]' border='1' bordercolor='#EAEAEA' alt='Click para ver en grande' onClick=\"abrir('imagenes/$registro[12]')\">";

En SRC se muestra la imagen pequeña (thumb) y en onClick la imagen que quiero que se muestre ($registro[12] guarda el nombre de la imagen bajo la forma "id-x.jpg" donde x es un numero).
Por supuesto, las funciones que usas estan descritas entre <head></head> como pones en el script.

A ver si me puedes decir por que es, ya que el script que has mostrado me viene como anillo al dedo.

Muchas gracias de antemano.

sedinho · #6 (**permalink**) 03/09/2004, 02:07

Perdon por insitir pero es que me estoy volviendo loco. Si alguien pudiera ver que hago mal se lo agradeceria mucho.

Un saludo.

caricatos · #7 (**permalink**) 03/09/2004, 04:10

Hola sedinho:

Estaba viendo el código, y he notado que falta la apertura del documento...

La función mostrar debería quedar así:

Código:

function mostrar() {
	var ops = "top=" + ((screen.height - _img_grande.height) / 2);
	ops += ",left=" + ((screen.width - _img_grande.width) / 2);
	ops += ",width=" + _img_grande.width + ",height=" + _img_grande.height;
	var contenido = "<html><body style='background-image: url(" + _img_grande.src + ")'></body></html>";
	var ventana = window.open("", "", ops);
	ventana.document.open();
	ventana.document.write(contenido);
	ventana.document.close();
}

Saludos

sedinho · #8 (**permalink**) 03/09/2004, 11:11

Gracias por responder.
Me temo que sigo con las mismas.
Si uso tus funciones desde una pagina html normal todo funciona, pero si las llamo desde una pagina hecha en php me da el problema que comente antes.

A ver si alguien sabe de que puede ser.

Un saludo y muchas gracias por responder caricatos.

caricatos · #9 (**permalink**) 03/09/2004, 16:09

Hola otra vez:

sedinho: ahora es un problema php... recuerdo que hay algunas funciones para el control de caracteres especiales y no sabría exactamente cuál tienes que usar (me parece que es addslashes o algo parecido) te recomiendes que te asomes al foro php y verás que te resuelven el problema en un tris.

Saludos

sedinho · #10 (**permalink**) 06/09/2004, 02:24

Muchas gracias por tu ayuda. Voy a trasladar la pregunta al foro de php.
Cuando me respondan pondre la solucion aqui por si le interesa a alguien mas.

sedinho · #11 (**permalink**) 09/09/2004, 08:42

Ya se que es lo que falla. Cuando la pagina se genera en PHP la siguiente parte no se ejecuta correctamente:

Código HTML:

else setTimeout("cargando()", 100);

Aun no se porque es.
A parte de eso, me podriais decir por que no se ejecuta correctamente este script:

Código HTML:

<html>
<head>
<script type="text/javascript">
			var i=0;

			function cargando()
			{
				if (i==5)
					{
					 alert("Conseguido. Has llegado a 5");
					}
				else
					{
					 document.write("He entrado " + i + " veces");
					 setTimeout("cargando()", 1000);
					}
			}
		</script>
</head>

<body>
<input type="button" value="cargar" onClick="cargando()">
</body>
</html>

Lo cierto es que no se porque, la funcion setTimeout nunca he conseguido que me funcione como quiero.

Un saludo y gracias.

caricatos · #12 (**permalink**) 09/09/2004, 13:15

Hola otra vez:

para preguntas nuevas te recomiendo que crees mensajes nuevos...

Si no modificas el valor de i, no te va a funcionar nunca...

Fíjate en la linea azul.

Cita:

Iniciado por sedinho

A parte de eso, me podriais decir por que no se ejecuta correctamente este script:

<html>
<head>
<script type="text/javascript">
var i=0;

function cargando()
{
if (i==5)
{
alert("Conseguido. Has llegado a 5");
}
else
{
document.write("He entrado " + i + " veces");
setTimeout("cargando()", 1000);
i++;
}
}
</script>
</head>

<body>
<input type="button" value="cargar" onClick="cargando()">
</body>
</html>

Saludos

sedinho · #13 (**permalink**) 09/09/2004, 14:59

Perdona caricatos, pero realmente no es que quisiera abrir un nuevo tema, solo era para que una vez que me funcionase correctamente la funcion setTimeout pudiera ver por que falla con PHP. Por cierto, el script que has puesto sigue fallando (lo de aumentar en uno la variable i se me habia pasado

). Me da el error de "se esperaba un objeto" (incluso si incremento i antes de la funcion setTimeout)

Muchas gracias por seguir ayudandome

caricatos · #14 (**permalink**) 09/09/2004, 17:15

Hola otra vez:

Perdona, pero no miré el código atentamente...

Cuando pones document.write "machaca" el contenido de la página...

Tienes que mostrar el valor de otra manera... Un ejemplo:

<html>
<head>
<script type="text/javascript">
var i=0;

function cargando()
{
if (i==5)

alert("Conseguido. Has llegado a 5");

else
{
document.forms.contador.cuenta.value = i + " veces";
setTimeout("cargando()", 1000);
i++;
}
}
</script>
</head>

<body>
<form name="contador" >
<input type="button" value="cargar" onClick="cargando()">
<input type="text" value="" name="cuenta">
</form>
</body>
</html>

Saludos

sedinho · #15 (**permalink**) 10/09/2004, 01:09

Muy bien!! Otra cosa, ¿por que pones que se aumente i despues de setTimeout? ¿como funciona exactamente esta funcion? ¿no deberia volver a ejecutarse cargando() despues de pasar 1 segundo sin aumentar i?

caricatos · #16 (**permalink**) 10/09/2004, 03:51

Cita:

Iniciado por sedinho

Muy bien!! Otra cosa, ¿por que pones que se aumente i despues de setTimeout? ¿como funciona exactamente esta funcion? ¿no deberia volver a ejecutarse cargando() despues de pasar 1 segundo sin aumentar i?

Hola otra vez:

Verás, setTimeout no incrementa nada, solo espera el valor del segundo parámetro en milisegundos para hacer la instrucción que se tiene como primer parámetro en forma de cadena de texto...

O sea que si no haces i++ en el código, nunca cambiará el valor de i

Saludos

sedinho · #17 (**permalink**) 16/09/2004, 02:56

Ante todo perdon por marear tanto la perdiz sobre este script, pero lo estoy usando y me da problemas.

He colgado un html en www.flomeyca.com/js para que comprobeis lo que os digo (a.html es en version html y a.php es bajo php). El codigo de ejemplo es el siguiente:

Código HTML:

<html>
	<head>
		<script type="text/javascript">
			var _img_grande;

			function mostrar() {
			
				if (_img_grande.complete)
					{
					 alert ("Imagen cargada");
					}
				else
					{
					 alert ("Imagen NO cargada");
					}
			
				var ops = "top=" + ((screen.height - _img_grande.height) / 2);
				ops += ",left=" + ((screen.width - _img_grande.width) / 2);
				ops += ",width=" + _img_grande.width + ",height=" + _img_grande.height;
				var contenido = "<html><body style='background-image: url(" + _img_grande.src + ")'></body></html>";
				var ventana = window.open("", "", ops);
				alert ("Se ha hecho window.open");
				ventana.document.open();
				alert ("Se ha hecho document.open");
				ventana.document.write(contenido);
				alert ("Se ha hecho ventana.document.write");
				ventana.document.close();
				alert ("Se ha hecho ventana.document.close");
			}

			function cargando() {
				if (_img_grande.complete) mostrar();
				else setTimeout("cargando()", 100);
			}

			function abrir(imagen)	{
				_img_grande = new Image();
				_img_grande.src = imagen;
				cargando();
			}
		</script>
	</head>
	<body>
		<img src="imagenes/thumbs/a.jpg" onclick="abrir('imagenes/a.jpg')"/>
	</body>
</html>

Ahora el problema:
En windows xp con IE 6.0, cuando intento abrir la ventana, me da el error: "document es nulo o no es un objeto". En cambio en windows 2000 con IE 5 o 6 no falla. La imagen que he colgado ocupa sobre los 500 Kb para comprobar que funciona "_img_grande.complete". He metido mensajes entre las lineas para que veais cuando falla.

Un saludo y perdon por el mareo

entomofauna · #18 (**permalink**) 07/10/2004, 06:36

Saludos cordiales Caricatos:
El código que mandaste para abrir una ventana al tamaño de la imagen es una auténtica pasada.
Es exactamente lo que yo necesitaba.
Sólo tiene un par de carencias:

1 - Quisiera poder poner el título en la barra de títulos, a fin de que no aparezca una fea dirección electrónica.

2 - Sería interesante también poner la barra inferior status=yes/no.

Y por pedir que no quede; Que si una imagen es muy muy grande, le pudieras poner (opcionalmente) scrolbars, aunque ésto ya no es tan necesario porque si se diera el caso, quizás fuera mejor abrir una página html.
Muchas gracias por enseñarnos ese magnífico código.
Saludos,
Carles.

caricatos · #19 (**permalink**) 07/10/2004, 12:47

Hola entomofauna:

En cuanto tenga un poco de tiempo retoco el tema...

Saludos

caricatos · #20 (**permalink**) 07/10/2004, 18:20

Código HTML:

<html>
	<head>
		<script type="text/javascript">
			var _img_grande;
			var _titulo;
			var _estado;

			function mostrar() {
				var ops = "top=" + ((screen.height - _img_grande.height) / 2);
				ops += ",left=" + ((screen.width - _img_grande.width) / 2);
				ops += ",width=" + _img_grande.width + ",height=" + _img_grande.height;
				ops += ",status=";
				ops += (_estado) ? "yes" : "no";
				var contenido = "<html><head><title>" + _titulo;
				contenido += "</title></head><body style='background-image: url(" + _img_grande.src + ")'></body></html>";
				var ventana = window.open("", "", ops);
				ventana.document.open();
				ventana.document.write(contenido);
				ventana.document.close();
			}

			function cargando() {
				if (_img_grande.complete) mostrar();
				else setTimeout("cargando()", 100);
			}

			function abrir(imagen, titulo, estado)	{
				_img_grande = new Image();
				_img_grande.src = imagen;
				_titulo = titulo;
				_estado = estado;

				cargando();
			}
		</script>
	</head>
	<body>
		<img src="../imagenes/fotos/mini/Diapositiva82.jpg" onclick="abrir('../imagenes/fotos/maxi/Diapositiva82.jpg', 'Hola', false)"/>
	</body>
</html>

entomofauna · #21 (**permalink**) 08/10/2004, 09:01

Saludos cordiales José.
Muchísimas gracias por retocar éste código con ésta clase de maestría que acaba de darnos.

Déjeme que le avise que, por culpa mía se olvidó de nuevo de un pequeño detalle del código: ventana.document.open();
Se puede corregir en el mismo mensaje sin escribir uno nuevo.
Pues nada, sólo añadir que ahora ya me funciona todo y estoy super contento.
Un cordial saludo,
Carles.

caricatos · #22 (**permalink**) 08/10/2004, 13:14

Hola entomofauna:

Ya está arreglado (gracias por avisar)
Y me alegro que funcione.

Saludos

pakillo · #23 (**permalink**) 19/12/2004, 07:09

Hola caricatos, muchas gracias por tu codigo, es lo que estaba buscando hace mucho, funciona muy bien.

un saludo

pakillo · #24 (**permalink**) 21/12/2004, 10:02

Hola, tengo una pregunta, hay forma de cambiar el cursor cuando pase por encima del link? lo pregunto porque aparte de las imagenes tambien he utilizado texto para abrir el popup pero el cursor no lo marca como un link.

Un saludo

caricatos · #25 (**permalink**) 21/12/2004, 12:17

Hola pakillo:

Si quieres que muestre la manita, dale el estilo cursor: pointer...
Y si lo que quieres es que tenga un comportamiento de enlace, tendrías que "envolverlo" en un tag a, y poner algo en el href (por ejemplo "#") y con el evento onclick devolver false.

Saludos

entomofauna · #26 (**permalink**) 27/11/2008, 07:54

Buenas, cómo están? .. aquí estamos otra vez.
Después de cuatro años de alegrías con éste código, que me funciona a la perfección en totos los navegadores, ...ahora quería rizar el rizo.. je je..

Me gustaría que cuando se descarga la imagen en el pop-up, que aparezca un icono de carga.
Más o menos, como los que podéis crear en ésta fantástica web: http://ajaxload.info/

En una web normal, ésto se puede hacer con estilos CSS, pero no se cómo aplicarlo al POP-UP.

En una web normal, aplico éste estilo CSS a la imagen:
--------------------------------------------------------------------
img.foto-grande {
border: 1px solid #999999; /* Ésto añade un borde gris a la imagen */
background-image: url(http://www.tudominio.com/imagenes/cargando.gif); /* Ésta es la imagen que aparece mientras no se carga la definitiva */
background-repeat: no-repeat; /* Ésto es para que la imagen de carga no aparezca repetida */
background-position: center center; /* Ésto es para centrar la imagen de carga */
display: block; /* Ésto es para centrar la imagen grande respecto a la celda que la contiene */
margin: auto; /* Ésto es para centrar la imagen grande respecto a la celda que la contiene */
}
--------------------------------------------------------------------
Luego, a la página se le añade lo siguiente:
<link href="../estilo.css" rel="stylesheet" type="text/css">

Luego, a la imagen se le añade lo siguiente:
<img src="http://www.forosdelweb.com/f13/imagen.jpg" width="500" height="333" class="foto-grande">
--------------------------------------------------------------------

Éste estilo CSS tiene la misión de hacer aparecer una barra de carga provisional, mientras se descarga una foto de gran tamaño (de varias megas, por ejemplo).
Por ahora, éste estilo funciona perfectamente en en una página normal, en la que pongas una imagen grande.

Pues lo que yo quería hacer es que, cuando abres una foto en una ventana pop-up (con el maravilloso código Java-script, pues que aparezca como fondo la imagen de carga.

¿Ésto se debe hacer directamente con el Javascript, o bién se puede aplicar simplemente el estilo CSS de algún modo?

Gracias mil, por compartir conocimientos.
Un abrazo a todos,
Carles.