(No sé por dónde empezar ...)
Bien vamos por orden cronológico.
Volví a mirar el código que pusiste,
navegantes, para entender mejor lo que estuviste buscando. Mi idea era que las 20 imágenes no tenían que repetirse, que mostraba 4 vueltas de 5 cada una hasta completarlas todas, pero que el orden cambiaba para cada vez que entrabas a la página.
Mirando ese ejemplo, no estoy seguro de que sea así. De hecho, tampoco sé si no te repite las imágenes entre las cinco. Ese pingpong entre variables 'temporales' no garantiza nada.
Como ya no tienes urgencia, me puse con comodidad a resolver a mi manera el asunto que "entendí" al principio; pensando que sería tan simple como lo describí en mi mensaje anterior, con un par de funciones y un cambio de variables para adaptarlas a cada circunstancia.
Me equivoqué.
O ya estoy gagá y no entiendo ni lo más elemental, o realmente no encontraste la solución porque no era tan fácil.
Para colmo, estoy experimentando con jquery, y lo peor que se puede hacer cuando algo no sale a la primera es meter código prefabricado, porque si no anda hay que desarmarlo todo hasta dar con el motivo. Cuando el escript lo hace uno, ya sabe cómo es.
Estuve desde el sábado a la noche hasta el domingo al mediodía (paré para dormir unas horas y creo que me acordé de comer algo) dándole mil vueltas al asunto.
Aquí lo más grave es que la transición no empiece antes de la carga total de cada serie. Y eso —curiosamente— fue lo más fácil : usé
onload en cada imagen, y recién cuando las cinco (en mi ejemplo usé cuatro) daban el OK, se disparaba el temporizador a la transición.
Del resto no me funcionaba nada, así que terminé con un escript enorme, redundante, y lleno de condicionales. Un asco. Pero apenas el beta arrancó, me di por satisfecho y como premio me fui al cine.
Ya que lo tenía, le deje el
fadeIn() / fadeOut() de JQuery, porque eso no me podía hacer fallar el reemplazo y el cronometrado ... aunque el programa se me truló un par de veces en Firefox. Ya que estoy, aprovecho para echarle la culpa al prefabricado, y duermo tranquilo.
Dejo lo que hice, sin comentarios ni "nombres amigables" completamente reemplazados.
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>FADDING PARA GRUPOS DE IMÁGENES ALEATORIAS.</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var torres = new Array()
torres[0] = "http://img826.imageshack.us/img826/4519/agustinalependa.th.jpg"
torres[1] = "http://img190.imageshack.us/img190/656/alfredoghierra.th.jpg"
torres[2] = "http://img585.imageshack.us/img585/6458/paisajemarinomarianovil.th.jpg"
torres[3] = "http://img269.imageshack.us/img269/2456/adrianacanizo.th.jpg"
torres[4] = "http://img23.imageshack.us/img23/8321/matiastrillo.th.jpg"
torres[5] = "http://img440.imageshack.us/img440/4743/ricardobaigorria.th.jpg"
torres[6] = "http://img408.imageshack.us/img408/2968/sachamarcin.th.jpg"
torres[7] = "http://img714.imageshack.us/img714/1056/lailaekboir.th.jpg"
torres[8] = "http://img23.imageshack.us/img23/8672/rep01.th.jpg"
torres[9] = "http://img189.imageshack.us/img189/9500/miguelminond.th.jpg"
torres[10] = "http://img140.imageshack.us/img140/9779/miguelangelroca.th.jpg"
torres[11] = "http://img854.imageshack.us/img854/918/martinsnoelmanuelescasa.th.jpg"
torres[12] = "http://img39.imageshack.us/img39/6664/lorenamarchetti1.th.jpg"
torres[13] = "http://img826.imageshack.us/img826/6833/mariogurfein1.th.jpg"
torres[14] = "http://img96.imageshack.us/img96/3322/portillo.th.jpg"
torres[15] = "http://img860.imageshack.us/img860/9482/marcelosalvioli.th.jpg";
torres[16] = "http://img839.imageshack.us/img839/2846/monicasalvatori2.th.jpg";
torres[17] = "http://img207.imageshack.us/img207/7240/ricardoluzuriaga.th.jpg";
torres[18] = "http://img685.imageshack.us/img685/4230/gracielaspaccarotella.th.jpg"
torres[19] = "http://img535.imageshack.us/img535/2007/dottobaggio.th.jpg"
var copiaTorres = new Array();
var ident = "yanky";
var todas = 0;
var cargadas = 8;
function mezcla() {
for(i=0; i<20; i++){
var azar = Math.floor(Math.random()*(torres.length));
//alert(azar)
var quitaImg = torres.splice(azar, 1);
//alert(torres.join("\r\n\r\n"))
copiaTorres.push(quitaImg);
//alert(copiaTorres.join("\r\n\r\n"))
}
//alert("torres: "+torres)
var captTorres = torres;
var captCopiaTorres = copiaTorres;
torres= captTorres.concat(captCopiaTorres);
//alert("mezcla > copiaTorres: "+copiaTorres.join("\r\n\r\n"))
//alert("mezcla > torres: "+torres.join("\r\n\r\n"))
elige0();
}
function elige0(){
for(i=0; i<4; i++){
document.getElementById("bravo"+i).src = copiaTorres.shift();
//alert(document.getElementById("bravo"+i).src);
}
for(i=0; i<4; i++){
document.getElementById("yanky"+i).src = copiaTorres.shift();
//alert(document.getElementById("yanky"+i).src);
}
//alert("torres: "+torres.join("\r\n\r\n"))
//alert("copiaTorres: "+copiaTorres.join("\r\n\r\n"))
}
function cambia0() {
//alert("cambia0")
//alert("copiaTorres.length = "+copiaTorres.length)
//alert("cambia0 > copiaTorres: "+copiaTorres.join("\r\n\r\n"));
if(todas == cargadas) {
//alert("todas = "+todas+" -- cargadas = "+cargadas)
todas = 0;
cargadas = 4;
if(ident == "yanky"){
//alert("cambia0 > yanky > "+ident)
setTimeout(function() {$("#alfa").fadeOut(3000 , elige1)} , 5000);
}
else {
//alert("cambia0 > bravo > "+ident)
setTimeout(function() {$("#alfa").fadeIn(3000 , elige1)} , 5000);
}
}
}
function elige1() {
//alert("elige1")
if(copiaTorres.length != 0){
ident = (ident == "yanky")? "bravo" : "yanky";
//alert("elige1 > "+ident)
for(i=0; i<4; i++){
document.getElementById(ident+i).src = copiaTorres.shift();
//alert(document.getElementById(ident+i).src);
}
}
else {
setTimeout(reiniciar,8000);
}
}
function reiniciar() {
var repite = confirm("Se terminaron las Torres. Reinicia?")
if(repite) {
copiaTorres = new Array();
ident = "yanky";
todas = 0;
cargadas = 8;
setTimeout(mezcla , 100);
}
}
onload = mezcla;
</script>
<style type="text/css">
img {background:yellow; margin: 10px;}
#contenedor {position: relative; background-color: white; height:160px; }
#alfa {position: absolute; background-color: white; }
#zulu {position: absolute; background-color: white; }
</style>
</head>
<body>
<h2>Muestra imágenes al azar, de a 4 / 20. </h2>
<div id=contenedor>
<div id=zulu>
<img id=yanky0 src="" onload="todas++;cambia0()">
<img id=yanky1 src="" onload="todas++;cambia0()">
<img id=yanky2 src="" onload="todas++;cambia0()">
<img id=yanky3 src="" onload="todas++;cambia0()">
</div>
<div id=alfa>
<img id=bravo0 src="" onload="todas++;cambia0()">
<img id=bravo1 src="" onload="todas++;cambia0()">
<img id=bravo2 src="" onload="todas++;cambia0()">
<img id=bravo3 src="" onload="todas++;cambia0()">
</div>
</div>
</body>
</html>
Continúa en el mensaje siguiente.