Como amoldar un pop-up

orhko · #1 (**permalink**) 18/07/2005, 05:22

hola:

estoy haciendo una pagina sencillita en html, el problema que veo es que tengo varias fotos de varios tamaños, y me gustaria que cuando pinchara en ellos se abriera un pop un pero a la medida de cada foto, con el codigo que tengo:
<SCRIPT LANGUAGE="JavaScript">


</script>

con cada enlace que pongo se abre siempre un pop up con esas medidas 600x600 y claro si una foto es asi,muy bien, pero si es mas pequeña sobra sitio por un tubo entonces alguien podria decirme como hacerlo??o si hay otra manera explicarmela??
gracias x todo.

safe · #2 (**permalink**) 18/07/2005, 08:16

Usa está funcion creada por Tunait:

Código:

<script language="javascript">
/*****************************************************************************
Pop-up ajustada a foto. Script creado por Tunait!
Si quieres usar este script en tu sitio eres libre de hacerlo con la condición de que permanezcan intactas estas líneas, osea, los créditos.
No autorizo a publicar y ofrecer el código en sitios de script sin previa autorización
Si quieres publicarlo, por favor, contacta conmigo.
http://javascript.tunait.com/
[email protected] 
******************************************************************************/

var titulopordefecto = "MI TITULO"; //Si no se especifica un título al llamar a la función colocará el que se especifique aquí
var ventana;
var cont=0;

function afoto(cual,titulo)
{
if(cont==1){ventana.close();ventana=null}
if(titulo==null){titulo=titulopordefecto}
ventana=window.open('','ventana','width=300, height=300, resizable=yes,scrollbars=no')
ventana.document.write('<html><head><title>' + titulo + '</title></head><body onLoad="opener.redimensionar()" style="overflow:hidden" marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" scroll="no" onUnload="opener.cont=0"><img src="' + cual + '" onLoad="opener.redimensionar(this.width, this.height)">');
ventana.document.close();
cont++;
}
function redimensionar(ancho, alto)
{
ventana.resizeTo(ancho+12,alto+28);
ventana.moveTo((screen.width-ancho)/2,(screen.height-alto)/2); //centra la ventana. Eliminar si no se quiere centrar el popup
}
</script>

Y para llamar usás:

Código:

afoto('foto.jpg','titulo')

Saludos

PD: antes de preguntar conviene usar el buscador.. hubieras encontrado la respuesta mucho mas rapido

orhko · #3 (**permalink**) 18/07/2005, 08:55

Hola Safe
ante todo darte las gracias por la contestacion.
aunque me gustaria preguntarte unas cosillas

veras, he copiado el primer bloque en el head del html, despues he creado una tabla y he insertado una imagen, despues detras del codigo de donde venia la imagen he puesto lo del segundo bloque y la verdad no aparece nada.
no se si es asi o de otra manera, podrias explicarme?
gracias de antemano.

orhko · #4 (**permalink**) 18/07/2005, 09:18

Esto es lo que he puesto yo:
<table width="526" height="335" border="0" cellpadding="0" cellspacing="0">
<td><a href=afoto('24.jpg','TITULO')><img src="fotos/21.jpg"') width="500" height="330" border="0" ></a></td>
</table>

quizas de esta maneras sea mas rapido.

safe · #5 (**permalink**) 18/07/2005, 09:21

ningun problema... el segundo bloque que puse es como hacer la llamada a la funcion. Pero eso no va solo sino que debes hacerlo mediante algun evento que tu elijas.
Los eventos son los famosos onLoquesea="" que refieren a una accion especifica... creo que la mejor forma de hacer lo que queres es usando el evento onClick (osea.. que se ejecute la funcion cuando se hace click)... para esto lo mas recomendable seria poner:

Código:

<a href="#" onClick="afoto('foto.jpg','Esta es mi linda fotito')"><img src="foto.jpg" border="0" /></a>

orhko · #6 (**permalink**) 18/07/2005, 10:14

ok ahora mas o menos funciona, yo aplico este codigo
a href="#" onClick="afoto('24.jpg','Esta es mi linda fotito')"><img src="fotos/3.jpg" width="640" height="459"></a>

aunque el "#" no se lo que significa.
cuando clico en la foto, se abre un pop up, pero es diminuto, no se adecua al tamaño de la foto, claro que si yo cojo y estiro el pop up si.
Donde puedo hacer que cambie eso?
gracias safe.

safe · #7 (**permalink**) 18/07/2005, 10:59

mmm... antes que nada: el # del href es simplemente para que el enlace no lleve a otro documento cuando hacés clic sobre el.
Con respecto a lo otro es raro lo que decis que pasa.. porque la funcion lo que hace es abrir un popup de 300 * 300 pixeles y una vez que se carga la imagen el popup se centra en la pagina y toma el mismo tamaño que la foto.

Por como estas poniendo el codigo, la foto esta en lamisma carpeta que el archivo html ¿estas seguro que es asi? no deberia ser: onClick="afoto('fotos/24.jpg','Esta es mi linda fotito')

orhko · #8 (**permalink**) 19/07/2005, 02:55

hola Safe.
la verdad es que no sale por mas que lo intento sigue saliendo la ventana pequeña, el tema es que cuando pincho en un principio la foto sale en grande, pero en un segundo se queda en pequeño arriba en la izquierda.
te mando una prueba que he exo bastante basica, para ver si tu sabes que hago mal.
Pincha aqui www.angelidimoni.com/Escritorio.rar
espero que tu encruentres el falllo y muchas gracias por todo.

seoista · #9 (**permalink**) 19/07/2005, 05:57

Vamos a ver.

Este es el código de TU LINK link de ejemplo:

Código:

<script language="javascript">
/**************************************************  ***************************
Pop-up ajustada a foto. Script creado por Tunait!
Si quieres usar este script en tu sitio eres libre de hacerlo con la condición de que permanezcan intactas estas líneas, osea, los créditos.
No autorizo a publicar y ofrecer el código en sitios de script sin previa autorización
Si quieres publicarlo, por favor, contacta conmigo.
http://javascript.tunait.com/
[email protected] 
**************************************************  ****************************/

var titulopordefecto = "MI TITULO"; //Si no se especifica un título al llamar a la función colocará el que se especifique aquí
var ventana;
var cont=0;

function afoto(cual,titulo)
{
if(cont==1){ventana.close();ventana=null}
if(titulo==null){titulo=titulopordefecto}
ventana=window.open('','ventana','width=300, height=300, resizable=yes,scrollbars=no')
ventana.document.write('<html><head><title>' + titulo + '</title></head><body onLoad="opener.redimensionar()" style="overflow:hidden" marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" scroll="no" onUnload="opener.cont=0"><img src="' + cual + '" onLoad="opener.redimensionar(this.width, this.height)">');
ventana.document.close();
cont++;
}
function redimensionar(ancho, alto)
{
ventana.resizeTo(ancho+12,alto+28);
ventana.moveTo((screen.width-ancho)/2,(screen.height-alto)/2); //centra la ventana. Eliminar si no se quiere centrar el popup
}
</script>

A tu código le SOBRA lo que está en ROJO.

Y este es el código que te ha puesto safe:

Código:

<script language="javascript">
/**************************************************  ***************************
Pop-up ajustada a foto. Script creado por Tunait!
Si quieres usar este script en tu sitio eres libre de hacerlo con la condición de que permanezcan intactas estas líneas, osea, los créditos.
No autorizo a publicar y ofrecer el código en sitios de script sin previa autorización
Si quieres publicarlo, por favor, contacta conmigo.
http://javascript.tunait.com/
[email protected] 
**************************************************  ****************************/

var titulopordefecto = "MI TITULO"; //Si no se especifica un título al llamar a la función colocará el que se especifique aquí
var ventana;
var cont=0;

function afoto(cual,titulo)
{
if(cont==1){ventana.close();ventana=null}
if(titulo==null){titulo=titulopordefecto}
ventana=window.open('','ventana','width=300, height=300, resizable=yes,scrollbars=no')
ventana.document.write('<html><head><title>' + titulo + '</title></head><body onLoad="opener.redimensionar()"  style="overflow:hidden" marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" scroll="no" onUnload="opener.cont=0"><img src="' + cual + '" onLoad="opener.redimensionar(this.width, this.height)">');
ventana.document.close();
cont++;
}
function redimensionar(ancho, alto)
{
ventana.resizeTo(ancho+12,alto+28);
ventana.moveTo((screen.width-ancho)/2,(screen.height-alto)/2); //centra la ventana. Eliminar si no se quiere centrar el popup
}
</script>

Se te ha escapado poner lo que está detrás de body (que he puesto en AZUL) del código de safe.

Creo que es eso.

Saludos

[E D I T O] Debes QUITAR lo que puse en AZUL en vez de añadirlo. Perdona el fallo. [/E D I T O]

safe · #10 (**permalink**) 19/07/2005, 08:03

Hola orhko y seoista...

orhko: lo que le falta a tu codigo es lo fundamental para que se adapte al tamaño...

seoista: el width y height predeterminados están como para que el popup se abra con x tamaño siempre y despues se adapte... pero me imagino que no hay problema con sacarlo.

orhko · #11 (**permalink**) 20/07/2005, 09:08

gracias a los dos ya esta.