explication d'un script

Question

Bonjour à tous,

J'espère que je poste dans la bonne section.
Voici mon souci : je cherche à dapter le scrit suivant à mes besoins :
http://www.codes-sources.com/code.aspx?ID=42611

Malheureusement, je ne connais pas javascript, et le code n'est pas commenté, j'aurais donc besoin de votre aide pour d'une part me dire si je suis sur la bonne voie, et d'autre part m'expliquer les points que je ne comprends pas.

code :
var visuel_n=0;

function Visuel_Fondu()

{

if(document.all)

{

if ( window.opera )

document.getElementById("visuel_" + VisuelPosChange).style.opacity = visuel_n*0.01;

else

document.getElementById("visuel_" + VisuelPosChange).filters.alpha.opacity=visuel_n;

visuel_n+=5;

if ( visuel_n<= 100 )

{

setTimeout("Visuel_Fondu()", 100);

return 0;

}

}

else

{

document.getElementById("visuel_" + VisuelPosChange).style.setProperty("-moz-opacity", visuel_n, "");

visuel_n+=0.05;

if ( visuel_n<= 1 )

{

setTimeout("Visuel_Fondu()", 100);

return 0;

}

}

visuel_n=0;

document.getElementById("visuel").style.background="url('" + VisuelTab[VisuelPosChange][0] + "') -4px 0px no-repeat";

setTimeout("Visuel_Clear()", 100); //supprime clignotement sous FF

}

Cette partie du code si je ne m'abuse est la fonction de fondu entre les images, avec un genre de test pour la compatibilité des différents navigateurs, et une durée de fondu de 5 secondes ici. c'est bien ça ?

on continue, code :
function Visuel_Clear()

{

document.getElementById("visuel").innerHTML="";

setTimeout("Visuel_Defil()", 4000);

}

Ici, c'est la fonction qui efface la première immage du fondu ?

code :
var VisuelTab = [

["visuel_2.jpg",0],

["visuel_3.jpg",0],

["visuel_4.jpg",0],

["visuel_5.jpg",0],	

["visuel_1.jpg",0],

];

Là c'est la création du tableau qui contient les noms des photos. D'après les différents crochets, je dirais que c'est un tableau à entrée multiple, ets-ce indispensable ? Ne peut-on faire ça avec un tableau simple ? A quoi correspond la valeur "0", sachant qu'elle revient systématiquement, ne peut-on la passer en paramètre ailleurs ? Je souhaiterais générer le tableau à partir d'un array php qui contient ma liste de photos, seulement mon array est linéaire, donc j'aimerais comprendre la nécéssité de ce "0", et d'avoir un tableau à entrée multiple.

on continue, code :
var VisuelPos=-1;

var VisuelPosChange;

function Visuel_Defil()

{

VisuelPosChange=VisuelPos;	

VisuelPos++;

if ( VisuelTab.length <= VisuelPos )

VisuelPos=0;



if ( VisuelTab[VisuelPosChange][1] == 1 )

document.getElementById("visuel").innerHTML+="";

else

{

setTimeout("Visuel_Defil()", 10);

return 0;

}

Visuel_Fondu();

}
Ca c'est la fonction de défilement des images, on prend la première valeur du tableau, puis on incrémente pour passer à la suivante, etc... J'ai bon ?
Si je veux un affichage aléatoire, c'est ici que je dois caser un genre de random sur la variable VisuelPos ?

ensuite, code :
LoadVisuel();

function LoadVisuel() {

var tonimage=new Array();



for ( LoadVisuelPos=0;LoadVisuelPos<VisuelTab.length;LoadVisuelPos++)

{

tonimage[LoadVisuelPos] = new Image();

tonimage[LoadVisuelPos].src = VisuelTab[LoadVisuelPos][0];

//tonimage[LoadVisuelPos].onload = eval("function() { JsIsLoading("+LoadVisuelPos+"); }");

tonimage[LoadVisuelPos].onload =  eval("JsIsLoading("+LoadVisuelPos+");");

}

}
on affiche l'image ?

code :
function JsIsLoading(LoadVisuelPos_) {

VisuelTab[LoadVisuelPos_][1]++;

if ( VisuelPos==-1 )

{

VisuelPos=0;

Visuel_Defil();

}

}
on charge l'image ? en cache ?

Tout ça reste un peu flou, je ne vois pas à quel moment et de quelle façon l'image est affichée, et surtout, je ne comprend pas la nécéssité du tableau multiple avec cette valeur "0".

Merci donc à ceux qui pourront m'éclairer.

bizibiz17 · Answer

Salut, c'est cette ligne qui affiche l'image :  
document.getElementById("visuel").innerHTML+="";

bizibiz17 · Answer

Et m*****
Donc c'est cette ligne qui affiche les images :
document.getElementById("visuel").innerHTML+="";

bizibiz17 · Answer

Et cette ligne là rend visible l'image en augmentant son opacité :
document.getElementById("visuel_" + VisuelPosChange).filters.alpha.opacity=visuel_n;

ps : la ligne est différente en fonction du navigateur

cyclopdev · Answer

bonjour bizibiz17, merci pour tes explications.

la partie de ce script qui m'intéresse maintenant est la méthode de défilement des images (passage d'une image à l'autre)
ici les images sont définies en "dur" dans un tableau avec a chaque image un attribut supplémentaire : "0" ca serait cgrâce à cet attribut que l'on procède au passage d'une image à l'autre (avec VisuelPosChange et VisuelPos) ?

dans l'idée où je veux d'une part avoir un affichage aléatoire, et d'autre part récupérer automatiquement ma liste de fichiers (à partir d'un array php issu d'un scan du dossier), je dois pouvoir à la fois me passer de "l'attribut" 0 qui est présent dans chaque entrées du tableau et de VisuelPosChange (en utilisant rand ou srand, je ne sais pas trop), non ?

@karamel · Answer

bonjour exemple d'un script sans l'opacite pour changer une image aleatoirement concu por huit images

cyclopdev · Answer

alors pour le tirage aléatoire, j'ai remplacé :
j'ai ajouté la variable :
var nb=VisuelTab.length;

ensuite dans la fonction Visuel_defil, j'ai remplacé l'incrémentation de visuel pos (VisuelPos++;) par : VisuelPos= Math.floor(Math.random() * nb);

et j'ai viré le contrôle de la valeur de VisuelPos devenu inutile 
if ( VisuelTab.length <= VisuelPos )

VisuelPos=0;


ce qui donne (pour la fonction Visuel_Defil) :

var VisuelPos=-1;

var VisuelPosChange;
var nb=VisuelTab.length;

function Visuel_Defil()

{

VisuelPosChange=VisuelPos;	

VisuelPos= Math.floor(Math.random() * nb);



if ( VisuelTab[VisuelPosChange][1] == 1 )

document.getElementById("visuel").innerHTML+="";

else

{

setTimeout("Visuel_Defil()", 10);

return 0;

}

Visuel_Fondu();

} 

ça a l'air de marcher.

il me reste plus qu'à voir mon histoire de tableau

cyclopdev · Answer

pour le tableau, j'ai écrit un script php qui scan mes repertoires de photos, et qui génère un tableau de la même forme que celui du script javascript.

$dir_nom = './photos'; 								
$dir = opendir($dir_nom) or die('repertoire introuvable'); 			
$gal= array(); 									
while($element = readdir($dir)) 						
{
if($element != '.' && $element != '..') 				
{
$gal[] = $element;						
}
}
closedir($dir);									
$nb_gal = count($gal)-1; 							
if(!empty($gal)) 								
{
$photo= array(); 							
$tableau= array();							
for ($num_gal =0;$num_gal<=$nb_gal;$num_gal++)				
{
$nom_gal = $gal[$num_gal] ; 					
$gal_nom = './photos/'.$nom_gal; 				
$gal_dir = opendir($gal_nom) or die('repertoire introuvable'); 	
while($tof = readdir($gal_dir)) 				
{
if($tof != '.' && $tof != '..') 			
{
$photo[] = './photos/'.$nom_gal.'/'.$tof;	
$photo[] = 0; 					
$tableau[] = $photo;				
$photo= array();				
}
}
closedir($gal_dir);						
}
}

ensuite j'exporte mon tableau en javascript

et tout roule, j'ai enfin mon diaporama automatique aléatoire avec fondu qui se met à jour tout seul (juste à uploader un nouveau dossier de photos) \o/

merci à tous (dédicace à guillaume si tu passes par là)

Explication d'un script

7 réponses

Votre réponse

Discussions similaires