pop up de imagen sin pagina html

mooguel · #1 (**permalink**) 25/02/2004, 06:14

hola a todos
tengo una galeria de imagenes. su tamaño original es 300 x 400, pero las tengo reducidas a 50 x 73. quiero que al picar sobre cada una de las pequeñas, salte un popup que contenga la imagen en su tamaño original, pero que haga esto sin necesidad de hacer un html para cada una de las imagenes. es posible?
también, si las imagenes grandes son de distinto tamaño, se puede hacer que el popup se ajuste automaticamente al tamaño de la imagen?
muchas gracias!

caricatos · #2 (**permalink**) 25/02/2004, 07:04

Hola mooguel:

Fíjate en las FAQs que tunait puso una respuesta que puede valerte, si sabes los tamaños de las imágenes solo tienes que usar window.open y poner como tercer parámetro las dimensiones:

var ventana = window.open("", "", "width=300,height=400");
ventana.document.write("<html><body style='background-image:url(" + tuImagen + ");'");
ventana.document.close();

Hace algún tiempo respondí algo similar, y recuerdo que era con una precarga. Si buscas en este foro encontrarías cosas interesantes.

Saludos

mooguel · #3 (**permalink**) 27/02/2004, 02:20

hola
gracias por tu respuesta. sí estuve mirando las faqs, pero no conseguí que me funcionara. soy novato total en esto del javascript. podrías, por favor, ponerme el script entero, incluido el que tiene que llevar la imagen pequeña sobre la que pico para que salga el popup?
muchísimas gracias!

caricatos · #4 (**permalink**) 27/02/2004, 03:33

Hola otra vez:

Te preparé este ejemplo:

<html>
<head>
<script>
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>

Hice algo parecido hace poco tiempo, pero intenté buscarlo y no lo encontré...

En estas pocas líneas se genera un popup centrado con las dimensiones de la foto y con una precarga. Lo único que tienes que hacer es usar el evento onclick de la imagen llamando a la función abrir y como parámetro pones la foto grande.
Con respect al ejemplo de las FAQs, puedes verlo en la página de javascript de tunait (¡Hola

!), donde te explica como usarlo: http://javascript.tunait.com/javascr...p?s=popupfotos

Saludos

mooguel · #5 (**permalink**) 27/02/2004, 06:59

GENIAL!
MUCHAS GRACIAS. LO ÚNICO ES QUE EN EL BORDE SUPERIOR DEL POPUP SALE LA RUTA ENTERA DE LA FOTO. ES POSIBLE CAMBIAR ESTO POR UN TITULO PARA LA VENTANA, POR EJ, FOTOS?
GRACIAS DE NUEVO
SALUDOS!

caricatos · #6 (**permalink**) 27/02/2004, 08:47

Hola otra vez:

Fíjate en esta línea:
var contenido = "<html><head><title>Foto</title></head> <body style='background-image: url(" + _img_grande.src + ")'></body></html>";

Esa es una opción, y otra opción sería:

ventana.document.write(contenido);
ventana.document.title = "Foto";
ventana.document.close();

Si no me he equivocado al escribir, las dos cosas dan el mismo resultado.

Saludos

mooguel · #7 (**permalink**) 27/02/2004, 11:35

muchas gracias, caricatos, eres un genio :D
saludos!!!!