Javascript+image aléatoire Résolu

Question

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.

Configuration: Windows 7 Edition Intégrale 32 bits

Fallentree · Answer

Un économiseur de page internet...

Neliel · Answer

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.

Fallentree · Answer

En ben! un arondi sur le max de tableau du fichier . 
IndiceduTableau=Math.round'(Math.ramdon()*Max)

Fallentree · Answer

Y a pas un script pour afficher une horloge qui pourrait y etre adapté.

Neliel · Answer

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.

Fallentree · Answer

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

adns · Answer

Bonjour, @Fallentree L'ajout de php dans du code javascript est tout a fais possible ex : 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 et code à coller dans ton BODY

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 En espérant avoir aidé ;) Adns

Neliel · Answer

Et si les chemins de mes images sont contenus dans une liste PHP, ça fonctionne toujours ?

adns · Answer

peux tu me donner la forme de ta liste ?

Neliel · Answer

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.

adns · Answer

J'ai trouver un petit truc qui pourrai t'aider ;)

https://codes-sources.commentcamarche.net/

bon courage ;)

Adns

Neliel · Answer

Je vais essayé, cela me semble très bien pour mon cas, merci. Autre question, les balises , es-ce obligatoire de les mettre dans l'entête HTML ?

adns · Answer

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 Oubli pas le tag résolu ;) Adns

Neliel · Answer

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

xav3601 · Answer

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 ;-)

Neliel · Answer

ç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: Et dans le corps, je met ça:

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.

Neliel · Answer

'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(); "; // 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}; "; } // Si la clef est un entier, pas de guillemets elseif( is_int($key) ) $script_js.= "{$js_array_name}[{$key}] = '{$value}'; "; // sinon avec les guillemets else $script_js.= "{$js_array_name}['{$key}'] = '{$value}'; "; } // Et retourn le script JS return $script_js; } ?> Darkness Angel - Bibliothèques d'images

...

... J'ai du code avant et après la balise mais ils ne concernent pas le problème. Encore merci de te pencher sur mon cas...

adns · Answer

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

Neliel · Answer

Toujours pas... 
Es-ce parce que mes images n'ont pas d'extensions ?... pourtant HTML arrive très bien à afficher des images sans extensions...

Neliel · Answer

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

adns · Answer

Woow balaise le code xD

je sais pas comment tu t'y prend..

tu aurais un url de test ?

voila un code qui fonctionne (meme avec des image sans extensions) ;)

<?php
$arr = array();
$dirname = './smiley/';
$dir = opendir($dirname); 

while($file = readdir($dir)) {
	if($file != '.' && $file != '..' && !is_dir($dirname.$file))
	{
		echo '<a href="'.$dirname.$file.'">'.$file.'</a>';
                $arr[] = $dirname.$file;
	}
}

closedir($dir);


//$arr  = array ("el.png","hl.png","ajax.gif");
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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script>

<?php echo php2js($arr, 'tabImg'); ?>
var temps = 2000;

function changeImage(){
num = Math.floor(Math.random() * tabImg.length-1)+1;

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>

Adns

...

... Adns

Neliel · Answer

Je code comme cela me vient... j'avoue que mes scripts sont souvent lourds.
Je vais essayé de remplacer mon script par le tiens car il a un double avantage.

1) Il va sans doute permettre de faire ce que je recherche.

2) Il va alléger mon script et le rendre peut-être plus rapide.

Neliel · Answer

J'ai modifié ton script pour récupérer les images parce qu'il récupère également les fichiers à la racine, ce que je ne veux pas...


$liste_repertoire_total = array();
	$liste_image_total = array();
	$rep_racine = './';
	$cle_rep_racine = opendir($rep_racine);
	
	while($fichier = readdir($cle_rep_racine))
	{
		if(is_dir($fichier) && $fichier!='.' && $fichier!='..')
		{
			$liste_repertoire_total[]=$rep_racine.$fichier;
			$cle_rep = opendir($rep_racine.$fichier);
			
			while($fichier_rep = readdir($cle_rep))
			{
				if(!is_dir($fichier_rep) && $fichier_rep!='.' && $fichier_rep!='..' && $fichier_rep!='thumb.db')
					$liste_image_total[]=$rep_racine.$fichier."/".$fichier_rep;
			}
		}
	}

Neliel · Answer

Non, toujours pas... j'ai le cadre en tout petit mais à priori, rien dedans.
J'ai pourtant entré ton code hormis la création de la liste qui est différente.

Ceci dit, tu as mis ce lien dans <img>, cette image doit-elle exister pour que cela fonctionne ?

images/imagesParDefaut.png

Neliel · Answer

Il n'y a pas un moyen de vérifier si la liste PHP a été correctement retranscrit en JavaScript ?

Javascript+image aléatoire

25 réponses

Discussions similaires

Newsletters