A.L.I. (Beta, sin nombre)

Pensando en el Light-Box… dije: voy a intentar una mini versión del mismo, pero de 1 ó 2 Kb. en vez de 200Kb. y, una vez publicado el Fade-Effect, pensé que sería interesante acoplarlo con el otro efecto: el redimensinar con animación las imágenes, y, aquí está; de manera es que, 1+1+capa traslúcida en primer plano=La Caja Iluminada con Imágenes, eso sí, con un tamaño de unos 4Kb. escasos. Un apunte, el código no tiene nada que ver con el script original, es más, no he visto el código fuente, entre otras, porque ése no es mi estilo de hacer las cosas: no “mato mosquitos a cañonazos”; perdón por la ironía.

 
<script language=”javascript” type=”text/javascript”>
<!– Copyleft 2006 – 2009, ScriptShow – scriptshow@hotmail.com –>
<!– Feel free to use if you leave this header intact! –>
<!–
preload=(“img/slide_0.gif”,”img/slide_1.gif”,”img/slide_2.gif”,”img/slide_3.gif”);
var preImages = new Array();

for (i = 0; i < preload.length; i++){
preImages = new Image();
preImages.src = preload;
}
timer=null;
function animateLY(obj, wsize, hsize){
window.document[‘imgx’].src=obj;
var el=document.getElementById(‘imgx’);
var w_size = el.offsetWidth;
if (w_size <= wsize){
el.style.width = w_size + 1+”px”;
}
else{clearTimeout(timer);}
var w_size = el.offsetWidth;
if (w_size >= wsize){
el.style.width = w_size – 1+”px”;
}
else{clearTimeout(timer);}
var h_size = el.offsetHeight;
if (h_size >= hsize){
el.style.height = h_size – 1+”px”;
}
else{clearTimeout(timer);}
var h_size = el.offsetHeight;
if (h_size <= hsize){
el.style.height = h_size + 1+”px”;
}
else{clearTimeout(timer);}
timer=setTimeout(“animateLY(‘” + obj + “‘,'” + wsize + “‘,'” + hsize + “‘)”, 10);
}
//–>
</script>

<a href=”#” onclick=”animateLY(‘img/slide_0.gif’,’200′,’200′)”><img src=”img/slide_0.gif” width=”20″ height=”20″ border=”0″></a>
<a href=”#” onclick=”animateLY(‘img/slide_1.gif’,’150′,’100′)”><img src=”img/slide_1.gif” width=”20″ height=”20″ border=”0″></a>
<a href=”#” onclick=”animateLY(‘img/slide_2.gif’,’100′,’200′)”><img src=”img/slide_2.gif” width=”20″ height=”20″ border=”0″></a>
<a href=”#” onclick=”animateLY(‘img/slide_3.gif’,’200′,’100′)”><img src=”img/slide_3.gif” width=”20″ height=”20″ border=”0″></a>
<br><br><center>
<img id=’imgx’ name=’imgx’ src=’img/slide_x.gif’ width=”50″ height=”50″>
<br><br></center>

 

Pues, eso… hazte un L.B. propio, personalizado, y de pocos Kb.

Un Saludo.

A.L.I. (Beta, sin nombre)

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s