Foros del Web » Creando para Internet » HTML »

Como amoldar un pop-up

Estas en el tema de Como amoldar un pop-up en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 18/07/2005, 05:22
Avatar de orhko  
Fecha de Ingreso: abril-2005
Mensajes: 92
Antigüedad: 19 años, 7 meses
Puntos: 0
Como amoldar un pop-up

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

<!--
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,men ubar=0,resizable=0,width=600,height=600');");
}
// -->
</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.
__________________
lAngel&Dimoni
  #2 (permalink)  
Antiguo 18/07/2005, 08:16
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 21 años, 9 meses
Puntos: 10
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
__________________
oohh... quisiera ser godines!!!

Última edición por safe; 18/07/2005 a las 08:29
  #3 (permalink)  
Antiguo 18/07/2005, 08:55
Avatar de orhko  
Fecha de Ingreso: abril-2005
Mensajes: 92
Antigüedad: 19 años, 7 meses
Puntos: 0
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.
__________________
lAngel&Dimoni
  #4 (permalink)  
Antiguo 18/07/2005, 09:18
Avatar de orhko  
Fecha de Ingreso: abril-2005
Mensajes: 92
Antigüedad: 19 años, 7 meses
Puntos: 0
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.
__________________
lAngel&Dimoni
  #5 (permalink)  
Antiguo 18/07/2005, 09:21
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 21 años, 9 meses
Puntos: 10
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>
__________________
oohh... quisiera ser godines!!!
  #6 (permalink)  
Antiguo 18/07/2005, 10:14
Avatar de orhko  
Fecha de Ingreso: abril-2005
Mensajes: 92
Antigüedad: 19 años, 7 meses
Puntos: 0
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.
__________________
lAngel&Dimoni
  #7 (permalink)  
Antiguo 18/07/2005, 10:59
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 21 años, 9 meses
Puntos: 10
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')
__________________
oohh... quisiera ser godines!!!
  #8 (permalink)  
Antiguo 19/07/2005, 02:55
Avatar de orhko  
Fecha de Ingreso: abril-2005
Mensajes: 92
Antigüedad: 19 años, 7 meses
Puntos: 0
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.
__________________
lAngel&Dimoni
  #9 (permalink)  
Antiguo 19/07/2005, 05:57
Avatar de seoista  
Fecha de Ingreso: septiembre-2003
Ubicación: Pues leyéndote
Mensajes: 1.076
Antigüedad: 21 años, 2 meses
Puntos: 59
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]

Última edición por seoista; 19/07/2005 a las 12:01
  #10 (permalink)  
Antiguo 19/07/2005, 08:03
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 21 años, 9 meses
Puntos: 10
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.
__________________
oohh... quisiera ser godines!!!
  #11 (permalink)  
Antiguo 20/07/2005, 09:08
Avatar de orhko  
Fecha de Ingreso: abril-2005
Mensajes: 92
Antigüedad: 19 años, 7 meses
Puntos: 0
gracias a los dos ya esta.
__________________
lAngel&Dimoni
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.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:34.