Transición de cinco imágenes.

[navegantes]

Hola a todos.

Mi idea es la siguiente. En un array meto 20 fotos las cuales quiero mostrarlas de cinco en cinco de forma aleatoria y sin que se repitan.

Esta parte creo que la tengo resuelta de mejor o peor manera.

Mi problema ahora es que quiero que cuando cambien lo hagan con un efecto de transición tipo fade. He encontrado muchas webs con código para ello pero no me sirve porque siempre los veo referenciados a un único listado fijo. Por ejemplo un div y van mostrando las imágenes contenidas en el mismo. Pero que las imágenes vayan cambiando cada cierto tiempo de forma aleatoria y encima cinco de golpe nada.

O al menos yo no he sabido adaptarlas vaya.

El código del script para mostrar cinco imágenes de golpe de forma aleatoria es el siguiente.

Código Javascript:

<script>
 
    function myrand(number)
    {
      return Math.floor(Math.random()*number);
    }
    
    var size = 12;
    var num_chosen = 5;
    var my_images = new Array(size);
    my_images[0]="fot1.jpg";
    my_images[1]="fot2.jpg";
    my_images[2]="fot3.jpg";
    my_images[3]="fot4.jpg";
    my_images[4]="fot5.jpg";
    my_images[5]="fot6.jpg";
    my_images[6]="fot7.jpg";
    my_images[7]="fot8.jpg";
    my_images[8]="fot9.jpg";
    my_images[9]="fot10.jpg";
   //y el resto de la lista
    
    function showimg()
    {
        for (i = 0; i < num_chosen; ++i)
        { 
        choice = myrand( size - i ) + i;
        temp = my_images[choice];
        my_images[choice] = my_images[i];
        my_images[i] = temp;
        }
    
        for (i = 0; i < num_chosen; ++i)
        {
        document.getElementById('foto'+[i]).src = 'img/img_ciclos/'+ my_images[i] +'';
        }
    }
    
</script>
 

Y en el html

Código HTML:

<div class="pics">
    <img id="foto0" />
    <img id="foto1" />
    <img id="foto2" />
    <img id="foto3" />
    <img id="foto4" />
</div>
 

Junto con:

Código Javascript:

showimg();
var intervalo = setInterval("showimg()",3000);
 

¿Alguien sabe como puedo hacer que las cinco imágenes cambien de golpe con un efecto de fade?

[furoya]

Sí. Metes tus primeras cinco imágenes en un div, y detrás, en las mismas coordenadas metes las segundas cinco en otro div del mismo tamaño. Con CSS3 o un escript le das un cambio de opacidad paso a paso al primero hasta que desaparezca y deje ver el segundo. Mientras, cargas las terceras cinco en el primero, y cuando estén todas, le vuelves a subir la opacidad paso a paso. Cuando estén totalmente opacas, recargas el segundo div con las cuartas cinco nuevas imágenes ... y así hasta que se terminen.

[navegantes]

Hola furoya.

Gracias por el comentario. Algo así era lo que estaba probando pero no lo logro. No soy capaz de controlar el tiempo. Y al final termina cargando un div más rápido que la transición.

No estoy todavía muy puesto con esto del javascript. Al menos no a este nivel jeje. No se como hacer que no inicie la siguiente carga mientras aun esté el fade. Lo estaba probando con varios setInterval pero nada. Supongo que será cuando acabes haz esto, pero no se como hacerle saber que acabó o no jeje.

Por el momento lo he solucionado haciendo que haga la carga aleatoria y luego que haga el fade aleatorio en cada div, pero sin volver a recargar todas las fotos en cada cambio (no se si me he explicado). Como las imágenes ya no se mueven entonces ya si puedo controlarlo mejor.

De todas formas cuando tenga un poco más de tiempo y junto con tu idea mirare de conseguir lo que quería por si en un futuro lo vuelvo a necesitar.

Muchas gracias de nuevo.

[pistonasos]

Actualmente tengo un problema parecido. También tengo planeado algo, pero no me puse a implementarlo todavía: En primer lugar tendrías que hacerte una función que sea capaz de cambiar la opacidad de las imágenes. Bueno, medio obvio, pero a ésta función le tendrías que agregar un extra. Es decir, suponete que tenés una función así:

Código Javascript:

function opacidad(arrEle,vel,extra)
{
  for(i=0;i<arrEle.length;i++)
     {
        opAct=parseFloat(arrEle[i].style.opacity)
        if(opAct>=1)
         {
            extra()
            return 0
         }
        arrEle[i].style.opacity=opAct+vel
     }
setTimeout("opacidad(arrEle,vel,extra)",10,arrEle,vel,extra)
}
// Así se llamaría a la función.
opacidad(conjImg1,-0.01,function(){opacidad(conjImg2,0.01,function(){return 0}})
 

Entonces, esto haría que se desvanezca el conjunto de imágenes que halla en el div y que al terminar aparezca el conjunto de imágenes al que le toca, de lo que se encarga el extra. Por lo menos así me manejo yo cuando le tengo que decir a un script que cuando termine de ejecutarse haga tal cosa: con un extra.
La otra es con los return 0 y los if:

Código Javascript:

function opacidad(arrEle,vel)
{
  for(i=0;i<arrEle.length;i++)
     {
        opAct=parseFloat(arrEle[i].style.opacity)
        if(opAct>=1)
         {
            return 0
         }
        arrEle[i].style.opacity=opAct+=vel
     }
}
 
function cambiaOp()
{
  if(opacidad(conjImg1,-0.01)==0)
  {
     if(opacidad(conjImg2,0.01)==0)
      {
         return 0
      }
  }
 setTimeout(cambiaOp,10)
}
 

Bueno, las funciones son medias sucias, pero con un poco de ingenio y POO se puede hacer algo elegante.

[furoya]

(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.

[furoya]

Viene del mensaje anterior.



Si alguien sabe cómo rellenar un array vaciado, con el contenido de otro, me avisa. De todos los experimentos que hice dejé el de paso entre variables con concat(), que fue el primero que me llegó a andar.

El shuffle está hecho justamente extrayendo al azar una a una las imágenes de un array y metiéndolas en otro; luego se copia la lista al primero —para tenerla de backup— y se rellenan los div otra vez sacando una a una (pero esta vez ordenadas, total ya fueron mezcladas) del segundo, que queda destruido. Por eso el respaldo; si nos piden una nueva vuelta de imágenes, habría que recargar la página.

Hay varias funciones encadenadas y tantos temporizadores como condicionales (no sé si no hay más). El motivo es prever los famosos "errores en tiempo de ejecución". Alguno seguro está sobrando.

Iniciado por navegantes

Por el momento lo he solucionado haciendo que haga la carga aleatoria y luego que haga el fade aleatorio en cada div, pero sin volver a recargar todas las fotos en cada cambio (no se si me he explicado). Como las imágenes ya no se mueven entonces ya si puedo controlarlo mejor.
...
Muchas gracias de nuevo.

Creo que entiendo. Cargas todas las imágenes en todos los div, y con todo a la mano, solamente eliges uno u otro para mostrar de forma aleatoria.

Y de nada, te respondí explicando sin un ejemplo porque supuse que era algo sencillo.



Bueno, vamos al post siguiente.

En verdad estuve tentado de cortar el mensaje ahí, pistonasos. Pero me dio culpa porque se vería como si te estuviera ignorando. En realiadad sería eso, y por eso me daría culpa; porque te tomas demasiado trabajo en escribir en los temas (y encima activaste el corrector ortográfico ! ) como para no responderte nada.

Pero vas a tener que mejorar la puntería. Estás llegando tarde, cuando el asunto ya se respondió, o ya estamos en otra cosa. Y encima tus mensajes no se entienden bien, para adivinarles ya están a los que preguntan; no estamos para adivinar también a quienes quisieron responder.
Entiendo que estás supeditando el cambio de imágenes a la finalización del efecto fade, pero resulta que es al revés, porque el tiempo que le damos al cambio de opacidad ya sabemos más o menos que demora puede tener hasta en las máquinas que son lentas; pero no podemos controlar el retraso en la carga de imágenes. Eso nos descalabra los setTimeout().

Lo que me recuerda : en el ejemplo que dejé arriba, cuando una imagen no aparece, la animación se para. No busca otra imagen ni carga un muleto. Lola, así se queda.

Volviendo a lo nuestro, eso de

Iniciado por pistonasos

...el conjunto de imágenes que halla en el div...

vas atener que revisarlo "a mano", porque los correctores son medio nabos y no entienden que estás usando el verbo "haber" y no el verbo "hallar", y no te lo cambian por "haya".

Pero lo de

Iniciado por pistonasos

Bueno, las funciones son medias sucias, pero con un poco de ingenio y POO se puede hacer algo elegante.

va a ser incorregible para cualquier corrector semántico con inteligencia artificial avanzada.

¿Las "medias sucias" son como los "calcetines pringosos"? ¿Y "POO" es algún jabón de lavar la ropa que te las deja finas y elegantes?


Aunque te suene raro, es "medio sucias".
Y lo de la programación orientada a objetos ...

[navegantes]

Hola Furoya.

Una vez más mil gracias por tomarte tantas molestias. Pensé que ya lo dejarías correr cuando comenté que "mas o menos" lo había solucionado jaja.

Pues a no ser que sea yo ahora el que no te entiende bien, en principio lo entendiste correctamente. De las 20 imágenes se toman 5 aleatorias, se muestran, fade, otras cinco aleatorias (sin repetir ninguna de las que acaban de salir), fade otras cinco...(Aquí en principio se podrían repetir algunas de las primeras tandas aunque no sería lo ideal y que no salga en la misma posición que la primera vez)... así hasta el infinito.
Por el momento con esa parte del código que puse al principio, cuando cargo la web se posicionan de forma aleatoria.

Lo que comentas del script lleno de condicionales... pues sí algo parecido me pasaba a mi XD

De todas formas tu primera propuesta no estaba del todo mal. En realidad los primeros cambios funcionaban correctamente, luego ya la cosa se desmadraba y ya cada uno salía cuando quería. Yo creo que los relojes no son muy exactos y que al cabo de varias permutaciones arrastraran algunas milésimas de más que se hacen segundos y todo casca. Porque me fije que a medida que pasaba el tiempo las imágenes tendían a ir apareciendo cada vez con un poco más de frecuencia.
Además para rematar al cliente se le ha ocurrido que cada transición comience en un momento distinto y con duración diferente... eso ya ha sido total XD

Por suerte al ponerlo como te comenté en bloques de cuatro puedo controlar mucho mejor las cosas y gestionar que cada uno cambien a un tiempo distinto. Además ya hemos convencido al cliente de que las imágenes saldrán "a nuestra manera" y listo jeje.

Al menos veo que mi problema no era tan sencillo y que no es que no tenga ni idea de javascript, bueno cierto que poca idea tengo pero vaya eso... "consuelo de muchos, consuelo de tontos" jaja

Lo dicho cuando tenga un poco de tiempo revisaré todo el código (he copiado el tuyo y me lo he guardado) y miraré de implementarlo bien e intentar lograr que haga lo que quería desde un primer momento, pero eso con la calma.

Muchas gracias una vez más.

[navegantes]

A todos los demás muchas gracias también por vuestras aportaciones e interés :)

[pistonasos]

Si alguien sabe cómo rellenar un array vaciado, con el contenido de otro, me avisa.

En disculpas de la mala ortografía y cohesión semántica:

Código Javascript:

cpArray=function(obj,arr)
    {
        for(clave in arr)
        {
            if(arr[clave].constructor.toString().indexOf("Array")!="-1")
            {
                cpArray(obj[clave],arr[clave])
            }
            else
            {
            obj[clave]=arr[clave]
            }
        }
    }
 

¿Era lo que buscabas?...Sirve para arrays y objetos multidimensionales.

[furoya]

Es posible. Quizá hasta cubra arrays bidimensionales. Pero sería mejor poner el ejemplo completo, para probarlo.
En realidad yo preguntaba por uno común y corriente.

Y esperaba la respuesta en otro tema, pero ya que estamos acá, aprovecho y aclaro un poco más de dónde vino mi pregunta.

Si tengo un array, y lo copio en otro

Código:

var unArray= ["perro", "gato"];
var otroArray = [];

otroArray = unArray;

Y después quiero modificar el nuevo en uno solo de sus elementos

Código:

otroArray[1] = "kiwi";

resulta que me queda

Código:

var unArray= ["perro", "kiwi"];
var otroArray = ["perro", "kiwi"];

¡Me cambia también el primero!

Seguramente ya se habló de esto por acá, pero voy a dejar una explicación de otro sitio, porque fue lo primero que encontré

http://www.anieto2k.com/2007/03/11/c...en-javascript/

Allí resolvieron el asunto como hice más arriba

Código:

<script type="text/javascript">

var a = [ 1, 2, 3 ];
var b = [].concat(a);
b[1]="w";
//alert(a+" "+b)
</script>

o con un método similar al que estás proponiendo, que metieron en un prototype. Acá lo dejo simplificado

Código:

<script type="text/javascript">
var alfa = [80,10,20,30];
var bravo = [4,5,6];

function duplica_alfa_en_bravo(){
bravo=[]; //vacía bravo
for(i in alfa) { //recorre todo alfa
bravo.push(alfa[i]); //agregando cada elemento a bravo
alert(alfa[i])
alert("["+i+"] "+bravo)
}
//una vez duplicado
alert(alfa+" = "+bravo)
bravo[1] = "X"; //reemplaza sólo 2º elemento de bravo
alert(alfa+" = "+bravo) //pero no modifica alfa
}
onload = duplica_alfa_en_bravo;
</script>

Insisto en que debería haber un modo mejor, me cachen yavascrip.

[pistonasos]

Hola otra vez. ¿no probaste mi script?. Te pregunto, porque con éste script, aparte de que es una solución a arrays multidimensionales, no provoca que compartan la misma posición de memoria.
Como todos sabemos, si hacemos:

Código Javascript:

a=3
b=0
b=a
b+=5
alert("b es "+b+"  y a es "+a)
 

Nos va a salir: b es 8 y a es 3
Y mi script no asigna valores directamente como arrays, sino como variables,al igual que el caso anterior:

Código Javascript:

furoyaArr=["gato","negro"]
furOtrArr=[]
 
furOtrArr=furoyaArr
furOtrArr[1]="blanco"
 
window.console.log("furoyaArr="+furoyaArr) //Va a salir ["gato","blanco"]
window.console.log("furOtrArr="+furOtrArr) //Va a salir ["gato","blanco"]
//Así que comparten la misma posición de memoria.
 
//Ahora mi ejemplo
miArr=["hola","mundo"]
miOtrArr=[]
// igualo los valores de un array con los valores del otro,como variables cualquiera, no igualo los array directamente
miOtrArr[0]=miArr[0]
miOtrArr[1]=miArr[1]
 
miOtrArr[0]="chau"
 
window.console.log("miArr="+miArr) //Va a salir ["hola","mundo"]
window.console.log("miOtrArr="+miOtrArr) //Va a salir ["chau","mundo"]
 

Espero que me hallas entendido...
Con repecto al script, le hice una pequeña corrección y agregué una función que te logea la estructura del array para que trastees e investigues.
Lo que hace el script es prácticamente la solución que planteo en el script anterior, pero con un for automatizando la tarea.

Código Javascript:

logArr=function(arr,marg)
        {
            for (clave in arr)
            {
                if(arr[clave].constructor.toString().indexOf("Array")!="-1")
                {
                    window.console.log(marg+'Arr["'+clave+'"] Es un Array:')
                    logArr(arr[clave],marg+"    ")
                }
                else
                {
                    window.console.log(marg+'Arr["'+clave+'"]='+arr[clave])
                }
            }
        }
cpArr=function(obj,arr)
    {
        for(clave in arr)
        {
            if(arr[clave].constructor.toString().indexOf("Array")!="-1")
            {
                 obj[clave]=[]
                cpArr(obj[clave],arr[clave])
            }
            else
            {
            obj[clave]=arr[clave]
            }
        }
    }
    
miArr=[["hola","chau"],"mundo",["tan",["cruel","bello"]]]
cpDeArr=[]
cpArr(cpDeArr,miArr)
 
 
logArr(cpDeArr,"")
 

Probá esto an algún navegador que soporte console.log. Después, cambiá los valores que quieras de cpDeArr y de miArr , loguealos con logArr y vas a ver que son independientes.
Salu2