Página que se oscurece y imagen en grande

[jm00092]

Hola. Quisiera hacer el efecto que tienen muchas páginas para ampliar una imagen donde se pone la pantalla oscurecida y la imagen aparece en el centro encima de todo lo demás.

Por ejemplo...
http://firefox-3.softonic.com/
https://addons.mozilla.org/en-US/firefox/addon/1122

(Clic en una de las imágenes de ejemplo para verlo)


Lo que necesito no hace falta que sea tan sofisticado, sin efectos de transición ni nada. Quisiera que cuando le den a la imagen en miniatura se oscurezca la pantalla y salga la grande en el centro., y despues cuando hagan clic en la grande, desaparezca y se quede la página como estaba.

He probado con capas transparentes y no lo cubren todo, o la imagen también se ve transparente, no sé cual javascript usar para seleccionar la imagen... todo va fallando. A ver si hay algún ejemplo que ya esté hecho. GRACIAS

[K-Yezaad]

Quiero aclarar que no he podido probar esto, pero en teoria deberia funcionar:

1.Para oscurecer todo es necesario un div que abarque toda la pagina y que este en fixed para que al hacer scroll se quede alli:

Código:

#contenedor{
background:#000;
/*Este atributo nos dice que tan transparente es nuestro div negro. 
Solo funciona en Firefox, pero creo que hay un equivalente en IE*/
opacity:0.7;
position:fixed;
top:0; left:0;
height: 100%;
width: 100%;
}

2. Con esto tendrias un"velo" que oscurece la pagina, ahora necesitas centrar tu imagen dentro. Aqui se usaria posicion absoluta:

Código:

#contenedor img{
/*Esto nos crea un marco de 5 pixeles, es opcional*/
background:#fff; padding: 5px;

position:absolute;
top: 50%; left: 50%;

/*Ojo con estos valores, aqui pones el alto y ancho de tu imagen,  
y despues le pones la mitad de cada valor como margen negativo... 
¿porque? porque al ponerle top y left en 50%, la esquina superior izquierda 
queda en el exacto centro de la pagina, asi que 
hay que mover la imagen arriba y a la izquierda para ajustarla bien*/
height: 300px;
width: 200px;
margin-top: -150px;
margin-left: -100px;
}

3. Con javascript lo que harias seria crear una funcion que esconda o muestre ese contendor con todo e imagen

Código:

function ocultar(divId){
	var obj = document.getElementById(divId);
	if(obj.style.display == 'block'){
		obj.style.display = 'none';
	}else{
		 obj.style.display = 'block';
	}
}

4. Y lo que tendrias que hacer seria crear dos botones que tuvieran onClick="ocultar('contendor')", uno que llame la vista previa, y otro dentro de "contendor" para ocultarla, porque cuando ese div aparezca tapara a todos los demas.

Si te funciona avisame :P

[kseso?]

lightbox

K-Yezaad:

{filter: alpha(opacity=50); /* de 0= totalmente trasparente, a 100)*/
-moz-opacity: 0.5; /* de 0 a 1, 0= totalmente trasparente*/
opacity: 0.5;} /*idem*/

[jm00092]

Muchas gracias por vuestras respuestas tan rápidas y acertadas

K-Yezaad
He probado el código y parece que le falta algo, pero de todas formas me lo quedo como guía para otras cosas.

kseso?
Pues eso se llamaba lightbox
La importancia de saber como se llaman las cosas para poder buscarlas en google sin dar tantas vueltas.
He usado uno de los javascript prefabricados que sugieren en anieto2k y ya funciona "como las de verdad" :)

[kseso?]

Si ya lo dedía Bod Gylan en sus años mozos:

"Man gives name to all the animals"

y detras vinieron los glosarios

[Erebus]

Iniciado por kseso?

lightbox

right
es muy facil adaptar lightbox para que funcione con fotos
es un poco mas entretenido hacer que funcione cuando hay objetos flash en el sitio
pero toooodavia mas entretenido cuando hay un flash video player en el sitio x)