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