Sé que éste tema es ya algo viejo, pero no está demás ayudar.
Estaba leyendo el téma en el foro e hice el codigo, quizas les sea de ayuda a alguien.
<html>
<head>
<style>
* {
margin: 0px;
}
#imgMostrar {
-moz-box-shadow: 0px 0px 10px white;
-ms-box-shadow: 0px 0px 10px white;
-o-box-shadow: 0px 0px 10px white;
-webkit-box-shadow: 0px 0px 10px white;
cursor: pointer;
}
img.img {
width: 200px;
cursor: pointer;
height: 150px;
}
</style>
<script>
function aumentar(img){
contenedor=document.getElementById("contenedor");
contenedor.style.backgroundColor = 'rgba(0,0,0,0.9)';
contenedor.style.width = '100%';
contenedor.style.height = '100%';
contenedor.style.position = 'fixed';
contenedor.innerHTML = "<br><br><br><center><img id='imgMostrar' width='700px' src="+img.src+"></center>";
contenedor.onclick = quitar;
}
function quitar(){
window.location.reload();
}
</script>
</head>
<body>
<div id="contenedor">
</div>
<br>
<br>
<br>
<!-- COPIAR SOLO LA ETIQUETA IMG Y CAMBIAR UNICAMANETE LA DIRECCION URL DE LA IMAGEN -->
<img class="img" src="http://2.bp.blogspot.com/-gcelxN6QZBc/UHMZ-fxU6pI/AAAAAAAAVLA/7iYRQQUuMw0/s1600/Fondos%2Bde%2BMujeres%2BHermosas%2B-%2BWww.10Pixeles.Com%2B(12).jpgg" onclick="aumentar(this)">
<img class="img" src="http://1.bp.blogspot.com/-G3hL-l1GNJc/T2KYtzxNoiI/AAAAAAAAWs0/cI1JxQWsSkQ/s1600/Camila-Davalos-Hot_01.jpg" onclick="aumentar(this)">
</body>
</html>
Simplifiqué el codigo. Modifiquenlo a la manera de ustedes.