Mini Foto y clic -poup- y clic para que desaparezca?

palosanto · #1 (**permalink**) 13/11/2004, 08:32

Hola,
¿alguien sabe qué tipo de javascpt usan en esta web:

http://todopocketpc.com/analisis_ver...d_articulo=174

y qué tendría que hacer para que las fotos se habran y se cierren con un sólo clic?

Lo necesito para las revisiones que estoy haciendo en mi página sobre la guitarra cláisica ya que actualmente vinculo de la foto pequeña a la foto grande... y pienso que esta función que os comento es muuuucho más profesional.

No estoy hablando de una galería, sino de poner en enlace de una foto pequeña a un popup con la foto grande al hacer clic y que para cerrar la ventana sólo haya que hacer clic en cualquier parte de la imagen.

Gracias a cualquiera que me pueda echar un cable.

Saludos desde Asturias:

Palosanto

angsanchez · #2 (**permalink**) 13/11/2004, 09:54

Hola, Palosanto
En la página que dices no veo el efecto, pero por la descripción creo que esto es lo que quieres:

Código:

<HTML>
<HEAD>
<script language="JavaScript" type="text/JavaScript">
function ponImagen(nombre,ancho,alto) {
	ancho+=20, alto+=20  //dejar margen para el navegador
	var anchoMini=50, altoMini=50 //tamaño fijo para las miniaturas
//puedes cambiar los valores de arriba
	var tx1 = '<a href="javascript:ampliar(\'' + nombre + '\',' + ancho + ',' + alto + ')">'
	tx1 += '<img src="' + nombre + '" border=0 width=' + anchoMini + ' height= ' + altoMini 
	tx1 += '></a>'
	document.write(tx1)
}
function ampliar(nombre,ancho,alto) {
	var ventanaImagen = window.open('','','width=' + ancho + ',height=' + alto)
	var tx2 ='<html><body>'
	tx2 += '<img src="' + nombre + '" onClick="window.close()"' 
	tx2 += ' alt="pulsa para cerrar" title="pulsa para cerrar"' 
//La línea de arriba la puedes borrar entera si no quieres la ayuda visual o tooltip, pero para ello he cambiado un poco la siguiente
	tx2 += '></body></html>'
	with (ventanaImagen.document) { write(tx2); close()	}
}
</script>
</HEAD>

<BODY>
Pulsa en la imagen para ampliarla<br>
<script language="JavaScript" type="text/JavaScript">
ponImagen('imagengrande.gif',563,550)
//El contenido de ponImagen debes modificarlo con el nombre, el ancho y el alto de tu archivo GIF o JPG
</script>
</BODY>
</HTML>

Ha costado un poco, pero queda bien.

palosanto · #3 (**permalink**) 13/11/2004, 11:01

Gracias por tu respuesta

Dale a la imagen de la caja de cartón... me refería a ese scrip!!!!!

¿es eso lo mismo que lo que tu me has indicado?

Saludos:

Palosanto

angsanchez · #4 (**permalink**) 13/11/2004, 12:08

Caramba, no se me había ocurrido mirar en la caja. Me quedé en los iconos de arriba.
Sí, creo que es resultado es el mismo, aunque (en mi Firefox 1.0PR) la ventana de imagen grande con la caja no es lo suficientemente grande, sale la barra de desplazamiento vertical... o sea que no está tan bien hecho

En mi código cabe toda

Echaré un vistazo al código de la página original para comparar.
Cuando consigas adpatarlo a tu página, avisa, porfa.

palosanto · #5 (**permalink**) 13/11/2004, 12:31

Hola,
para usar el script... tengo dudas.

Perdona pero aunque he usado varios JS en mi web no tengo claro somo usar este ¿podrías indicarme (editando tu post) con unos comentarios al código qué líneas editar?

Por cierto, no quiero que debajo ponga "ampliar imagen". Ya avisaré de otra forma...

Gracias por adelantado:

Palosanto

angsanchez · #6 (**permalink**) 13/11/2004, 12:44

He añadido comentarios arriba (en rojo). Prácticamente no tienes que cambiar nada, salvo los datos de la imagen en el BODY.

Cita:

Por cierto, no quiero que debajo ponga "ampliar imagen". Ya avisaré de otra forma...

¿Debajo? ¿a dónde te refieres? ¿a la línea de estado del navegador? Lo que aparece ahí es la llamada a javascript, se puede ocultar pero cuesta un poco.

angsanchez · #7 (**permalink**) 13/11/2004, 13:04

Ya he encontrado el código para ocultar el enlace en la línea de estado. La primera función quedaría así:

Código:

function ponImagen(nombre,ancho,alto) {
	ancho+=20, alto+=20  //dejar margen para el navegador
	var anchoMini=50, altoMini=50 //tamaño fijo para las miniaturas
//puedes cambiar los valores de arriba
	var tx1 = '<a href="javascript:ampliar(\'' + nombre + '\',' + ancho + ',' + alto + ')"'
	tx1 += 'onMouseOver="window.status=\'\';return true" onMouseOut="window.status=\'\';return true">'	
        tx1 += '<img src="' + nombre + '" border=0 width=' + anchoMini + ' height= ' + altoMini 
	tx1 += '></a>'
	document.write(tx1)
}

Ya no se ve el destino al pasar el ratón por encima de la miniatura, pero se sigue viendo al hacer clic. No me atrevo a tocar más el código.

palosanto · #8 (**permalink**) 13/11/2004, 13:54

Vale,
me funciona en el Mozilla pero he tenido problemas con el explorer pues aun no lo tengo configurado después de las instalación del ServicePack 2

No entiendo qué es lo que hace la llamada a la imagen pequeña pues no estoy poniendo su nombre en ningún sitio ¿es el tamaño que de doy?

Por otro lado lo que quiero es poner varias imágenes en una misma página con miniaturas que van a ser de distintos tamaños... no se si me explico.

Si he entendido bien tu script, no podría colocar y justificar como yo quiera la imagen-miniatura con el dreamweaver porque es el script el que la pone ¿no?

Me parece un poco todo esto, pensé que sería más sencillo

Enciéndeme una luz angsanchez a ver si me empapo un poco más por favor...

Saludos desde Asturias:

Palosanto

angsanchez · #9 (**permalink**) 13/11/2004, 16:35

Tranquilo, retienes todo el control sobre la posición.

1) En el sitio donde tú pondrías la imagen pequeña debes poner esta parte:

Código:

<script language="JavaScript" type="text/JavaScript">
ponImagen('imagengrande.gif',563,550)
</script>

Cita:

Si he entendido bien tu script, no podría colocar y justificar como yo quiera la imagen-miniatura con el dreamweaver porque es el script el que la pone ¿no?

Sí, puedes colocar y justificar como quieras envolviendo al script, éste pone la imagen pero no fuerza dónde. Pruébalo. Por ejemplo, dentro de una celda de tabla
<td><script...etc></script></td>
o dentro de una capa
<div><script...etc></script></div>

2) Según lo he hecho, no existe un archivo de imagen pequeña, sino que sólo existe la grande, que se ve encogida primero y a tamaño completo después. El nombre del archivo se lo das como argumento (en mi ejemplo, "imagengrande.gif"). La función está haciendo las dos cosas, poner la pequeña (a tamaño fijo) y llamar a la grande (a su propio tamaño).

3) Si vas a tener archivos separados para la pequeña y la grande, lo podemos modificar, pero primero asegúrate de que esto es lo que querías y te funciona.

4) Ya entendí que querías poner varias miniaturas en la página. Las he puesto del mismo tamaño porque es más fácil, pero si necesitas que sean diferentes se puede mirar.

Voy a trabajar la forma de poner archivos independientes de miniaturas y grandes, y cada una de un tamaño diferente. Pero antes prueba de este modo.

¿Cómo tienes pensado definir las imágenes y sus tamaños? ¿Con una matriz de datos? Haría falta para cada una:
- nombre de archivo mini
- nombre de archivo grande
- ancho y alto de mini
- ancho y alto de grande
eso son 6 parámetros para cada imagen ¿lo piensas hacer así?

palosanto · #10 (**permalink**) 13/11/2004, 17:00

Millones de gracias por tu respuesta.
te entiendo, yo no tendría que poner dos imágenes enlazadas (que es lo que siempre he hecho) sino que el script redimensiona la imagen y crea el popup y por tanto, como dices, sólo tengo que poner el nombre de la foto grande

Ya tengo las imagenes preparadas y tengo pensado el tamano de las miniaturas pero casi todas son distintas. Mira, algo aprecido a lo que quiero lo hice hace meses esta sección de mi web con el Dreamweaver:

http://guitarra.artelinkado.com/pagi...s_guitarra.htm

donde enlazo a las imágenes pequeñas nuevos archivos HTML con las imágenes grandes. Lo que pasa es que quería la función cerrar al hacer clic, por eso solicité tu ayuda.

Lo de justificar el Scrip, creo que sabría hacerlo sin problemas ¡Gracias!

Sobre lo que comentas, no se qué quieres decir con esto:

Cita:

¿Cómo tienes pensado definir las imágenes y sus tamaños? ¿Con una matriz de datos?

¿No tengo que poner el Scrip para cada imagen? Pues modificando los datos en cada script ya lo tendría solucionado ¿o no?

Para terminar, tenía pensado que era un error de principiantes poner una imagen grande (que pesa bastante en KB) reducida pues así tarda mucho más en cargar la página. Entiendo que hoy en día mucha gente tiene ADSL pero ¿merece la pena poner los archivos grandes directamente en la página?

Gracias otra vez por tu tiempo. Saludos:

Palosanto

angsanchez · #11 (**permalink**) 13/11/2004, 17:08

Cita:

¿No tengo que poner el Scrip para cada imagen? Pues modificando los datos en cada script ya lo tendría solucionado ¿o no?

Sí, usando sólo una imagen ya está todo. Te dije eso porque parecía que querías usar dos archivos.

Cita:

Para terminar, tenía pensado que era un error de principiantes poner una imagen grande (que pesa bastante en KB) reducida pues así tarda mucho más en cargar la página. Entiendo que hoy en día mucha gente tiene ADSL pero ¿merece la pena poner los archivos grandes directamente en la página?

Tienes razón, si las imágenes son grandes (o muchas) retarda la carga de la página, y si el usuario no las va a a abrir es tontería. Únicamente busqué la solución más rápida. Por otro lado, del otro modo tienes que generar miniaturas para todas. Todo depende de lo grandes que sean los archivos.

Voy a mirar tu página y también a intentar cambiar el código para que puedas hacerlo con miniaturas de verdad, pero entonces hay que darle el doble de datos. Si usas un nombre similar para la mini y la grande, como flor-p.gif y flor.gif, se podrá simplificar un poco.

Hasta otra

angsanchez · #12 (**permalink**) 13/11/2004, 17:30

Bueno, aquí estoy de nuevo, ha sido fácil a partir de lo anterior. Debes tener un archivo grande (en el ejemplo, "imagen.gif") y otro pequeño que debe ser el mismo nombre pero acabado en "_peq" (imagen_peq.gif). Ambos con la misma extensión.

En el sitio de la miniatura pones el script dando como argumentos
- el nombre base de archivo (sin extensión)
- la extensión (sin punto)
- el ancho y alto de la miniatura
- el ancho y alto de la imagen grande
- el título para la ventana de imagen grande (esto lo he añadido viendo tu página)

Código HTML:

<script language="JavaScript" type="text/JavaScript">
ponImagen2('imagen','gif',56,55,560,550,'Título de ventana')
</script>

Luego, en el HEAD defines las dos funciones:

Código:

function ponImagen2(nombre,ext,anchoMini,altoMini,ancho,alto,titu) {
	ext = '.'+ext
	ancho+=20, alto+=20  //dejar margen para el navegador
	var tx1 = '<a href="javascript:ampliaImagen(\'' + nombre+ext + '\',' + ancho + ',' + alto + ',\'' + titu +'\')" '
	tx1 += 'onMouseOver="window.status=\'\';return true" onMouseOut="window.status=\'\';return true">'
	tx1 += '<img src="' + nombre + '_peq' + ext + '" border=0 width=' + anchoMini + ' height= ' + altoMini 
	tx1 += '></a>'
	document.write(tx1)
}

function ampliaImagen(nombre,ancho,alto,titu) {
	var ventanaImagen = window.open('','','width=' + ancho + ',height=' + alto)
	var tx2 ='<html><head><title>' + titu + '</title></head><body>'
	tx2 += '<img src="' + nombre + '" onClick="window.close()"' 
	tx2 += ' alt="pulsa para cerrar" title="pulsa para cerrar"'
	tx2 += '></body></html>'
	with (ventanaImagen.document) { write(tx2); close()	}
}

Y ¡hale! a generar imágenes emparejadas