Page 1 sur 1

Charger plusieurs images aléatoirement (toutes les X sec)

Posté : 12 juin 2014, 17:30
par vincentddd
Bonjour tout le monde,

Je suis nouveau ici et en plus de cela, je suis quelque peu noob niveau développement web. Je pense que mon problème est assez simple mais il me manque quelques clés de connaissance en PHP pour trouver une solution de manière autonome.

Je vais essayer de vous exposer mon problème très clairement. Si jamais quelqu'un a une petite solution ou un conseil, ce serait super cool de prendre le temps de me répondre.


ALORS

Je voudrais afficher 3 images, piochées aléatoirement dans un dossier.
À la manière d'un diaporama j'aimerais que les balises <img> se "refresh" pour afficher de nouvelles images (toutes les X secondes).

J'ai trouvé un bout de PHP qui me permet de piocher une image aléatoirement dans un dossier. À chaque chargement de la page HTML, une nouvelle image s'affiche.

J'ai donc ajouté un morceau de javascript pour pouvoir recharger ma div contenant l'image toutes les 3 secondes (histoire d'éviter d'avoir besoin de refresh tout l'html...)

Du coup, tout va bien mais je n'ai qu'une image ! Comment faire pour avoir 3 balises img qui chargent de nouvelles images aléatoirement ? À mon avis il ne me manque pas grand chose pour y arriver.

Je vous mets mon code ici:
<?php

$root = '';
// use if specifying path from root
//$root = $_SERVER['DOCUMENT_ROOT'];

$path = 'images/';
 
function getImagesFromDir($path) {
    $images = array();
    if ( $img_dir = @opendir($path) ) {
        while ( false !== ($img_file = readdir($img_dir)) ) {
            // checks for gif, jpg, png
            if ( preg_match("/(\.gif|\.jpg|\.png)$/", $img_file) ) {
                $images[] = $img_file;
            }
        }
        closedir($img_dir);
    }
    return $images;
}

function getRandomFromArray($ar) {
    mt_srand( (double)microtime() * 10 ); // php 4.2+ not needed
    $num = array_rand($ar);
    return $ar[$num];
}
// Obtain list of images from directory 
$imgList = getImagesFromDir($root . $path);

$img = getRandomFromArray($imgList);

?> 

J'ai ensuite ajouté ça, pour rafraichir ma div toutes les 3 secondes:

[javascript]
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#image').load('demo2.php').fadeIn("slow");
}, 3000); // rafraichis toutes les 10000 millisecondes

</script>
[/javascript]

Merci !

Re: Charger plusieurs images aléatoirement (toutes les X sec

Posté : 12 juin 2014, 20:12
par Elie
Bah ton code est pourtant clair.

T'as un code pour lister les images d'un repertoire. Un code pour en sortir un numéro. Je serais toi je supprimerai a chaque fois l'image déjà afficher.
for($i=0;$i<3;$i++) {
 $img = getRandomFromArray($imgList);
 echo '<img src="'.$path.$img.'" />';
 unset($imgList[$img]); // On enleve l'image qui vient de s'afficher pour ne pas qu'elle se réaffiche
}
Dis moi si ca te met sur une piste !

Re: Charger plusieurs images aléatoirement (toutes les X sec

Posté : 13 juin 2014, 10:03
par vincentddd
Merci beaucoup Elie !

En effet les 3 images s'affichent mais je pense qu'il y a confusion avec le javascript car 1 image se répète infiniment et les 3000ms ne sont pas respectées (un peu anarchique du coup).

Est-il possible de demander le refresh dans le PHP?

Re: Charger plusieurs images aléatoirement (toutes les X sec

Posté : 13 juin 2014, 10:33
par Elie
Soit dans ton fichier demo.php tu met 3 image sinon tu fais .image au lieu de #image pour recharger les 3 classes

Re: Charger plusieurs images aléatoirement (toutes les X sec

Posté : 13 juin 2014, 11:27
par telnes
hello

tout dépend du nombre d'image mais pourquoi pas construire un array d'image JS en PHP. ce tableau sera appelé par le JS en local sans ajax
c'est plus léger quand même.

après il suffit d'un timoute + rand dans le JS

++

Re: Charger plusieurs images aléatoirement (toutes les X sec

Posté : 21 juin 2014, 12:58
par vincentddd
Bonjour et merci à @Telnes et @Elie pour leurs réponses!

J'ai mis en ligne mon travail: http://vincentduche.com/lfw/demo.php
Je suis assez satisfait du résultat mais, comme vous pouvez le constater, une image se répète à l'infini.
Malheureusement je ne connais pas du tout PHP et malgré la pertinence de vos réponses, je ne suis pas en mesure, sans connaissance, d'écrire moi-même les modifications à appliquer.

Si quelqu'un aurait la patience et la gentillesse de regarder mon interface et d'examiner son code ce serait vraiment cool ! Si mon problème n'engage pas trop de modifications, je veux bien les deux ou trois lignes de codes manquantes !

Merci beaucoup !