Hola:
Como no me gustan los "prefabricados", me puse a codificar ese efecto, y salió ésto:
Código:
<script type="text/javascript" >
ie = (document.all) ? true:false;
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);
with(pop.style) {
(ie) ? filter = "alpha(opacity=80)" : opacity = ".8";
backgroundColor = "#eeeeee";
}
with(pop2.style) {
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() {
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";
}
im.src = que;
pop2.appendChild(im);
document.body.style.overflow = "hidden";
document.body.appendChild(pop);
document.body.appendChild(pop2);
im.onclick = function() {
document.body.removeChild(pop2);
document.body.removeChild(pop);
document.body.style.overflow = "auto";
}
}
</script>
No tiene transiciones ni florituras especiales, pero tampoco hay que cargar extensas librerías, y es fácilmente retocable (quién quiera meter las pezuñas...
)
Para usarlo solo hay que poner: onclick="mostrar('imagen.gif')", está probado en explorer 6, firefox portable, chrome, opera unite y safari.
Saludos
