Resulta que el cliente me pide que le haga una "intro" al sitio web, donde se abra y se cierre un acordeon y se vayan mostrando distintas fotos. Esto, basicamente, era flash seguro. Pero como no se flash, acudi a algunos de mis conocimientos en javascript, y logre lo siguiente:
http://localhost/dbk/intro.html
Ahora, como podran ver en el codigo que les pongo a continuacion (que es el mismisimo .js del archivo), a) es muy poco optimo, ya que se repite codigo, b) se complica para grandes cantidades de fotografias, c) el cliente requiere que sean aleatorias las fotos, sino aquel que quiere saltear la intro, va a ver siempre la mimsa, y es medio aburrido.
Código:
Basicamente las funcione intro_x() le dan a un div un ancho especifico, y lo que hago es ejecutar esas funciones, una luego de la otra, en un lapso muy pequeño de tiempo, de modo que se parezca que se abre gradualmente. Luego, una vez que se abre, espero una cantidad de tiempo x (en este caso, 2 segundos) y lo cierro, y cambia la foto del div, y vuelvo a abrir la solapa, y asi 3 veces.
/* ANIMACION INTRO */
function intro_fx(){
intro_dentro();
setTimeout("intro_fuera()",2650);
setTimeout("cambiar_fondo1()",3300);
setTimeout("intro_dentro()",3800);
setTimeout("intro_fuera()",6450);
setTimeout("cambiar_fondo2()",7100);
setTimeout("intro_dentro()",7600);
setTimeout("intro_fuera()",10250);
setTimeout("cambiar_fondo3()",10900);
setTimeout("intro_dentro()",11100);
}
function cambiar_fondo1(){
document.getElementById('cont_foto_intro').style.background = "url('images/intro/intro02.jpg') no-repeat";
}
function cambiar_fondo2(){
document.getElementById('cont_foto_intro').style.background = "url('images/intro/intro03.jpg') no-repeat";
}
function cambiar_fondo3(){
document.getElementById('cont_foto_intro').style.background = "url('images/intro/fondo_intro.gif') no-repeat";
}
function intro_fuera() {
setTimeout ("intro_cero()",650);
setTimeout ("intro_uno()",600);
setTimeout ("intro_dos()",550);
setTimeout ("intro_tres()",500);
setTimeout ("intro_cuatro()",450);
setTimeout ("intro_cinco()",400);
setTimeout ("intro_seis()",350);
setTimeout ("intro_siete()",300);
setTimeout ("intro_ocho()",250);
setTimeout ("intro_nueve()",200);
setTimeout ("intro_diez()",150);
}
function intro_dentro() {
setTimeout ("intro_cero()",50);
setTimeout ("intro_uno()",100);
setTimeout ("intro_dos()",150);
setTimeout ("intro_tres()",200);
setTimeout ("intro_cuatro()",250);
setTimeout ("intro_cinco()",300);
setTimeout ("intro_seis()",350);
setTimeout ("intro_siete()",400);
setTimeout ("intro_ocho()",450);
setTimeout ("intro_nueve()",500);
setTimeout ("intro_diez()",550);
}
/* cont_foto_intro */
function intro_diez () {
document.getElementById('cont_foto_intro').style.width = "464px";
}
function intro_nueve () {
document.getElementById('cont_foto_intro').style.width = "450px";
}
function intro_ocho () {
document.getElementById('cont_foto_intro').style.width = "400px";
}
function intro_siete () {
document.getElementById('cont_foto_intro').style.width = "350px";
}
function intro_seis () {
document.getElementById('cont_foto_intro').style.width = "300px";
}
function intro_cinco () {
document.getElementById('cont_foto_intro').style.width = "250px";
}
function intro_cuatro () {
document.getElementById('cont_foto_intro').style.width = "200px";
}
function intro_tres () {
document.getElementById('cont_foto_intro').style.width = "150px";
}
function intro_dos () {
document.getElementById('cont_foto_intro').style.width = "100px";
}
function intro_uno () {
document.getElementById('cont_foto_intro').style.width = "50px";
}
function intro_cero () {
document.getElementById('cont_foto_intro').style.width = "0";
}
Como podran ver, no es optimo para nada. Con estos 3 ejemplos de foto, funciona perfectamente, pero el cliente me pidio ahora 30/40 fotos de intro, con lo cual se me complica muchisimo.
Del mismo modo, este codigo no permite que sea aleatoria la visualizacion de las imagenes. Yo estoy haciendo un curso de Algoritmos I, donde vemos Python, y en dicho programa existe un modulo llamado random que, dado un rango de numeros, el programa los mezcla (random.shuffle). Existe algo asi en JS? Y seria posible implementarlo para mi caso??
Quiero decirles que intente hacer funcione con parametros, pero al ponerlos dentro de setTimeout("funcion("parametro")",tiempo) no funcionba, supongo que por el tema de las comillas.
Alguna ayuda?? Desde ya, muchas gracias a todos los que puedan aportar su granito de arena para esta optimizacion, ya sea con codigo, links, o aportes de ideas!!!
Saludos!!
Pablo.
