DIAPORAMA ALÉATOIRE AVEC TIMER

Question

Bonjour à tous, 
Je viens de terminer mon site en php (www.sophiedemay.com) et il y a beaucoup de connaissances qui me manquent encore.
Je cherche à faire un diaporama aléatoire, qui changerait d'image toutes les 5 secondes. 
Je me suis basée sur le code que j'ai mis en place pour ma page d'accueil (image qui change à chaque chargement de la page).
Mais je ne sais pas comment intégrer la fonction "timer" dans mon code.
Est-ce que quelqu'un aurait une idée? 
Merci beaucoup, 
A bientôt, 
Sophie


------------------------------------------
Ci-après, le code que jai écrit et qui marche, mais sans le timer (je dois recharger la page pour que l'image change):

<?php

/* RECUPERE LA LISTE DES IMAGES ALEATOIRES : /imgs/aleatoire*/ 
$files = array();  
 $dir = opendir("imgs/process/");  
 while(($file = readdir($dir)) !== false)  
 {  
  if($file !== '.' && $file !== '..' && !is_dir($file) && $file !=='.DS_Store' && $file !=='.BridgeSort' && $file !=='_notes')  
  {  
    $files[] = $file;
    //break;  
  }
 }  
 closedir($dir);  
 shuffle($files);  
 
/* Affiche la liste des fichiers */
echo
"\".
\" ----
\".
\" ".
"
".
", \".
\"\".
"
";

?>

neigedhiver · Answer

Salut,

Tu vas devoir utiliser du Javascript, si tu veux que l'image soit changée à intervalles réguliers sans recharger la page entière.
Tu peux jeter un oeil ici : http://www.phpcs.com/forum/sujet-COMMENT-FAIRE-GALERIE-IMAGE_1364445.aspx où j'explique comment recharger une partie de la page avec des liens. Dans ton cas, l'idée sera quasiment la même sauf qu'il faut utiliser un timer pour déclencher l'évènement plutôt qu'un click sur un lien.
La requête SQL a exécuter pour récupérer une image aléatoire sera du genre :
SELECT image_url, image_alt, image_title FROM images ORDER BY RAND() LIMIT 1;

-- 
Neige

N'hésitez pas à lire la doc

seufseuf · Answer

Salut Neige, 
Merci pour ta réponse rapide...
Bon, ton explication est trèèèèèès compliquée, et je ne suis pas sûre d'avoir bien compris!!!
J'avais moi même essayé de mettre du javascript dans mon code. 
Quelque chose comme :

<script type="text/javascript">

function changefond() {
setTimeout("changeimg();",1000);	
}

Ne penses-tu pas qu'il y ait un moyen plus simple (pour mes pauvres compétences) de faire cela ? 

Merci encore, 
Sophie

neigedhiver · Answer

Arf, mes explications sont compliquées :'( Ca veut dire que je suis pas prêt pour être formateur. Bon, reprenons... Rien de sorcier, tu vas voir... La difficulté vient du fait que PHP est exécuté sur le serveur et ne peut donc pas être exécuté à nouveau tant qu'une requête ne lui est pas à nouveau adressée. Ceci associé au fait que Javascript, qui pourrait tout à fait changer une image sur la page, n'est pas en mesure de savoir quelles sont les images sur le serveur, puisqu'il est exécuté chez le client. AJAX permet de combiner les deux. Il faut un script JS qui interroge le serveur (un script PHP) pour : - soit savoir quelles sont les images disponibles (ce n'est pas recommandé) - soit qu'on lui dise quelle image affichée Le script PHP peut, pour que cela fonctionne, renvoyer deux informations, au choix, selon ta préférence : - une url d'image qui va bien - le code complet d'une balise HTML à afficher L'avantage du code html complet de la balise c'est que tu peux contrôler plus facilement les informations à y mettre (url, alt, height, width, etc) Il te faut donc un script PHP indépendant dont le seul et unique rôle sera de renvoyer le code d'une balise complète, d'après une image tirée au hasard de ta base de données. Je vais faire plusieurs suppositions : - on utilise jQuery ^^ (non, j'ai pas d'actions, mais je suis complètement fan) - le script PHP se trouve à la racine du site et s'appelle random_image.php - la balise se trouve TOUTE SEULE dans un div que l'on appelle random-image : A partir de là, un petit script JS avec jQuery qui changerait l'image dans ce div en appelant random_image.php toutes les 10 secondes ressemblerait à ça : setTimeout() déclenche une action unique après un certain délai, alors que setInterval() répète une action à l'intervalle spécifié. J'ai essayé de faire plus clair... Ai-je réussi ? -- Neige N'hésitez pas à lire la doc

seufseuf · Answer

Neige, C'est déjà bien plus clair ^^ Merci!!!! C'est vraiment gentil, du coup, je penche pour le super bon côté du formateur! Alors, j'ai retravaillé mon code, selon tes instructions (si j'ai bien compris!): 1) J'ai ajouté ton script à mon code: 2) J'ai crée un nouveau doc "random_image.php" dans lequel je mets un script php qui donne l'adresse de l'url (je n'ai pas besoin d'infos pour mes images): 3) Ca ne marche pas ^^ Le code ne doit pas être le bon, puisque l'url est toujours la même, comme les pages se rechargent...

seufseuf · Answer

Je crois que je veux faire un truc trop compliqué pour la nulle que je suis oO

neigedhiver · Answer

Mais non mais non, c'est pas compliqué, et t'es pas nulle (enfin j'en sais rien, mais je suis sûr que non, y'a pas de raison après tout) Hum... J'ai oublié de préciser (c'est mon côté tête en l'air) qu'il faut télécharger jQuery, le mettre sur le serveur et l'inclure dans la page... C'est là : http://jquery.com Pour l'inclure, comme indiqué dans la doc de jQuery : Concernant ton script random_image.php, je ne comprends pas ce qu'il fait... Enfin si, je vois à peu près, mais justement, il ne va rien faire du tout s'il ne fait que ça... Il faut qu'il envoie du texte au navigateur, donc avec la fonction echo() (par exemple). Je partais du principe que tu as une base de données dans laquelle tu stockes tes images. Est-ce que c'est le cas, ou pas ? Si oui, alors il faut : - se connecter à la base de données - exécuter une requête du genre de celle que j'ai donnée plus haut (pour mémoire : SELECT image_path FROM images ORDER BY RAND() LIMIT 1;) - "écrire" la balise image qui va bien avec l'information récupérée : echo ''; Si non, il est préférable que tes photos soient dans un répertoire, seules avec personnes d'autre (elles ont leur caractère...). Dans ce cas, un truc dans le genre devrait faire l'affaire : Est-ce que j'améliore la clarté du bazar ? -- Neige N'hésitez pas à lire la doc

seufseuf · Answer

Neige, Merci tellement pour tes infos! Oui, oui, j'ai bien mis mes images dans un dossier seul, que la base de donnée ou le script php vont chercher! Et j'ai déjà Jquery dans mes fichiers "sources" de mon site. Mais si mon site est déjà connecté à ma base de données, est-ce que j'ai encore besoin de me reconnecter ? Donc je récapitule : Dans ma page, je mets: setInterval(function() { $("#random-image").load('/random_image.php'); }, 10000); Et: Puis dans mon fichier random_image.php : #Je me connecte à la base de données: J'ai du oublier quelque chose, hein, parce que forcément ca ne marche pas, ca aurait été trop beau... En tous cas, merci pour le temps que tu me consacres!!! De nos jours, la générosité non-intéressée est difficile à trouver... Sophie

neigedhiver · Answer

Hum... Bon. Reprenons. Dans les bouts de code que tu montres, y'a quelques trucs qui m'interpellent... Je ne sais pas si c'est parce que tu ne veux pas mettre sur le forum certaines infos ou si c'est un oubli de ta part... Par exemple, tu me dis que tu as mis : J'espère que tu n'as pas oublié de remplacer /path/to/ par le chemin du répertoire où se trouve jquery... De même pour glob('/path/to/images')... ? Concernant la requête : #J'exécute la requête et je donne la balise image: SELECT image_url, image_alt, image_title FROM images ORDER BY RAND() LIMIT 1; euh... tu l'as laissée comme ça dans le code, ou bien tu l'as exécutée avec mysql_query() (ou équivalent) ? Pour être sûr, est-ce que tu pourrais faire un vrai copier/coller des fichiers (seulement ce qui nous intéresse là), si possible en utilisant la balise de mise en forme du code ? Pour ce qui est du temps que je te consacre, attends de recevoir ma facture... ^^ (mouarf la blague à deux balles ! désolé, je résiste jamais à l'envie faire des blagues super pourries que personne d'autre ne ferait sinon) -- Neige N'hésitez pas à lire la doc

seufseuf · Answer

Ahah! ;-) Oui, bien sûr que j'ai remplacé les chemins!!!!! Alors, pour ma page diaporama, j'ai mis: Par contre, pour random_image.php, je crois que j'ai fait n'importe quoi euh... tu l'as laissée comme ça dans le code, ou bien tu l'as exécutée avec mysql_query() (ou équivalent) ? Je crois bien que je l'ai laissé comme ça, car j'ai pas tout compris... THX again (mais je me répète)

neigedhiver · Answer

Ah ! Bon alors je vois une petite erreur ;) Bon alors la plus grosse, évidemment, c'est la requête... En fait, je t'ai laissé le choix (magnanime que je suis) d'utiliser SOIT le contenu du répertoire, SOIT une requête sur la base de données. C'est soit l'un, soit l'autre... Faire les deux n'aurait pas beaucoup de sens. L'autre erreur est juste un caractère manquant, mais qui fait toute la différence : glob() renvoit des noms de fichiers dans le répertoire. Donc, sans slash / qu'il faut rajouter à la main : Note le / derrière process dans src="/imgs/process/.......................... :) Bien bien... Alors en fait, le plus efficace, c'est de laisser, même sur la page diaporame, le script random_image.php se charger d'aller chercher l'image qu'il lui plait sur le moment. Première hypothèse : on n'utilise que les fichiers dans le répertoire, pas la base de données. Le fichier random_image.php sera comme ça : J'ai pas testé, mais logiquement, y'a pas (plus ^^) d'erreur. Dans ton fichier diaporame, il suffit d'appeler ce script avec include() : Je n'ose pas préciser qu'il faut remplacer /path/to/random_image.php par le chemin vers ce fichier (oh ! quelle manière subtile de le faire quand même !) Deuxième hypothèse : on utilise la base de données. Le fichier diaporama ne changera pas, il inclura encore le fichier random_image.php, lequel ne fera qu'afficher la balise image, comme dans la première hypothèse. Le fichier random_image.php par contre, ressemblera à ça : Cela suppose tout de même que : - tu as, dans ta base de données, une table dont le nom est images - cette table images possède au moins 3 champs : image_url, image_alt, image_title (plus un champ image_id qui est une clé primaire AUTO_INCREMENT). - cette table image possède au moins un enregistrement :) Donc si tu n'as pas de base de données avec toutes ces conditions réunies et que tu ne veux/sais pas comment faire (j'envisage juste toutes les hypothèses, hein, je ne mets pas en doutes tes compétences, quoique j'ai cru comprendre que la photo était davantage ton rayon, moi c'est le contraire, la photo, j'ai arrêté de m'y intéresser y'a bien longtemps, ça me paraissait trop compliqué !) euh donc si t'as pas de base de données avec ça, ben tu peux utiliser la première solution qui est de simplement piocher au hasard dans le répertoire. L'avantage de la solution avec la base de données, c'est que tu peux, sans supprimer de photo sur le serveur, choisir lesquelles seront utilisées pour le diaporama aléatoire, en ajoutant un champ qui pourrait s'appeler image_active et dont la valeur (1 ou 0) indique si la photo peut ou non servir pour le diaporama (j'ai l'impression de faire des répétitions dans cette phrase... tant pis, l'heure ne m'encourage pas à chercher à faire mieux, tant que tu comprends, c'est le principal). -- Neige N'hésitez pas à lire la doc

seufseuf · Answer

Cher Neige, C'est clair comme de l'eau de roche (si!). J'ai essayé ta première proposition, qui me parait plus simple : celle qui utilise le répertoire. Mon fichier "diaporama" est comme suit: Et le fichier random_image.php est comme suit: En local, la seule chose qui s'affiche est le texte suivant : "photo aléatoire". Et en distant, il n'a pas l'air de trouver le fichier random (me suis-je trompée dans le chemin ? Pourtant ils sont dans le même dossier). Tu peux voir le code sur http://www.sophiedemay.com/essai.php (J'ai temporairement renommé le fichier "diaporama" essai.php) C'est un problème avec le "include('/random_image.php');" puisque c'est ligne 28, mais après ??? Je pense que tu y vois bien plus clair que moi, mais, grâce à toi, on arrive presque au but!!! Encore merci Sophie

neigedhiver · Answer

Yep, il ne trouve pas, parceque le chemin qui lui est indiqué n'est pas bon... S'il est dans le même répertoire, enlève simplement le / :
include('random_image.php');
D'ailleurs, on voit bien qu'il est là : http://www.sophiedemay.com/random_image.php ce qui confirme mon soupçon.

Pour ce qui est de l'image qui ne s'affiche pas laissant seul "photo aléatoire", ça vient du fait qu'il ne récupère aucune image... Ca, c'est pas normal (enfin pour lui si, je pense que la logique d'un ordinateur est très supérieure à celle d'un humain, mais c'est pas ça qu'on veut !).

Puisqu'on est en plein debug, allons-y franchement...

Mets ça dans ton fichier random_image.php (inutile de mettre les balises BODY, elles rendent le code HTML invalide) :
<?php
header('Content-type: text/plain');
$images = glob('/imgs/process');
var_dump($images);
$random_image = array_rand($images);
var_dump($random_image);
echo '';
?>

Dis moi quand c'est fait, que je regarde ce que ça donne.

-- 
Neige

N'hésitez pas à lire la doc

seufseuf · Answer

Il me dit:

photo aléatoire array(0) { } NULL photo aléatoire photo aléatoire

Depuis que j'ai enlevé le slash, il me met 2 fois photos aléatoire!!!

Est-ce que cette phrase de débug veut dire qu'il ne trouve pas les images ?
Pourtant, elles sont dans imgs/process
(j'ai vérifié l'orthographe des dossiers et les images sont là)

Merci

S.

seufseuf · Answer

Enfin, ca c'est ce qu'il dit en local. 
Et sur le site, http://www.sophiedemay.com/essai.php, il dit sensiblement la même chose...
(et les images sont là http://www.sophiedemay.com/imgs/process/)

neigedhiver · Answer

Ouais... Ben en fait, c'est normal ^^ Et pire encore : c'est de ma faute !! Alors... reprenons... Ton fichier random_image.php doit être comme ça, très précisément (pas plus, pas moins) AHAHAHAHAH j'm'avais gourrationné dans la syntaxe de la fonction glob() qui ne renvoit pas le contenu d'un répertoire, mais tous les fichiers qui correspondent à un masque de recherche re: En fait, glob() va retourner un tableau dont les valeurs, dans le cas présent seront : imgs/process/000.JPG etc. Donc il est inutile de spécifier, dans la source de la balise img, le chemin des images. Et tu as deux fois la balise image, parce que dans le script principal, il ne FAUT PAS mettre le code qui est déjà présent dans random_image.php ;) Toi tu as mis ça : Il faut mettre ça : Et si ça marche, tu me dois une bière -- Neige N'hésitez pas à lire la doc

seufseuf · Answer

Bon alors, la bière c'est pas pour tout de suite ;-)

J'ai tout mis comme tu m'as dit. (merci)
Le site ne trouvait pas le fichier "random_image.php" donc je me suis dit que c'était une histoire de / mal placé dans :

include('/random_image.php'); 

J'ai mis :
include('random_image.php'); 

Et maintenant, ça affiche juste "photo aléatoire"
(http://www.sophiedemay.com/essai.php)

seufseuf · Answer

Non pas UNE mais DEUX bières :)

neigedhiver · Answer

Une bière, deux bière... Un pack quoi... sauf que j'aime pas vraiment les bières "industrielles", sauf quand il "faut" boire et que de toute façon y'a rien d'autre. Mais on s'égare, on s'égare.

Alors donc, il va récupérer 0 maintenant... C'est intéressant... 
En fait... c'est normal 
Encore une fois... Et c'est donc, bien évidemment, encore de ma faute...
Je travaille trop, je dors plus ou presque, du coup, je fais même plus attention à l'utilisation de fonctions élémentaires...

Je suis heureux de t'apprendre que je détiens la solution.

Oui, oui. Farpaitement.

Rien que ça...

Il était temps, oui, je sais...

Bon allez, tu la veux ?

La voici, la voilà :
Il faut mettre ça dans ton fichier random_image.php (et après, j'aurai mérité un fût entier).

<?php
$images = glob('imgs/process/*.*');
$random_image = $images[array_rand($images)];
echo '';
?>

En fait, héhé, la raison c'est que pffffff array_rand() renvoit l'index d'un élément au hasard du tableau, pas l'élément lui-même... Arf  (32 ans, plus aucune dent)

Bon la question ensuite, est de savoir si le rechargement de l'image se fait bien (parce que c'était un point important, non ?) histoire de gagner un bar à bière entier (j'ai très soif).

-- 
Neige

N'hésitez pas à lire la doc

seufseuf · Answer

Merci mon cher Neige, mais mon fichier est déjà comme ça...
(Tu m'as dit de le faire plus haut déjà!!!! à 20:13:44)

neigedhiver · Answer

Non, tu as mal regardé (te serais-tu couchée très tard toi aussi la nuit dernière ? T'as pas assez dormi ? T'as bu ou fumé quelque chose ?)

Regarde bien, à 20:13:44 j'écrivais cette ligne :
$random_image = array_rand($images);
alors qu'à 20:48:15 j'écrivais :
$random_image = $images[array_rand($images)];

C'est un peu comme le jeu des 7 erreurs, sauf que là, y'en a qu'une  <== fier de lui le garçon, héhé 

-- 
Neige

N'hésitez pas à lire la doc

DIAPORAMA ALÉATOIRE AVEC TIMER

31 réponses

Votre réponse

Discussions similaires