Javascript+image aléatoire [Résolu/Fermé]

Signaler
Messages postés
6118
Date d'inscription
jeudi 9 juillet 2009
Statut
Contributeur
Dernière intervention
20 mars 2017
-
Messages postés
6118
Date d'inscription
jeudi 9 juillet 2009
Statut
Contributeur
Dernière intervention
20 mars 2017
-
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.


25 réponses

Messages postés
2313
Date d'inscription
mercredi 25 février 2009
Statut
Membre
Dernière intervention
22 juillet 2019
174
Un économiseur de page internet...
Messages postés
6118
Date d'inscription
jeudi 9 juillet 2009
Statut
Contributeur
Dernière intervention
20 mars 2017
1 465
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.
Messages postés
2313
Date d'inscription
mercredi 25 février 2009
Statut
Membre
Dernière intervention
22 juillet 2019
174
En ben! un arondi sur le max de tableau du fichier .
IndiceduTableau=Math.round'(Math.ramdon()*Max)
Messages postés
2313
Date d'inscription
mercredi 25 février 2009
Statut
Membre
Dernière intervention
22 juillet 2019
174
Y a pas un script pour afficher une horloge qui pourrait y etre adapté.
Messages postés
6118
Date d'inscription
jeudi 9 juillet 2009
Statut
Contributeur
Dernière intervention
20 mars 2017
1 465
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.
Messages postés
2313
Date d'inscription
mercredi 25 février 2009
Statut
Membre
Dernière intervention
22 juillet 2019
174
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)...
Messages postés
1100
Date d'inscription
vendredi 23 février 2007
Statut
Membre
Dernière intervention
27 mars 2012
152
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
Messages postés
6118
Date d'inscription
jeudi 9 juillet 2009
Statut
Contributeur
Dernière intervention
20 mars 2017
1 465
Et si les chemins de mes images sont contenus dans une liste PHP, ça fonctionne toujours ?
Messages postés
1100
Date d'inscription
vendredi 23 février 2007
Statut
Membre
Dernière intervention
27 mars 2012
152
peux tu me donner la forme de ta liste ?
Messages postés
6118
Date d'inscription
jeudi 9 juillet 2009
Statut
Contributeur
Dernière intervention
20 mars 2017
1 465
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.
Messages postés
1100
Date d'inscription
vendredi 23 février 2007
Statut
Membre
Dernière intervention
27 mars 2012
152
J'ai trouver un petit truc qui pourrai t'aider ;)

https://codes-sources.commentcamarche.net/

bon courage ;)

Adns
Messages postés
6118
Date d'inscription
jeudi 9 juillet 2009
Statut
Contributeur
Dernière intervention
20 mars 2017
1 465
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 ?
Messages postés
1100
Date d'inscription
vendredi 23 février 2007
Statut
Membre
Dernière intervention
27 mars 2012
152
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
Messages postés
6118
Date d'inscription
jeudi 9 juillet 2009
Statut
Contributeur
Dernière intervention
20 mars 2017
1 465
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...

Messages postés
3288
Date d'inscription
lundi 10 novembre 2008
Statut
Membre
Dernière intervention
2 mars 2016
295
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 ;-)
Messages postés
6118
Date d'inscription
jeudi 9 juillet 2009
Statut
Contributeur
Dernière intervention
20 mars 2017
1 465
ç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.


Messages postés
1100
Date d'inscription
vendredi 23 février 2007
Statut
Membre
Dernière intervention
27 mars 2012
152
A priori la fonction php2js est une fonction php donc elle doit etre dans la parti php de ton code

entre <?php et ?>

Adns
Messages postés
6118
Date d'inscription
jeudi 9 juillet 2009
Statut
Contributeur
Dernière intervention
20 mars 2017
1 465
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...
Messages postés
1100
Date d'inscription
vendredi 23 février 2007
Statut
Membre
Dernière intervention
27 mars 2012
152
redonne ton code stp ;)

Adns
Messages postés
6118
Date d'inscription
jeudi 9 juillet 2009
Statut
Contributeur
Dernière intervention
20 mars 2017
1 465
<?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...
Messages postés
1100
Date d'inscription
vendredi 23 février 2007
Statut
Membre
Dernière intervention
27 mars 2012
152
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
Messages postés
6118
Date d'inscription
jeudi 9 juillet 2009
Statut
Contributeur
Dernière intervention
20 mars 2017
1 465
Toujours pas...
Es-ce parce que mes images n'ont pas d'extensions ?... pourtant HTML arrive très bien à afficher des images sans extensions...
Messages postés
1100
Date d'inscription
vendredi 23 février 2007
Statut
Membre
Dernière intervention
27 mars 2012
152
comment est déclaré ton tableau en php ?

es ce que tu vois au moins les alert js ?

Adns
Messages postés
1100
Date d'inscription
vendredi 23 février 2007
Statut
Membre
Dernière intervention
27 mars 2012
152
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 ;)
Messages postés
6118
Date d'inscription
jeudi 9 juillet 2009
Statut
Contributeur
Dernière intervention
20 mars 2017
1 465
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...