Foros del Web » Creando para Internet » Diseño web »

albumcito de fotos

Estas en el tema de albumcito de fotos en el foro de Diseño web en Foros del Web. Hola gente en una página que he hecho, coloqué miniaturas de imágenes en 200x150 me gustaría que se pudiera dar click en ellas y se ...
  #1 (permalink)  
Antiguo 10/12/2008, 10:53
 
Fecha de Ingreso: septiembre-2007
Mensajes: 41
Antigüedad: 10 años, 3 meses
Puntos: 0
albumcito de fotos

Hola gente

en una página que he hecho, coloqué miniaturas de imágenes en 200x150

me gustaría que se pudiera dar click en ellas y se abriera la ventana con el tamaño exacto de la foto, para verla en grande....

¿Cómo lo hago?

de momento lo probé con abrir en ventana nueva, pero se abre ventana completa del navegador, con la foto

y yo quisiera que se abriera como pop up, no con todas las herramientas del navegador y del tamaño exacto de la foto, no con todo el espacio en blanco restante de la pagina

graciasssssssssssssssss
  #2 (permalink)  
Antiguo 10/12/2008, 11:34
Avatar de ElJavista
Colaborador
 
Fecha de Ingreso: marzo-2007
Ubicación: Lima Perú
Mensajes: 2.231
Antigüedad: 10 años, 9 meses
Puntos: 67
Respuesta: albumcito de fotos

No es recomendable hacerlo con popup porque navegadores con el Firefox lo bloquería, debes abrirlo en una capa, con eso no hay problemas. Para hacerlo bueno, sigue los siguientes pasos:

En primer lugar debes crear la capa conteniendo una etiqueta img con src vacío. De este modo:

<div id=\"divImg\"><img src=\"\" /></div>

Esto debe estar entre el <head> y </head>. Bien a esa capa debes darle estilo para que al principio no se muestre y que tenga posición absoluta:

#divImg {
position: absolute;
visibility: hidden;

}

Asimismo podrías añadirle un fondo y un borde si te parece, todo eso con CSS. Bien, ahora tiene que hacer que cuando le des click a las miniaturas aparesca la capa con la imagen de tamaño real. Aquí hay un problema, para centrar esta capa hace falta conocer el ancho y el alto real de la imagen. Si trabajas con PHP puedes usar esto para obtenerlos.

list($w, $h) = getimagesize('imagen.jpg');

Pero estoy pensando que no usas PHP y talvez podría ser que todas las imagenes de tamaño real tengan un solo tamaño, eso simplificaría las cosas. Así que vamos a asumir que así es: que no usas PHP y que todas las imagenes tienen el mismo tamaño:

Bien, entonces en las miniaturas debes colocar este código, en cada una:

<img src='miniatura.jpg' onclick="capa('imagenreal.jpg')" />

OK, ahora vamos a definir la función que muestra las imagenes en tamaño real, debe ser así:

<script language="JavaScript">
function capa(img) {
var cap = document.getElementById('divImg');
cap.style.left = '100px'; // Esto puedes manipularlo hasta que cuadre en el centro
cap.style.top = '70px'; // Igual esto
cap.getElementsByTagName('img')[0].src = img;
cap.style.visibility = 'visible';
}
</script>

Debes de saber que eso se debe insertar entre <head> y </head>. Bien también los valores que centren la capa podrían haberse definido en el estilo, pero lo hice de este modo pensando que en que talvez las imágenes no son de un mismo tamaño y bueno, en ese caso se tendría que definir la posición de la capa mediante el JavaScript.

Espero que te sirva, si tienes algún problema con esto me avisas.
  #3 (permalink)  
Antiguo 10/12/2008, 11:34
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
Respuesta: albumcito de fotos

Hola:

Los popups son cosas de javascript, así que reportaré el mensaje para que lo muevan a ese foro... de todos modos, las imágenes en grande deben estar en el servidor, por lo tanto creo que es mejor solo subir las imágenes grande y usar un script en el lenguaje que admita tu servidor para reducir las imágenes.

... Por vierto, en las FAQs javascript hay algún mensaje al respecto.

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




La zona horaria es GMT -6. Ahora son las 15:50.