Ver Mensaje Individual
  #2 (permalink)  
Antiguo 10/12/2008, 11:34
Avatar de ElJavista
ElJavista
Colaborador
 
Fecha de Ingreso: marzo-2007
Ubicación: Lima Perú
Mensajes: 2.231
Antigüedad: 17 años, 1 mes
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.