DIAPORAMA ALÉATOIRE AVEC TIMER

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
"<table width=\"400\" border=\"0\">".
" <tr>".
" <td align=\"center\">".
"<img src=\"imgs/process/".$files[0]."\" border=\"0\"></a><br>".
"</td>".
"</tr>".
"</table>";

?>

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

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

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 <img> 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 <img> 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 <img> se trouve TOUTE SEULE dans un div que l'on appelle random-image : <div id="random-image"><img ....../></div>
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 :
<script type="text/javascript">
setInterval(function() {
$("#random-image").load('/random_image.php');
}, 10000);
</script>

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

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:
<script type="text/javascript">
setInterval(function() {
$("#random-image").load('/random_image.php');
}, 10000);
</script>

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):
<?php
$param = parse_url($HTTP_REFERER);
$Scheme = $param["http"];
$Host = $param["www.sophiedemay.com"];
$Path = $param["imgs/process"];
?>

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

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

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à : [ Lien ]
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 '<img src="'.$image_path.'" alt="Photo aléatoire" />';

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

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:
<script type="text/javacript" src="/path/to/jquery-1.3.2.min.js"></script>
setInterval(function() {
$("#random-image").load('/random_image.php');
}, 10000);
</script>

Et:
<?php
$images = glob('/path/to/images/');
$random_image = array_rand($images);
echo '<img src="/path/to/images/web/'.$random_image.'" alt="photo aléatoire" />';
?>


Puis dans mon fichier random_image.php :
#Je me connecte à la base de données:
<?php
include 'global/initialisation.php';
include 'global/ouverture.php';
$self = $_SERVER['PHP_SELF'];
#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;
echo '<img src="'.$image_path.'" alt="Photo aléatoire" />';
?>


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

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 :

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

Ahah!
;-)

Oui, bien sûr que j'ai remplacé les chemins!!!!!
Alors, pour ma page diaporama, j'ai mis:

<body>


Par contre, pour random_image.php, je crois que j'ai fait n'importe quoi




Je crois bien que je l'ai laissé comme ça, car j'ai pas tout compris...

THX again (mais je me répète)