Ajax, image aléatoire

Fermé
sasha35 Messages postés 72 Date d'inscription jeudi 12 mars 2009 Statut Membre Dernière intervention 15 mai 2009 - 29 avril 2009 à 16:34
sasha35 Messages postés 72 Date d'inscription jeudi 12 mars 2009 Statut Membre Dernière intervention 15 mai 2009 - 12 mai 2009 à 15:40
Bonjour, je suis en train de faire une fonction qui aura pour but de modifier le un div, pour qu'une image se place dedans, et rafraichisse cette zone toute les 5s(temps approximatif) pour modifier l'image.
L'image peut aller dans le div soit en tant qu'image soit en tant que background-image.
Donc une fois la page charger un compteur serait lancer et toute les 5s le div serait rafraichie.

Voici la partie du fichier index.php qui fait appelle au fichier javascript:
<head>
<script src="templates/templatedebibi/comportement1.js" type="text/javascript"></script>
</head>
<body id="page_bg">
<div id="header">
<div id="header_img"> <!--div à modifier header_img-->
</div>
</div>
</body>

Voici mon javascript:
window.onload = init;
function init() {
new Ajax.Request('traitement.php',{onComplete:affichePhoto;})
}

function affichePhoto(requete) {
var txt = requete.responseText;
document.getElementById('header_img').background-image=txt;
}

Et voici le fichier php qui en fonction de la date(saison) modifie une variable qui détermine le répertoire à utiliser pour choisir une image au hasard dedans et l'afficher:

<?php
$chemin=JPATH_SITE; //chemin de mon site en local joomla
$date = date("md");
$select="0"; //varible qui détermine le répertoire à utiliser
if(($date>="0320") && ($date<"0922"))
{
if(($date>="0320") && ($date<"0621"))
{
$select="0"; //nous somme au printemp
}
else
{
$select="1"; //nous somme en été
}
}
else
{
if(($date>="0922") && ($date<"1221"))
{
$select="2"; //nous somme en automne
}
else
{
$select="3"; //nous somme en hiver
}
}

$dossiers = array("images".DS."printemp", "images".DS."ete", "images".DS."automne", "images".DS."hiver" );
$rdossier = $dossiers[$select]; // selectionne un dossier
$rep = $rdossier.DS;
$listfile = array(); // créer un array vide pour y mettre tous les fichiers

$dir = opendir($chemin.DS.$rep); //ouvres le dossier
while ($f = readdir($dir)) //fais une boucle des fichier du dossier
{
if(is_file($rep.$f) && $f != '.' && $f != '..') //si le fichier existe
{
$ext = substr($rep.$f,-3); // recuperation de l'extension du fichier
if($ext == 'jpg' || $ext == 'JPG' || $ext == 'png' || $ext == 'PNG' || $ext == 'gif' || $ext == 'GIF' || $ext == 'bmp' || $ext == 'BMP')
// c'est bien une img
{
$listfile[] = $f; // ajout du fichier dans l'array listfille

}
}
}
closedir($dir); //ferme le dossier
$nbfichier = count($listfile); //comptes le nbr de fichier
$randfichier = rand(0,($nbfichier-1)); // random de 0 au nombre de fichier
$rfichier = $listfile[$randfichier]; //selectionne un fichier au hasard
var_dump($listfile);
$affich=$chemin.$rep.$rfichier;
//echo($affich);
?>
A voir également:

2 réponses

sasha35 Messages postés 72 Date d'inscription jeudi 12 mars 2009 Statut Membre Dernière intervention 15 mai 2009 11
30 avril 2009 à 10:26
Petite correction à l'avant dernière ligne c'est echo($affich); et pas //echo($affich);
0
sasha35 Messages postés 72 Date d'inscription jeudi 12 mars 2009 Statut Membre Dernière intervention 15 mai 2009 11
12 mai 2009 à 15:40
Bon, personne n'est venue mais j'ai fini par réussir grâce au gars du site du zéro.
Finalement tout est en javascript, mais on ne peut ajouter et retirer des images que si on modifie aussi un peu le code. Je ne vait pas fermer tout de suite le poste car j'ajouterais peut être une petite amélioration plus tard.
Pour ce que ça intéresse:
HTML:
<script src="templates/templatedebibi/traitement.js" type="text/javascript"></script>

Javascript:

window.onload = init;
function init() {
setTimeout ("image()", 1 );
}

function image() {
var date = new Date();
var mois = date.getMonth()+1;
var regexmois = /(\d{2})/;
if(regexmois.test(mois))
{
mois=mois;
}
else
{
mois="0"+mois;
}
var jour = date.getDate();
var regexjour = /(\d{2})/;
if(regexjour.test(jour))
{
jour=jour;
}
else
{
jour="0"+jour;
}
var aujourdui = mois+jour;
var select="0";
if((aujourdui >="0320") && (aujourdui<"0922"))
{
if((aujourdui>="0320") && (aujourdui<"0621"))
{//printemp
select="0";
}
else
{//été
select="1";
}
}
else
{
if((aujourdui>="0922") && (aujourdui<"1221"))
{//automne
select="2";
}
else
{//hiver
select="3";
}
}
//select="0";//sert à tester les saisons
var grille = new Array();
for(var i=0; i<5; i++){
grille[i] = new Array();
}
grille[0] = new Array("/images/printemp/arbre.jpg", "/images/printemp/photo1.jpg","/images/printemp/photo2.jpg","/images/printemp/photo3.jpg","/images/printemp/photo4.jpg");
grille[1] = new Array("/images/ete/fleur.jpg","/images/ete/photo5.jpg","/images/ete/photo6.jpg","/images/ete/photo7.jpg");
grille[2] = new Array("/images/automne/feuille.jpg","/images/automne/photo8.jpg","/images/automne/photo9.jpg","/images/automne/photo10.jpg");
grille[3] = new Array("/images/hiver/lac.jpg","/images/hiver/photo11.jpg","/images/hiver/photo12.jpg","/images/hiver/photo13.jpg");

var n = grille[select].length;
var nb = Math.floor((n)*Math.random());
var val = grille[select][nb];
document.getElementById('header_img').style.backgroundImage="url("+val+")";
setTimeout ("init()", 4999 );
}
0