Javascript+image aléatoire

Résolu
Neliel -  
Bonjour

Dans un script PHP, je dispose d'un tableau de chaînes de caractères contenant les chemins de toutes mes images.
Actuellement, sur la page principale de mon site local, j'affiche une image aléatoire à chaque chargement de la page à l'aide d'un script PHP.
J'aimerai, à la place, un script qui change l'image aléatoire toutes les x secondes, sans si possible charger la page entièrement.
Le PHP ne sachant pas faire ça, je me tourne vers le Javascript mais ce langage est un mystère pour moi.
Quelqu'un aurait-il, svp, un script javascript pouvant afficher une image aléatoire toutes les x secondes à partir d'une liste d'images contenu dans une variable PHP ?

Merci d'avance.



--
"Trotti Trotta, Monsieur P, il y a des anges qui veulent un bisou..."
"Tu as vu la lumière dans son bidon ?"

25 réponses

Résumé de la discussion

Changer l'image affichée toutes les x secondes à partir d'une liste d'images générée par PHP nécessite JavaScript pour actualiser dynamiquement le contenu sans rechargement complet de la page. Des solutions proposées consistent à convertir la liste PHP en tableau JavaScript via php2js, puis à choisir aléatoirement une entrée et à modifier l'attribut src de l'élément image à chaque intervalle. En cas de difficultés, il faut éviter les erreurs liées aux noms contenant des apostrophes, penser à l'échappement des guillemets, et vérifier le positionnement des balises script dans l'HTML. Pour assurer la compatibilité, il est utile de tester la conversion PHP→JS et de vérifier que le navigateur distingue HTML et JavaScript, tout en envisageant des solutions serveur ou des bibliothèques dédiées.

Bobot (l’IA à votre service)
  1. Fallentree
    Un économiseur de page internet...
    0
    1. Neliel Auteur Contributeur
      Pas vraiment, en fait.
      La page en question affiche la liste des répertoires contenant mes images... Pour illustrer la page, je place en miniature une image aléatoire en dessous du titre.
      0
      1. Fallentree
        En ben! un arondi sur le max de tableau du fichier .
        IndiceduTableau=Math.round'(Math.ramdon()*Max)
        0
        1. Fallentree
          Y a pas un script pour afficher une horloge qui pourrait y etre adapté.
          0
          2. Neliel Auteur Contributeur
            Peut-on insérer une fonction PHP dans un script Javascript ?
            De cette manière, je pourrai me servir du Javascript pour recharger une partie de mon script PHP.

            Après tout, il est possible d'insérer du PHP dans du HTML et inversement.
            0
            1. Fallentree
              Pour faire simple PHP coté serveur c est a dire lors de la rédaction du code HTML.
              Javacript est incorporer dans le code html. Donc si ta rédaction du php est faite de facon a ce que ce code perdure ca marchera.
              Exemple <?php echo "<a href='toto.php' onclick=addAll(this,'derniere blague') class=links>Derniere blague </a>"; ?>
              On a bien du script (en gras) dans du php...
              L'inverse n est pas possible ...
              <script ...> ....<?php> ...<?> .......</script>
              Du moins lorsque j ai essaye le compilateur s endromait et puis pas de réponse pour l ajout de code...

              Bref...
              Mets tes fichiers dans une balise masquée de type select et parcours la liste periodiquement...
              Y a surement mieux...
              Un tableau ou une structure...

              Cherches autour de commande setTimeout("mon de la fonction",tempsms)...
              0
              1. adns
                Bonjour,

                @Fallentree
                L'ajout de php dans du code javascript est tout a fais possible
                ex : 
                <script>
var plop = <?php echo $varphp; ?>;
</script>


                Ensuite il n'y a pas de compilateur dans ces langages se sont des langages interprétés..

                Neliel pour ton problème essaie un truc du genre

                Code à coller entre les balise META 
                <script>
var tabImg = new Array("images/fleur.png","images/pont.png","images/plopplop.png","images/moto.png","images/bouteille.png");
var temps = 2000;
function changeImage(){
num = Math.floor(Math.random() * tabImg.length-1)+1;
alert(num);
alert(tabImg[num]);
document.getElementById("img").src=tabImg[num];
setTimeout("changeImage()",temps);
}
</script>


                et code à coller dans ton BODY 

                <img src="images/imagesParDefaut.png" id="img">


                la seule chose à faire est de changer le chemin des images par les tiens (tu peux en ajouter ou en enlever ;))
                et de définir le temps entre chaque images avec la variable temps qui est en ms

                Oh et petit détail :p
                si tu veux lancer le changement d'image au chargement de la page voila ce qu'il te faut 

                <body onload="changeImage();">


                En espérant avoir aidé ;)

                Adns
                0
                1. Neliel Auteur Contributeur
                  Et si les chemins de mes images sont contenus dans une liste PHP, ça fonctionne toujours ?
                  0
                  1. adns
                    peux tu me donner la forme de ta liste ?
                    0
                    1. Neliel Auteur Contributeur
                      C'est une variable PHP, un tableau de chaines de caractères qui contient le chemin relatif de chaque image ($liste_image_total[])

                      Pour info, mon site local gère plus de 12000 images pour le moment... les entrer manuellement dans le script est exclue à cause de leur nombre mais aussi du fait que je peux en ajouter comme je veux en mettant simplement l'image dans un répertoire du site.
                      J'avais pensé les gérer par base de données mais je craignais d'alourdir non seulement ma base de données mais également la rapidité de chargement des pages.

                      Une dernière info, les images que mon site affiche n'ont pas d'extension.
                      0
                      2. Neliel Auteur Contributeur
                        Je vais essayé, cela me semble très bien pour mon cas, merci.
                        Autre question, les balises <script></script>, es-ce obligatoire de les mettre dans l'entête HTML ?
                        0
                        1. adns
                          Ouai assez important lol ;)

                          cela permet au navigateur de faire la différence entre HTML et la javascript
                          d'ailleurs pour faire bien il faudrait mettre

                          <script language="JavaScript">
                          </script>

                          Oubli pas le tag résolu ;)

                          Adns
                          0
                          1. Neliel Auteur Contributeur
                            Je dis ça, parce que le créateur de la fonction que tu m'as donné semble s'en servir également dans le corps du HTML... Donc je me disais qu'il s'agissait seulement d'une norme W3C or cette norme importe peu pour mon cas car je ne compte pas mettre mon site sur le net.

                            J'ai entendu dire qu'il ne fallait plus mettre <script language="JavaScript"> mais <script type="text/javascript">... es-ce encore une histoire de norme ?
                            C'est pas très clair tout ça...

                            0
                            1. xav3601
                              Il faut savoir qu'en faisant ca tu vas devoir charger toutes images en même temps!
                              donc suivant le nombre ca va te prendre du temps!

                              Sinon ce qui a été dis me semble assez complet ;-)
                              0
                              1. Neliel Auteur Contributeur
                                ça ne fonctionne pas... je vous met ce que j'ai mis.

                                Avant l'entête HTML, j'ai crée la liste PHP $liste_image_total

                                Ensuite dans le Head, je place ceci: 

                                <script language="JavaScript">


function php2js( $php_array, $js_array_name ) {
	// contrôle des parametres d'entrée
	if( !is_array( $php_array ) ) {
		trigger_error( "php2js() => 'array' attendu en parametre 1, '".gettype($array)."' fourni !?!");
		return false;
	}
	if( !is_string( $js_array_name ) ) {
		trigger_error( "php2js() => 'string' attendu en parametre 2, '".gettype($array)."' fourni !?!");
		return false;
	}

	// Création du tableau en JS
	$script_js = "var $js_array_name = new Array();\n";
	
	// on rempli le tableau JS à partir des valeurs de son homologue PHP
	foreach( $php_array as $key => $value ) {
	
		// pouf, on tombe sur une dimension supplementaire
		if( is_array($value) ) {
			// On va demander la création d'un tableau JS temporaire
			$temp = uniqid('temp_'); // on lui choisi un nom bien barbare
			$t = php2js( $value, $temp ); // et on creer le script JS
			// En cas d'erreur, remonter l'info aux récursions supérieures
			if( $t===false ) return false;

			// Ajout du script de création du tableau JS temporaire
			$script_js.= $t;
			// puis on applique ce tableau temporaire à celui en cours de construction
			$script_js.= "{$js_array_name}['{$key}'] = {$temp};\n";
		}
		
		// Si la clef est un entier, pas de guillemets
		elseif( is_int($key) )  $script_js.= "{$js_array_name}[{$key}] = '{$value}';\n";
		
		// sinon avec les guillemets
		else $script_js.= "{$js_array_name}['{$key}'] = '{$value}';\n";
	}

	// Et retourn le script JS
	return $script_js;
} //Convertit la liste PHP en liste JavaScript

var tabImg = php2js($liste_image_total, 'liste_image');
var temps = 2000;

function changeImage(){
num = Math.floor(Math.random() * tabImg.length-1)+1;
alert(num);
alert(tabImg[num]);
document.getElementById("img").src=tabImg[num];
setTimeout("changeImage()",temps);
}
</script>


                                Et dans le corps, je met ça: 

                                <body onload="changeImage();">

<img src="images/imagesParDefaut.png" id="img">


                                Mais il n'affiche toujours pas les images, juste un cadre vide. A noté que j'ai vérifié au préalable la liste PHP.

                                0
                                1. adns
                                  A priori la fonction php2js est une fonction php donc elle doit etre dans la parti php de ton code

                                  entre <?php et ?>

                                  Adns
                                  0
                                2. Neliel Auteur Contributeur
                                  Je l'ai sortie de l'entête et je l'ai mise avant l'entête html, entre deux balises PHP et ça ne fonctionne toujours pas...
                                  0
                                3. adns
                                  redonne ton code stp ;)

                                  Adns
                                  0
                              2. Neliel Auteur Contributeur 
                                <?php

...  (j'occulte la partie qui récupère le chemin de toutes mes images (elle fonctionne parfaitement)

function php2js( $php_array, $js_array_name ) {
	// contrôle des parametres d'entrée
	if( !is_array( $php_array ) ) {
		trigger_error( "php2js() => 'array' attendu en parametre 1, '".gettype($array)."' fourni !?!");
		return false;
	}
	if( !is_string( $js_array_name ) ) {
		trigger_error( "php2js() => 'string' attendu en parametre 2, '".gettype($array)."' fourni !?!");
		return false;
	}

	// Création du tableau en JS
	$script_js = "var $js_array_name = new Array();\n";
	
	// on rempli le tableau JS à partir des valeurs de son homologue PHP
	foreach( $php_array as $key => $value ) {
	
		// pouf, on tombe sur une dimension supplementaire
		if( is_array($value) ) {
			// On va demander la création d'un tableau JS temporaire
			$temp = uniqid('temp_'); // on lui choisi un nom bien barbare
			$t = php2js( $value, $temp ); // et on creer le script JS
			// En cas d'erreur, remonter l'info aux récursions supérieures
			if( $t===false ) return false;

			// Ajout du script de création du tableau JS temporaire
			$script_js.= $t;
			// puis on applique ce tableau temporaire à celui en cours de construction
			$script_js.= "{$js_array_name}['{$key}'] = {$temp};\n";
		}
		
		// Si la clef est un entier, pas de guillemets
		elseif( is_int($key) )  $script_js.= "{$js_array_name}[{$key}] = '{$value}';\n";
		
		// sinon avec les guillemets
		else $script_js.= "{$js_array_name}['{$key}'] = '{$value}';\n";
	}

	// Et retourn le script JS
	return $script_js;
}

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title> Darkness Angel - Bibliothèques d'images </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
<script language="JavaScript">

var tabImg = php2js($liste_image_total, 'liste_image');
var temps = 2000;

function changeImage(){
num = Math.floor(Math.random() * tabImg.length-1)+1;
alert(num);
alert(tabImg[num]);
document.getElementById("img").src=tabImg[num];
setTimeout("changeImage()",temps);
}

</script>
</head>

<body onload="changeImage();">

<p class="titre">


</p>

...
<img src="images/imagesParDefaut.png" id="img">
...
</body>
</html>


                                J'ai du code avant et après la balise <img> mais ils ne concernent pas le problème.

                                Encore merci de te pencher sur mon cas...
                                0
                                1. adns
                                  L'appel de la fonction php2js étais mal utilisé

                                  essai de remplacer 

                                  var tabImg = php2js($liste_image_total, 'liste_image');


                                  par 

                                  <?php echo php2js($liste_image_total, 'tabImg'); ?>


                                  Adns
                                  0
                                  1. Neliel Auteur Contributeur
                                    Toujours pas...
                                    Es-ce parce que mes images n'ont pas d'extensions ?... pourtant HTML arrive très bien à afficher des images sans extensions...
                                    0
                                    1. adns
                                      comment est déclaré ton tableau en php ?

                                      es ce que tu vois au moins les alert js ?

                                      Adns
                                      0
                                    2. adns
                                      Si ton tableau est bien un tableau (array) :p

                                      le problème peux venir de ceci : xml:lang="fr"

                                      retire le de ta balise html

                                      j'ai tester le code et ca fonctionne sans problème ;)
                                      0
                                  2. Neliel Auteur Contributeur
                                    Toujours pas...

                                    Ma liste PHP est déclaré de cette manière: 

                                    $rep_racine='./';
	
	//$rep_racine: contient le chemin relatif de la racine du site
	
	if($cle_rep_racine=@opendir($rep_racine)) //ouverture du répertoire racine
	{
		//$cle_rep_racine: Contient la clé d'ouverture du répertoire racine
		
		while(($fichier=readdir($cle_rep_racine))!==false) //lecture de chaque fichier du répertoire racine
		{
			$nb_caractere_nom_fichier=strlen($fichier); //Récupération du nombre de caractère du nom du fichier courant
			
			//$nb_caractere_nom_fichier: Contient le nombre de caractere du fichier courant lu dans le répertoire racine
			
			$est_repertoire_valide=1; //Par défaut le fichier est un répertoire valide
			
			//$est_repertoire_valide: Détermine si le fichier courant est un répertoire valide (0: non, 1: oui)
			
			$position_caractere_nom_fichier=0; //Par défaut au début de la chaine de caractères
			
			//$position_caractere_nom_fichier: Position du caractère courant dans la chaine de caractère représentatif du nom du fichier courant
			
			if($fichier[0]=='V' or $fichier[0]=='D' or $fichier[0]=='o' or $fichier=="mdp") //Test si le fichier est un fichier non valide
				$est_repertoire_valide=0; 
			while($position_caractere_nom_fichier!=$nb_caractere_nom_fichier) //Parcours le nom du fichier courant
			{
				$caractere_lu=$fichier[$position_caractere_nom_fichier]; 
				
				//$caractere_lu: contient le caractère courant du nom du fichier courant
				
				if($caractere_lu=='.') 
					$est_repertoire_valide=0; //Si il y a un "." dans le nom du fichier courant, alors ce n'est pas un répertoire
				$position_caractere_nom_fichier=$position_caractere_nom_fichier+1; //passe au caractère suivant
			}
	
			if($est_repertoire_valide==1) //Si le fichier courant est un répertoire valide
			{
				$liste_repertoire[]=$fichier; //Enregistre les répertoires valides dans une liste
				
				//$liste_repertoire: contient la liste de tous les répertoires valides à la racine du site
				
				$categorie_repertoire[]=substr($fichier,0,3); //Enregistre la categorie des répertoires dans une liste
				
				//$categorie_repertoire: contient la categorie de chaque répertoire valide classée dans le même ordre que sont classés les répertoire valide dans la liste $liste_repertoire
				
				$nom_affichage_repertoire[]=substr($fichier,4,strlen($fichier)-4); //Enregistre le nom d'affichage des répertoire dans une liste
				
				//$nom_affichage_repertoire: contient le nom qui sera affiché sur le site des répertoire valide classés dans le même ordre que sont classés les répertoire valide dans la liste $liste_repertoire
				
			}
		}
		closedir($cle_rep_racine);
	}
	
	$nb_repertoire=sizeof($liste_repertoire); 
	
	//$nb_repertoire: Contient le nombre de répertoire valide à la racine du site
	
	for($position_liste_repertoire=0;$position_liste_repertoire<$nb_repertoire;$position_liste_repertoire++)
	{
		$repertoire_courant=$liste_repertoire[$position_liste_repertoire];
		
		$chemin_repertoire_courant="./".$repertoire_courant;
		
		if($cle_repertoire_courant=@opendir($chemin_repertoire_courant)) //Ouverture du répertoire courant
		
		//$cle_repertoire_courant: Contient la clé d'ouverture du répertoire en cours de lecture
		
		{
		while(($fichier_repertoire_courant=readdir($cle_repertoire_courant))!==false) //Lecture de chaque fichier, un par un, dans le répertoire en cours de lecture
		{
			
			//$fichier_repertoire_courant: Contient le nom du fichier courant lu dans le répertoire en cours de lecture
		
			if($fichier_repertoire_courant!=".." && $fichier_repertoire_courant!="." && $fichier_repertoire_courant!="Thumbs.db" && $fichier_repertoire_courant!="Aide.txt") //Teste si le fichier est une image valide
			{
				$liste_image_total[]=$chemin_repertoire_courant."/".$fichier_repertoire_courant; //Enregistrement des images valides du répertoire courant dans une liste
				
				//$liste_image_total: Contient la liste de toutes les images du sites
			}
		}
		closedir($cle_repertoire_courant); //Fermeture du répertoire aléatoire
		}
	}


                                    Les chemins sont placés dans $liste_image_total...
                                    Sous ce format: "./mb3 Gallerie1/01"
                                    Les images n'ont aucune extensions... je me demande si ce n'est pas la cause du problème...
                                    0
                                    • 1
                                    • 2

                                    Discussions similaires

                                    java script error in the main process
                                    ceciel2307

                                    3 réponses
                                    Retrouver l'image originale d'une photo modifiée
                                    Raven

                                    10 réponses
                                    Comment recadrer une image avec Inkscape
                                    infofeet

                                    13 réponses