Script imagen ajustada de Caricatos

Alpo · #1 (**permalink**) 14/05/2008, 05:39

Hola.

Me parece excelente el post : http://www.forosdelweb.com/1865621-post11.html
en el que se da una solución correcta para abrir una imagen ajustada al tamaño de ésta de forma automática.

Me gustaría saber como adaptar este mismo sistema para varias imágenes pero que en vez de abrir una ventana pop-up, abra la imagen en una capa que se cierre por ejemplo con onblur.

Es decir, se trata de abrir una capa que puede ser de posicionamiento absoluto ajustada de forma automática al tamaño de la imagen.

Muchas gracias.

caricatos · #2 (**permalink**) 14/05/2008, 09:58

Hola:

Me agrada ver que mis viejos scripts siguen siendo útiles. Sobre el tema de crear la capa puede tener algún inconveniente añadido, ya que si calculamos las dimensiones de la página (ya no hablamos de ventanas) y es menor que las dimensiones de la imagen la cosa se complica bastante, aunque siempre se puede redimensionar la imagen para que quepa...

Voy a intentar hacer las modificaciones para que funcione en páginas superiores... luego veremos...

De el mensaje solo nos hace falta la función mostrar, en donde ya podemos consultar las dimensiones de la imágen... y por cierto, en vez de una capa simplemente se podría crear un tag img.

Este es el código original:

Código:

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();
}

y al modificarlo:

Código:

var _img_grande;
function mostrar() {
	var imagen = document.createElement("img");
	var ancho = _img_grande.width;
	var alto = _img_grande.height;
	var x = (document.body.offsetWidth - ancho) / 2;
	var y = (document.body.offsetHeight - alto) / 2;

	width (imagen.style)	{
		position = "absolute";
		top = x + "px";
		left = y + "px";
		border = "1px solid red";
	}
	document.body.appendChild(imagen);
}

Posiblementa haya que depurarlo más, pero pruébalo y nos cuentas (Lo he puesto "a capella"... y tal vez también haya que cambiar el estilo display... y el cálculo de las coordenadas en circunstancias especiales no lo he contemplado.

Saludos

Alpo · #3 (**permalink**) 14/05/2008, 11:07

Mi estimado paisano, tus viejos scripts nunca mueren, serán viejos pero muy buenos y por tanto válidos...
A ver, lo que pretendo es hacer una supuesta ventana en la cual incluir en una primera linea de 10pix de alto por ejemplo, el titulo de la imagen y una "X" para poderla cerrar en la parte superior derecha. Y bajo esto debería aparecer la imagen. Por tanto el funcionamiento debería quedar igual que tu script para pop-up pero en vez de esto presentamos una capa con el aspecto de ventana, que se pueda cerrar y que presente las imágenes como lo hace dicho script.

En el código he intentado añadir la parte que oculta la capa.

Yo tengo de partida este código pero no funciona:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<script language="JavaScript" type="text/JavaScript">

</script>
</head>
<body>
<a href= "#" onclick="mostrar('images/grande.jpg, Prueba');return false" ><img src="images/pequena.jpg" width="150" height="150" border="0"></a>
</body>
</html>

Carlos3425 · #4 (**permalink**) 24/09/2010, 17:00

Lo primero aprovechar para agradecer a Caricatos este impresionante script. Gracias sinceramente. Ha sido una impresionante ayuda.

Únicamente tengo un problema que no logro solventar. Quiero que todos los enlaces se abran un único pop-up y como bien indica Caricatos en su mensaje [URL="http://www.forosdelweb.com/f13/pop-up-del-tamano-imagen-automaticamente-456880/#post2517938"]Mensaje original[/URL]

Simplemente hay que poner en el segundo parámetro de la instrucción window.open() un nombre distindo de "_blank" y de la cadena vacís ("")... y siempre ese nombre...

Efectivamente así se abren todos los enlaces en la misma ventana, pero no consigo que se ajuste el tamaño con cada foto que se envía. El popup se queda fijado en el tamaño de la primera imagen que envié.

caricatos · #5 (**permalink**) 24/09/2010, 18:36

Hola:

Las dos opciones que se me ocurren son:

Antes de usar la instrucción open, cerrar las supuesta ventana abierta... lo que no tengo claro es si se producirá algún error que fastidie el invento...

Una alternativa que cambiaría el sentido del script, es que si se van a abrir ventanas de distintos tamaños, o mejor dicho, con imégenes de distinto tamaño, en vez de ajustar la ventana, crear una ventana suficientemente grande para que quepan todas las imágenes, y en vez de usar un tag img, ponerla centrada con estilos...

¿Que te parece...?

Saludos

Carlos3425 · #6 (**permalink**) 25/09/2010, 01:58

Lo primero gracias por tu respuesta, Caricatos.
De las ideas que planteas, me quedo con la primera, ya que con la segunda se perdería el sentido del script, como bien indicas. He intentado implementar esa 1ª opción, pero no lo consigo. He de decir que soy un programador novato novato, así que toda ayuda será bienvenida.
"Filosofando" sobre el tema, ¿por qué no se redimensiona el popup abierto si el script le pasa las dimensiones de la nueva imagen? ¿Es que no se puede redimensionar un popup ya abierto?
Gracias por vuestro tiempo y conocimiento, y perdonar mi pesadez.

caricatos · #7 (**permalink**) 25/09/2010, 04:02

Hola:

Respondiendo a tu intriga "filosófica", hemos tenido algún tema al respecto, y lo que pasa con el redimensionado es que se alteran las medidas porque con la instrucción resizeTo() se añade a la altura el tamaño de la barra del título, y lamentablemente ese valor varía según los sistemas

En imágenes grande tal vez se trate de algo inapreciable, pero es distinto con imágenes pequeñas.

De todos modos, cerrar una ventana es tan simple como usar el método close()

ventana = window.open(...);
ventana.close();

La secuencia tal vez sea mejor así:

function abrir() {
if (ventana) ventana.close();
ventana = window.open(...);
}

los valores que habría que chequear para ventana serían false-null-undefined tal vez...

Saludos

Carlos3425 · #8 (**permalink**) 25/09/2010, 04:30

Buenas de nuevo,

Casi nos "solapamos". Iba a publicar la solución de compromiso que encontré, utilizando precisamente resizeTo y moviendo posteriormente la ventana al centro (ya que no la hace por sí solo).

ventana.resizeTo(_img_grande.width,_img_grande.hei ght);
ventana.moveTo((screen.width - _img_grande.width) / 2,(screen.height - _img_grande.height) / 2);

Lo que haré será "meterle" un pelín más de altura para solventar el error que comentas, del que no me había siquiera dado cuenta. ¿Alguna medida para Firefox?

Una última cuestión, ¿cómo se puede hacer para que la foto se muestre una única vez y no en mosaico? Así, aunque apareciese algo de "blanco" en el pie de la foto no pasaría nada...

Carlos3425 · #9 (**permalink**) 25/09/2010, 04:31

La función quedaría así.

Código PHP:

              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("", "ttttt23", ops); 
                ventana.document.write(contenido); 
                ventana.document.close(); 
                ventana.focus(); 
                ventana.resizeTo(_img_grande.width,_img_grande.height); 
                ventana.moveTo((screen.width - _img_grande.width) / 2,(screen.height - _img_grande.height) / 2);

caricatos · #10 (**permalink**) 25/09/2010, 06:20

Hola:

Para evitar el efecto mosaico:

var contenido = "<html><body style='background-image: url(" + _img_grande.src + ") no-repeat center center'></body></html>";

Saludos

Carlos3425 · #11 (**permalink**) 25/09/2010, 06:43

Ups, siento ser pesado pero no va. Todo funciona ok: se abre el popup, se centra, se redimensiona si ya estaba abierto, ... pero no aparece la imagen. Curioso...

Carlos3425 · #12 (**permalink**) 27/09/2010, 14:27

Partiendo de la "pista" que nos indicó Caricatos (gracias nuevmente), pudimos alcanzar la solución.

var contenido = "<html><body style='background-image: url(" + _img_grande.src + "); background-repeat: no-repeat'></body></html>";

Ya la última cuestión, dispuestos a rizar el rizo: ¿Cómo hacer para mostrar imágenes completas de fotos que tienen un tamaño superior al de la pantalla?

caricatos · #13 (**permalink**) 27/09/2010, 17:41

Hola:

Lo del copy and paste no siempre funciona... en mi respuesta anterior del backgroun-image había que quitar lo de "_image"...

var contenido = "<html><body style='background: url(" + _img_grande.src + ") no-repeat center center'></body></html>";

Bueno, es cosa de entender los estilos...

Saludos

Carlos3425 · #14 (**permalink**) 28/09/2010, 11:34

Cita:

Iniciado por caricatos

Bueno, es cosa de entender los estilos...

Qué razón tienes. La cosa es saber, y yo ando más bien justito.

Muchas gracias por todo.