Foros del Web » Programando para Internet » Javascript »

Pop-up del tamaño de la imagen automaticamente

Estas en el tema de Pop-up del tamaño de la imagen automaticamente en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 16/01/2007, 06:31
Avatar de alllebor  
Fecha de Ingreso: septiembre-2006
Mensajes: 295
Antigüedad: 18 años, 3 meses
Puntos: 1
Pop-up del tamaño de la imagen automaticamente

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!!!
__________________
Quien no me pregunta no se entera!!
  #2 (permalink)  
Antiguo 16/01/2007, 07:24
Avatar de medinauta  
Fecha de Ingreso: diciembre-2002
Ubicación: Guayaquil
Mensajes: 159
Antigüedad: 22 años
Puntos: 0
Re: Pop-up del tamaño de la imagen automaticamente

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>
  #3 (permalink)  
Antiguo 17/01/2007, 01:19
Avatar de alllebor  
Fecha de Ingreso: septiembre-2006
Mensajes: 295
Antigüedad: 18 años, 3 meses
Puntos: 1
Re: Pop-up del tamaño de la imagen automaticamente

OK! Gracias!!!
__________________
Quien no me pregunta no se entera!!
  #4 (permalink)  
Antiguo 17/01/2007, 07:39
mon
 
Fecha de Ingreso: febrero-2003
Mensajes: 506
Antigüedad: 21 años, 10 meses
Puntos: 0
Re: Pop-up del tamaño de la imagen automaticamente

Sabes si este script funciona bién en todos los navegadores?, gracias
  #5 (permalink)  
Antiguo 17/01/2007, 10:17
Avatar de medinauta  
Fecha de Ingreso: diciembre-2002
Ubicación: Guayaquil
Mensajes: 159
Antigüedad: 22 años
Puntos: 0
Re: Pop-up del tamaño de la imagen automaticamente

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...
  #6 (permalink)  
Antiguo 17/01/2007, 10:29
mon
 
Fecha de Ingreso: febrero-2003
Mensajes: 506
Antigüedad: 21 años, 10 meses
Puntos: 0
Re: Pop-up del tamaño de la imagen automaticamente

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
  #7 (permalink)  
Antiguo 18/01/2007, 01:20
Avatar de alllebor  
Fecha de Ingreso: septiembre-2006
Mensajes: 295
Antigüedad: 18 años, 3 meses
Puntos: 1
Re: Pop-up del tamaño de la imagen automaticamente

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?
__________________
Quien no me pregunta no se entera!!
  #8 (permalink)  
Antiguo 23/01/2007, 20:57
 
Fecha de Ingreso: mayo-2004
Mensajes: 400
Antigüedad: 20 años, 7 meses
Puntos: 0
Re: Pop-up del tamaño de la imagen automaticamente

como puedo agregarlo en php?
  #9 (permalink)  
Antiguo 23/01/2007, 21:04
 
Fecha de Ingreso: mayo-2004
Mensajes: 400
Antigüedad: 20 años, 7 meses
Puntos: 0
Re: Pop-up del tamaño de la imagen automaticamente

ya lo adapte al php pero recorta un poco la imagen :(
  #10 (permalink)  
Antiguo 23/01/2007, 22:49
Avatar de Gurrutello  
Fecha de Ingreso: enero-2002
Ubicación: Ontario,Toronto [Canada]
Mensajes: 2.017
Antigüedad: 22 años, 11 meses
Puntos: 6
Re: Pop-up del tamaño de la imagen automaticamente

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
__________________
Un Saludo
www.tutores.org
Asp | Php | Javascript | Perl | Coldfusion | Flash | +- 2000 codigos
  #11 (permalink)  
Antiguo 23/01/2007, 23:51
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 8 meses
Puntos: 1284
Re: Pop-up del tamaño de la imagen automaticamente

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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #12 (permalink)  
Antiguo 24/01/2007, 11:31
 
Fecha de Ingreso: mayo-2004
Mensajes: 400
Antigüedad: 20 años, 7 meses
Puntos: 0
Re: Pop-up del tamaño de la imagen automaticamente

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
  #13 (permalink)  
Antiguo 24/01/2007, 11:37
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 8 meses
Puntos: 1284
Re: Pop-up del tamaño de la imagen automaticamente

Hola:

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

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #14 (permalink)  
Antiguo 24/01/2007, 11:50
 
Fecha de Ingreso: mayo-2004
Mensajes: 400
Antigüedad: 20 años, 7 meses
Puntos: 0
Re: Pop-up del tamaño de la imagen automaticamente

Muchas gracias!! ahora si esta perfecto

Saludos
  #15 (permalink)  
Antiguo 31/08/2007, 15:31
 
Fecha de Ingreso: agosto-2007
Mensajes: 3
Antigüedad: 17 años, 3 meses
Puntos: 0
Pregunta Re: Pop-up del tamaño de la imagen automaticamente

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 Ver Mensaje
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
  #16 (permalink)  
Antiguo 01/09/2007, 07:54
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 8 meses
Puntos: 1284
Re: Pop-up del tamaño de la imagen automaticamente

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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #17 (permalink)  
Antiguo 03/09/2007, 07:47
 
Fecha de Ingreso: agosto-2007
Mensajes: 3
Antigüedad: 17 años, 3 meses
Puntos: 0
Re: Pop-up del tamaño de la imagen automaticamente

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

SALU2
  #18 (permalink)  
Antiguo 03/09/2007, 08:57
 
Fecha de Ingreso: agosto-2007
Mensajes: 3
Antigüedad: 17 años, 3 meses
Puntos: 0
Re: Pop-up del tamaño de la imagen automaticamente

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
  #19 (permalink)  
Antiguo 14/07/2008, 06:05
 
Fecha de Ingreso: mayo-2008
Mensajes: 17
Antigüedad: 16 años, 7 meses
Puntos: 0
Respuesta: Pop-up del tamaño de la imagen automaticamente

caricatos autentico script, muchas gracias!
  #20 (permalink)  
Antiguo 02/08/2008, 18:52
capitank
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Pop-up del tamaño de la imagen automaticamente

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>
  #21 (permalink)  
Antiguo 02/08/2008, 19:30
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 8 meses
Puntos: 1284
Respuesta: Pop-up del tamaño de la imagen automaticamente

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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Tema Cerrado




La zona horaria es GMT -6. Ahora son las 19:53.