Forum d'entraide PHPFrance

Bonjour tout le monde,

Je souhaite créer un diaporama aléatoire puisant dans un dossier d'une centaine d'images.
J'ai d'abord trouvé un morceau de PHP qui permet l'affichage d'une image aléatoire au chargement de la page.
Pour créer le diaporama, j'ai ajouté un script qui "recharge" la balise image toutes les x secondes. Ça fonctionne 5 secondes, après ça devient complètement incontrôlable et ça finit par planter le navigateur !

<?php

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

$path = 'image/';
 
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);
for($i=0;$i<2;$i++) {
 $img = getRandomFromArray($imgList);
 echo '<img src="'.$path.$img.'" />';
 unset($imgList[$img]);
}

?>

[javascript]
<script type="text/javascript">
var auto_refresh = setInterval(
function (e)
{
$('#image1').load('index.php').fadeIn();
}, 5000);

$(document).ready(setTimer);
</script>
[/javascript]


<div class="img" id="image1"> <img src="<?php echo $path . $img ?>" alt="" /> </div>

Je n'y connais pas grand chose mais je me rends bien compte que le jquery ne va pas du tout. C'est la seule chose que j'ai trouvé jusqu'à maintenant !
Si quelqu'un a une petite idée ce serait super sympa !

Merci

ton php récupère la liste des images du répertoire, il génère une variable javascript contenant cette liste de nom ordonnée aléatoirement.
en javascript, tu n'as plus qu'à parcourir ta variable tableau, et à afficher l'image suivante toutes les x secondes.
cela fait un seul appel au serveur, contre un à chaque mise à jour avec ton code.

Salut tof73,

Merci beaucoup pour ta réponse. Je saisis bien tes conseils mais je ne sais pas du tout comment les appliquer !
Si c'est assez simple et rapide pour toi, pourrais-tu écrire le code ? Est-ce correct de demander ça... ?
En tout cas je t'en serais très reconnaissant.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>

<script type="text/javascript">var aDatas = [];</script>

<?php

$aImages = scandir('img');
$i = 0;

foreach($aImages as $iKey => $sImage) {
    if (strpos($sImage, 'png') !== false || strpos($sImage, 'jpg') !== false) {
        ?> 

        <script type="text/javascript">
            aDatas.push(<?php echo json_encode($sImage); ?>);
        </script>

        <?php
    }
}

?>

<img src="">

<script>

    function shuffle(array) {
        var currentIndex = array.length, temporaryValue, randomIndex ;

        // While there remain elements to shuffle...
        while (0 !== currentIndex) {

        // Pick a remaining element...
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;

        // And swap it with the current element.
        temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
        }

        return array;
    }

    shuffle(aDatas);

    var i = 0;

    setInterval(function() {
        $('img').attr('src','img/' + aDatas[i]);
        i++;
        if (i == aDatas.length) {
            i = 0;
        }
    }, 500)
</script>


</body>
</html>

Avec :

index.php
img > répertoire contenant les images
js > répertoire contentant jquery.js (librairie jquery)

BASIQUE QUOI =D

Wow! Merci beaucoup Nestecha!

J'ai une dernière petite question ULTRA BASIQUE. Comment ajouter un fade in et un fade out lors de l'apparition et de la disparition de chaque image ?

Slt,

Avec les fonctions fadeIn et fadeOut de Jquery.

Exemple :
[javascript]//après chargement du document
$(document).ready(function (){
jQuery("#Picture").load(function(){
//on cache l'image immédiatement
jQuery(this).fadeOut(0, function(){
//on la ré-affiche avec un effet de transparence
jQuery(this).fadeIn(8000);
});
});
});[/javascript]

A toi d'adapter

Merci beaucoup Megadeth !
Alors ça marche presque bien ! Au niveau du fade out à la fin, tu me conseilles quoi ? J'ai essayé de l'ajouter mais il se met en marche tout de suite après le fade in... On peut le retarder de quelques secondes ?

Slt,

Soit tu changes la valeur au moment du chargement.

Soit tu gères la fonction à l'action.

Mega

ça marche, merci

Bon, je vais encore abuser de vos connaissances.

Ce diaporama fonctionne très bien mais à l'ouverture de la page aucune image ne s'affiche (pendant 10 secondes du coup), il y a juste cette icône de fichier image cassé, ce qui n'est pas esthétique du tout. Comment faire pour que la page cherche directement une image dès l'ouverture ?

Re,

Ce que tu peux faire c'est un preload des images ou attendre que les images soient chargées pour afficher ta page.

Exemple rudimentaire : http://www.mediacollege.com/internet/ja ... eload.html

Il y a des tas de façon de faire la chose. Si tu utilises Jquery autant profiter de ses fonctions

Mega

Le truc c'est que j'ai un dossier de plusieurs centaines d'images et mon diaporama les pioche au hasard ! je ne peux pas toutes les preloader non ?

j'ai l'impression que le problème ne vient pas du chargement des images qui serait trop long car elles ne font que quelques ko chacune et comme par hasard il n'y a pas d'image pendant 10 secondes (temps d'affichage de chaque image).

tu peux les pre uploadés au fur et à mesure, quand cela demande d'afficher une image, tu charges aussi la suivante de ta liste aléatoire.

Forum d'entraide PHPFrance

random image from folder every "x" seconds

random image from folder every "x" seconds

Re: random image from folder every "x" seconds

Re: random image from folder every "x" seconds

Re: random image from folder every "x" seconds

Re: random image from folder every "x" seconds

Re: random image from folder every "x" seconds

Re: random image from folder every "x" seconds

Re: random image from folder every "x" seconds

Re: random image from folder every "x" seconds

Re: random image from folder every "x" seconds

Re: random image from folder every "x" seconds

Re: random image from folder every "x" seconds

Re: random image from folder every "x" seconds

Re: random image from folder every "x" seconds

Re: random image from folder every "x" seconds