pseudo-lightbox

[caricatos]

Hola:

Con unas funciones auxiliares y unos retoques, ya tiene transiciones:

Código:

<script type="text/javascript" >
ie = (document.all) ? true:false;
fondo = "gray";
function tag(id)	{return document.getElementById(id);}
function opacar(capa, _n)	{
	__n = _n / 10
	with(tag(capa).style)	{
		(ie)	?	filter = "alpha(opacity=" + _n + "0)" : opacity = __n;
	}
}

function mostrar(que)	{
	var x, y, an, al;
	x = (ie) ? document.documentElement.scrollTop + "px" : window.scrollY + "px";
	y = (ie) ? document.documentElement.scrollLeft + "px" : window.scrollX + "px";
	al = window.document.documentElement.clientHeight + "px";
	an = window.document.documentElement.clientWidth + "px";
	pop = document.createElement("div");
	with(pop.style)	{
		top = x;
		left = y;
		height = al;
		width = an;
		position = "absolute";
	}
	pop2 = pop.cloneNode(true);
	pop.id = "pop";
	pop2.id = "pop2";
	with(pop.style)	{
		(ie)	?	filter = "alpha(opacity=0)" : opacity = "0";
		backgroundColor = fondo;
	}
	with(pop2.style)	{
		(ie)	?	filter = "alpha(opacity=0)" : opacity = "0";
		background = "transparent url(../dibujos/reloj.gif) no-repeat center center";
	}
	im = document.createElement("img");
	with(im.style)	{
		visibility = "hidden";
		position  = "absolute";
		border = "3px inset gray";
		cursor = "pointer";
	}
	im.onload = function()	{
		pop2.style.backgroundImage = "";
		this.style.backgroundColor = "white";
		xx = (parseInt(an) -  this.width) / 2;
		yy = (parseInt(al) - this.height) / 2;
		this.style.top = yy + "px";
		this.style.left = xx + "px";
		this.style.visibility = "visible";
		for (opacando = 1; opacando <= 10; opacando ++)	setTimeout("opacar('pop2', " + opacando + ")", opacando * 50 + 500);
	}
	im.src = que;
	pop2.appendChild(im);
	document.body.style.overflow = "hidden";
	document.body.appendChild(pop);
	document.body.appendChild(pop2);
	for (opacando = 1; opacando < 10; opacando ++)	setTimeout("opacar('pop', " + opacando + ")", opacando * 50);
	im.onclick = function()	{
		for (opacando = 1; opacando < 10; opacando ++)	setTimeout("opacar('pop', " + (10 - opacando) + ")", opacando * 50);
		for (opacando = 0; opacando < 10; opacando ++)	setTimeout("opacar('pop2', " + (10 - opacando) + ")", opacando * 50 + 500);
		setTimeout("document.body.removeChild(tag('pop2'))", 1000);
		setTimeout("document.body.removeChild(tag('pop'))", 1000);
		document.body.style.overflow = "auto";
	}
}
</script>

Sigue cerrandose pinchando sobre la propia imagen, y en algunos navegadores puede hacer scroll con el teclado o la rueda del ratón (un par de cosillas para mejorar); además puede cambiarse el color del fondo...
Otra posibilidad sería modificar la velocidad de las transiciones.

Saludos