Hola
Para añadir una imagen solo tienes que poner la correspondiente etiqueta html con el enlace dentro de el div .white_content
Código HTML:
Ver original<div id="light" class="white_content"> This is the lightbox content.
<img src="aqui_el_enlace_de_la_foto.jpg" alt="Titulo Foto"> <a class="cerrar" href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">X
</a>
Y para que aparezca al abrir la ventana directamente, solo tienes que editar el atributo display:none; delas clases por display:block;
Código CSS:
Ver original.black_overlay{
display: block;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: block;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: none;
box-shadow: 0px 0px 5px #000;
background-color: white;
z-index:1002;
}
Te dejo un ejemplo con una imagen ya puesta y un estilo diferente para cerrar la ventana: http://jsfiddle.net/mbm150/fuynq76k/
Saludos.