Pop-up del tamaño de la imagen automaticamente

alllebor · #1 (**permalink**) 16/01/2007, 06:31

tengo una serie de links que abren un pop-up de una imagen y me gustaria que dicho pop-up se ajustara al tamaño de la imagen si tener que especificar dicho tamaño en el codigo. ¿me he explicado bien?

Yo ahora tengo esto.

Código HTML:

<a href="images/plano.jpg" target="popup"
onClick="window.open ('', 'popup', 'left=50, top=50, [COLOR="Red"]width=892, height=447[/COLOR], resizable=no, scrollbars=no, menubar=no, toolbar=no, location=no, statusbar=no, copyhistory=no');">hola</a>

Pero tengo ke poner links de muchas imagenes y no quiero cambiar cada vez el width y el height.

Gracias!!!

medinauta · #2 (**permalink**) 16/01/2007, 07:24

Esta solucion, fue dada por Tunait,muy buena como siempre.

Usas un script que luego lo llamas desde el link, el script:

Código:

//Abrir Ventana con imagen por Tunait
var ventana
var cont=0
var titulopordefecto = "Tu Titulo de la ventana"
function afoto(cual,titulo)
{
if(cont==1){ventana.close();ventana=null}
if(titulo==null){titulo=titulopordefecto}
ventana=window.open('','ventana','resizable=no,sc rollbars=no,width=50,height=50')
ventana.document.write('<html><head><title>' + titulo + '</title></head><body style="overflow:hidden" marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" scroll="no"  onUnload="opener.cont=0"><div align="center"><a href="javascript:this.close()"><img src="' + cual + '" onLoad="opener.redimensionar(this.width, this.height)" style="border:none"></a></div>')
ventana.document.close()
cont++
}
function redimensionar(ancho, alto)
{
ventana.resizeTo(ancho+5,alto+30)
ventana.moveTo((screen.width-ancho)/2,(screen.height-alto)/2) //centra la ventana. Eliminar si no se quiere centrar el popup
}

Luego en cada link colocas:

Código:

<a href="javascript:afoto('images/grande/nombreimagen.jpg','el título que quieras')"> <img src = "images/thumb/nombreimagen.jpg"> </a>

alllebor · #3 (**permalink**) 17/01/2007, 01:19

OK! Gracias!!!

mon · #4 (**permalink**) 17/01/2007, 07:39

Sabes si este script funciona bién en todos los navegadores?, gracias

medinauta · #5 (**permalink**) 17/01/2007, 10:17

Probado en FireFox 2.0.0.1 e IE 7 (este le agrega la barra de estado con el titulo "blank", pero no se ve mal...). Por supuesto que estos navegadores deben tener habilitado javascript...

mon · #6 (**permalink**) 17/01/2007, 10:29

Lo digo porque yo lo he probado pero no me respeta las alturas de las fotos, el ancho sale perfecto en cada foto pero el alto se queda corto

alllebor · #7 (**permalink**) 18/01/2007, 01:20

Pues en IE7 se ve bien, lo que pasa que tienes que darle permisos a los Pop-ups para que se te abra. No hay forma de hacerlo para que no te lo cierre aitomaticamente??Y no tener que activar los pop-ups?

pakillo · #8 (**permalink**) 23/01/2007, 20:57

como puedo agregarlo en php?

pakillo · #9 (**permalink**) 23/01/2007, 21:04

ya lo adapte al php pero recorta un poco la imagen :(

Gurrutello · #10 (**permalink**) 23/01/2007, 22:49

Hola
Lo que puedes hacer en php es leer el tamno de la imagen y darle mas ancho y alto
aunque es lo mismo para javascript.
Yo normalmente abro un simple popup a una pagina php que lee la imagen
con php leo las dimensiones y les doy mas tamano del que es.
saludos

caricatos · #11 (**permalink**) 23/01/2007, 23:51

Hola:

Hace mucho tiempo propuse la alternativa de precargar antes la imagen:

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="http://www.pepemolina.com/imagenes/fotos/mini/Diapositiva82.jpg" onclick="abrir('http://www.pepemolina.com//imagenes/fotos/maxi/Diapositiva82.jpg')"/>
	</body>
</html>

Saludos

pakillo · #12 (**permalink**) 24/01/2007, 11:31

caricatos funciona muy bien, gracias!! el problema que me daba antes en el script que posteo medinauta e sque en IE7 muestra la barra de direcciones y por eso corta un poco la imagen en la parte de abajo, no habria problema por eso, pero justo ahi es donde muestra la marca de agua y aunque la imagen se guarda bien estaria bien que se vea la marca de agua en el popup tambien :).

Por cierto, como hago para que cambie el cursor sobre la imagen? lo pregunto porque muchas personas si ven que no cambia no hacen click. Bueno lo del cursor tampoco es importante.

Saludos y gracias nuevamente

caricatos · #13 (**permalink**) 24/01/2007, 11:37

Hola:

Me alegro de que te sirviera... sobre poner la mano, es cuestión de estilos:
<img style="cursor: pointer" ...

Saludos

pakillo · #14 (**permalink**) 24/01/2007, 11:50

Muchas gracias!! ahora si esta perfecto

Saludos

P-I-L-O · #15 (**permalink**) 31/08/2007, 15:31

Hola Caricatos, soy nuevo en el foro y tembien en Java y Javascript. Por alguna razón reemplazando la imagen ampliada no me funciona en OPERA, sin embargo el código original sin modificación alguna funciona a la perfección. En IE6 funciona siempre. ¿ Cómo puedo solucionar este problema ?

Muchas gracias

Cita:

Iniciado por caricatos

Hola:

Hace mucho tiempo propuse la alternativa de precargar antes la imagen:

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="IMG/001.jpg" onclick="abrir('IMG/HI/001.jpg')"/>
	</body>
</html>

Saludos

caricatos · #16 (**permalink**) 01/09/2007, 07:54

Hola P-I-L-O, bienvenido a los foros

:

No entiendo qué quieres decir con "reemplazando..."; tal vez sea mejor que muestres tu código o te explique mejor.

Saludos

P-I-L-O · #17 (**permalink**) 03/09/2007, 07:47

en rojo ya te habia puesto lo que yo reemplazaba en el código. Fijate.

SALU2

P-I-L-O · #18 (**permalink**) 03/09/2007, 08:57

otra pregunta más, ya que estoy :
Cómo puedo hacer para que debajo separado de la imagen del popup salga escrito un texto.

gracias nuevamente

bruney3 · #19 (**permalink**) 14/07/2008, 06:05

caricatos autentico script, muchas gracias!

#20 (**permalink**) 02/08/2008, 18:52

hola caricatos se que estas en verano alli , yo amo malaga ya que tengo parientees alli y he vivido en madrid y fui a mlg 3 veces, te kisiera preguntar algo ... en tu codigo este, que te pongo a continuacion, envez de llamar a un link, llamo a fotos que tengo en el servidor,las llama pero me las abre ej distintas ventanas, me gustaria saber que tengo que agregar para que cuando se abra una ventana y luego veo la foto,y luego pincho sobre la siguiente foto, me abra la otra foto pero en la misma mini-ventana y no me abra una nueva, sino me kedan muchas ventanas abiertas.gracias
<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="header11.jpg" onclick="abrir('header1.jpg')"/>
<img src="header22.jpg" onclick="abrir('header2.jpg')"/>
<img src="header33.jpg" onclick="abrir('header3.jpg')"/>
<img src="grenda11.jpg" onclick="abrir('grenda.jpg')"/>
</body>
</html>

caricatos · #21 (**permalink**) 02/08/2008, 19:30

Hola:

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...

Date una vuelta por las FAQs (sobre todo lo 100) donde se habla de las ventanas.

Saludos