DIAPORAMA ALÉATOIRE AVEC TIMER

Signaler
Messages postés
18
Date d'inscription
samedi 18 novembre 2006
Statut
Membre
Dernière intervention
12 octobre 2009
-
Messages postés
2483
Date d'inscription
jeudi 30 novembre 2006
Statut
Membre
Dernière intervention
14 janvier 2011
-
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
"\".
\" ----
\".
\" ".
"
".
", \".
\"\".
"
";

?>

31 réponses

Messages postés
2483
Date d'inscription
jeudi 30 novembre 2006
Statut
Membre
Dernière intervention
14 janvier 2011
16
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
Messages postés
18
Date d'inscription
samedi 18 novembre 2006
Statut
Membre
Dernière intervention
12 octobre 2009

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
Messages postés
2483
Date d'inscription
jeudi 30 novembre 2006
Statut
Membre
Dernière intervention
14 janvier 2011
16
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 :
<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
Messages postés
18
Date d'inscription
samedi 18 novembre 2006
Statut
Membre
Dernière intervention
12 octobre 2009

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...
Messages postés
18
Date d'inscription
samedi 18 novembre 2006
Statut
Membre
Dernière intervention
12 octobre 2009

Je crois que je veux faire un truc trop compliqué pour la nulle que je suis oO
Messages postés
2483
Date d'inscription
jeudi 30 novembre 2006
Statut
Membre
Dernière intervention
14 janvier 2011
16
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 :
<script type="text/javacript" src="/path/to/jquery-1.3.2.min.js"></script>


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 :
<?php
# Ici, c'est le chemin du répertoire sur le serveur
$images = glob('/path/to/images/');
$random_image = array_rand($images);
# Là, c'est le chemin depuis la racine du site, pas du serveur
echo '';
?>


Est-ce que j'améliore la clarté du bazar ?

--
Neige

N'hésitez pas à lire la doc
Messages postés
18
Date d'inscription
samedi 18 novembre 2006
Statut
Membre
Dernière intervention
12 octobre 2009

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 '';
?>


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 '';
?>


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
Messages postés
2483
Date d'inscription
jeudi 30 novembre 2006
Statut
Membre
Dernière intervention
14 janvier 2011
16
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 :
<script type="text/javacript" src="/path/to/jquery-1.3.2.min.js"></script> 

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
Messages postés
18
Date d'inscription
samedi 18 novembre 2006
Statut
Membre
Dernière intervention
12 octobre 2009

Ahah!
;-)

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


<script type="text/javacript" src="/global/jquery-1.2.6.min.js">
setInterval(function() {
$("#random-image").load('/random_image.php');
}, 10000);
</script>
<?php
$images = glob('/imgs/process');
$random_image = array_rand($images);
echo '';
?> 



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




<?php
#Je me connecte à la base de données:
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 '';
?> 



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)
Messages postés
2483
Date d'inscription
jeudi 30 novembre 2006
Statut
Membre
Dernière intervention
14 janvier 2011
16
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 :
<?php
$images = glob('/imgs/process');
$random_image = array_rand($images);
echo '';
?> 

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 :
<?php
$images = glob('/imgs/process');
$random_image = array_rand($images);
echo '';
?>

J'ai pas testé, mais logiquement, y'a pas (plus ^^) d'erreur.

Dans ton fichier diaporame, il suffit d'appeler ce script avec include() :
<script type="text/javacript" src="/global/jquery-1.2.6.min.js">
setinterval(function() {
$("#random-image").load('/random_image.php');
}, 10000);
</script>
<?php include('/path/to/random_image.php'); ?>

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 :
<?php
#je me connecte à la base de données:
include 'global/initialisation.php';
include 'global/ouverture.php';

$sql = 'select image_url as url, image_alt as alt, image_title as title from images order by rand() limit 1;';
# On exécute la requête en s'assurant qu'elle ne produit pas d'erreur
if (false !($result @mysql_query($sql))) {
  # Si la requête a bien été exécutée, on récupère la ligne (unique) qu'elle est censée avoir renvoyé
  if ($img_data = @mysql_fetch_assoc($result)) {
    # On affiche la balise img
    printf('', $img_data['url'], $img_data['alt'], $img_data['title']);
    # On quitte le fichier random_image.php
    return;
  }
}
# Si on est là, c'est qu'il y a eu une erreur, on peut afficher une image par défaut, histoire qu'il y ait quelque chose :
print('');
?> 


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
Messages postés
18
Date d'inscription
samedi 18 novembre 2006
Statut
Membre
Dernière intervention
12 octobre 2009

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:

<script type="text/javacript" src="/global/jquery-1.2.6.min.js">
setinterval(function() {
$("#random-image").load('/random_image.php');
}, 10000);
</script>

<?php 
include('/random_image.php'); 
?>

<?php
$images = glob('/imgs/process');
$random_image = array_rand($images);
echo '';
?> 



Et le fichier random_image.php est comme suit:
<?php
$images = glob('/imgs/process');
$random_image = array_rand($images);
echo '';
?>


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
Messages postés
2483
Date d'inscription
jeudi 30 novembre 2006
Statut
Membre
Dernière intervention
14 janvier 2011
16
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
Messages postés
18
Date d'inscription
samedi 18 novembre 2006
Statut
Membre
Dernière intervention
12 octobre 2009

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.
Messages postés
18
Date d'inscription
samedi 18 novembre 2006
Statut
Membre
Dernière intervention
12 octobre 2009

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/)
Messages postés
2483
Date d'inscription
jeudi 30 novembre 2006
Statut
Membre
Dernière intervention
14 janvier 2011
16
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)
<?php
$images = glob('imgs/process/*.*');
$random_image = array_rand($images);
echo '';
?>


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 :

<script type="text/javacript" src="/global/jquery-1.2.6.min.js">
setinterval(function() {
$("#random-image").load('/random_image.php');
}, 10000);
</script>

<?php 
include('/random_image.php'); 
?>

<?php
$images = glob('/imgs/process');
$random_image = array_rand($images);
echo '';
?> 



Il faut mettre ça :

<script type="text/javacript" src="/global/jquery-1.2.6.min.js">
setinterval(function() {
$("#random-image").load('/random_image.php');
}, 10000);
</script>

<?php 
# C'est lui qui affiche déjà l'image ^^
include('/random_image.php'); 
?>



Et si ça marche, tu me dois une bière

--
Neige

N'hésitez pas à lire la doc
Messages postés
18
Date d'inscription
samedi 18 novembre 2006
Statut
Membre
Dernière intervention
12 octobre 2009

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)
Messages postés
18
Date d'inscription
samedi 18 novembre 2006
Statut
Membre
Dernière intervention
12 octobre 2009

Non pas UNE mais DEUX bières :)
Messages postés
2483
Date d'inscription
jeudi 30 novembre 2006
Statut
Membre
Dernière intervention
14 janvier 2011
16
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
Messages postés
18
Date d'inscription
samedi 18 novembre 2006
Statut
Membre
Dernière intervention
12 octobre 2009

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)
Messages postés
2483
Date d'inscription
jeudi 30 novembre 2006
Statut
Membre
Dernière intervention
14 janvier 2011
16
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