Solicitando consejo ante un reto

[unexes]

Hola a tod@s.

Vereis os solicito consejo para abordar un problema antes de empezar a hacer pruebas sin ton ni son y perder mucho tiempo haciendo y deshaciendo el trabajo.

Tengo que crear 1 div y en el interior del mismo 5 celdas ó (5 divs juntos uno al lado de otro) eso no es importante por lo tanto a partir de aqui me referire al problema hablando de celdas.

Vereis tengo una carpeta con 25 imagenes y necesito que cada una de esas celdas muestre aleatoriamente una de esas imagenes sin que haya ninguna imagen que se repita en el mismo momento.

Esto es solo el principio del problema, ahora viene lo serio.

Tambien necesito que esas imagenes vayan cambiando cada cierto tiempo (por ejemplo cada 5 segundos) por el resto de las imagenes que se encuentran en la carpeta, pero ese cambio no debe de efectuarse en todas las celdas al mismo tiempo sino de forma aleatoria y en distintos momentos en cada una de las celdas, y como he dicho anteriormente no debe de haber ninguna imagen repetida entre las 5 celdas en ningún momento. El cambio de imagenes aunque no es importante lo hare con el efecto "Fade".

Solo cuando hayan pasado todas las imagenes por todas las celdas volvera a comenzar el ciclo.

En principio habia pensado en crear 5 galerias de fotos independientes pero en ese caso se repetirian las fotos en distintas celdas al mismo tiempo y la repetición del mismo codigo 5 veces, no es elegante ni logico.

Así que os pido que me aconsejeis como comenzar a abordar el tema y desde que punto o perspectiva debo de comenzar. Mis conocimientos en Javascript son minimos pero una vez conozca como se le coje al toro los cuernos podre empezar a indagar y a partir de ahi con paciencia, esfuerzo, trabajo y vuestra ayuda, espero llevarlo a buen termino.

A lo mejor existe algún programa o algo similar en la red, si es así hacermelo saber para que le pueda hechar un vistazo.

Un saludo a tod@s y GRACIAS.

[_cronos2]

A ver si te sirve:

Código Javascript:

var fotos = [fotos]; // aquí pones la URL de cada una
var arr = fotos.concat(); 
function cambiarFotos(){
 if(!arr.length) arr = fotos.concat();
 document.getElementById('img1').src = arr.splice(Math.floor(Math.random() * arr.length), 1);
 // hasta 5
}
setInterval(function(){ cambiarFotos(); }, 3000);
 

Luego le puedes añadir los fade y todas esas cosas.
Saludos (:

[unexes]

_cronos2, Gracias, pero veras como ya dije, entiendo poco, pero supongo que eso solo cambia la imagen en una de las celdas si repito el código para cada una de las celdas supongo que habra muchas veces que coincidira al mismo tiempo la misma foto en distintas celdas. Anteriormente ya he hecho algunas cosas de este tipo que funcionan bien y solo tendria que copiar mi propio código pero lo que necesito es que lo haga en cinco celdas a la vez y que de forma aleatoria cambien todas las celdas a intervalos distintos y sin repetir la imagen en un mismo momento y ademas que cada una no repita la misma imagen hasta no haber completado el ciclo de pasar todas las imagenes en este caso 25 imagenes, solo entonces comienza un nuevo ciclo. como veras es algo complicado que no ser por donde empezar.
Asi que sigo buscando si hay una forma de hacerlo.

[_cronos2]

No he probado mi código pero creo que es más o menos lo que necesitas, lo único que falla es lo de cambiar a intervalos distintos, porque según está cambian las 5 cada 3''. Lo que hace es coger un array y un número aleatorio, la foto del array con ese número y después borra ese elemento del array. Cuando ya los ha borrado todos, restaura el array original. Lo de cambiar cada foto con diferente tiempo igual es un poco más complicado.
Saludos :D

[unexes]

_cronos2

Gracias lo pruebo y te digo algo, si funciona tendre una parte del código.

Saludos

[zerokilled]

buenas...

segun como lo visualizo, podrias usar como minimo dos arrays y dos contadores. un array para los elementos (celdas) y otro array para las imagenes. la idea del array es que puedas desordenar los elementos aleatoriamente. el contador es para cada array con el proposito de determinar cuando volver a desordenar los arrays. basicamente, extraes una entrada de ambos arrays donde el elemento html seria el proximo a actualizar con la imagen extraida del array. en cada ciclo, debes alterar el contador y verificar si este ha llegado al limite. de haber llegado al limite, desordenas los arrays y de ser necesario (segun como haga la logistica) reinicias el contador.

para los intervalos, podrias hacer una funcion que devuelva un tiempo dentro de un rango al azar. por ejemplos, intervalos dentro del rango de 5 y 10 segundos. y por supuesto, necesitaras de una funcion Fade para la transicion. asumo que para este proposito utilizaras algun framework.

[unexes]

Gracias a ambos (zerokilled y _cronos2) creo que ambos me habeis ayudado otras veces y os estoy muy agradecido. como ya os dije mis conocimientos son escasos en esta materia así que aunque hago bastantes cosas de embergadura para los conocimientos que poseo la verdad es que algunas sobrepasan los mismos y creo que este es uno de esos casos, la ultima idea que me aconseja zerokilled me parece muy acertada ya que entiendo el principio de la misma, pero no se como empezarla y como no quiero que nadie me haga el trabajo, (aunque lo que hago lo hago solo por ocio y ganas de aprender no por trabajo real) creo que para no molestaros mas aparcare este proyecto de momento, pero no lo olvidare solo lo aparcare con el fin de indagar y aprender y que por lo menos pueda poner aqui unas lineas de código propias y a partir de ahi solicitar nuevamente vuestra ayuda y la de tod@s.
Lamento las molestias que os he creado pero es mejor aparcar momentaneamente esta idea mia que el que yo este pegando palos de ciego y solicitando una ayuda con la que luego no puedo continuar por falta de conocimientos.
De nuevo gracias y un saludo.

[_cronos2]

No te preocupes, es mejor que primero hagas cosas más sencillas para aprender, seguro que luego te resulta mucho más sencillo e incluso puedes plantearlo de otra manera.
Saludos (:

[zerokilled]

te muestro la base sobre como operar con los arrays para que tengas ideas de como proceder. es un ejemplo bien generico que no refleja ninguna relacion directa a lo que quieres lograr pero refleja parte del mecanismo.

Código:

var array = [0, 1, 2, 3, 4], count = 0, len = array.length;
function foo(){
var item = array.shift();
console.log("item: "+item);
array.push(item);
if(!(++count % len)) array.sort(function(){return Math.round(Math.random()) - .5;}), console.log(array);
}

en este ejemplo, fijate que cada cinco invocacion a la funcion foo, el array se desordena. el elemento escogido del array sera dado por el metodo shift. en cada invocacion de foo, shift siempre devuelve un valor distinto porque shift remueve el primer elemento del array. sin embargo, para que ese array no quede vacio, se vuelve agregar el elemento con push. si tienes una consola de error como firebug o la de chrome, el codigo imprime los resultados en este. puedes hacer un simple analisis invocando foo por intervalos. por ejemplo, setInterval(foo, 1500).

nota: segun afirman algunos que el metodo que he utilizado para desordenar el array es impreciso. puedes buscar mas opciones por la web.

[unexes]

Estudiare el tema de los array.

Gracias a los dos, Un saludo.