Charger plusieurs images aléatoirement (toutes les X sec)
Posté : 12 juin 2014, 17:30
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:
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 !
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 !