Ajax, image aléatoire
sasha35
Messages postés
73
Statut
Membre
-
sasha35 Messages postés 73 Statut Membre -
sasha35 Messages postés 73 Statut Membre -
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);
?>
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:
- Ajax, image aléatoire
- Image iso - Guide
- Reduire taille image - Guide
- Légender une image - Guide
- Acronis true image gratuit - Télécharger - Sauvegarde
- Image gratuite - Guide
2 réponses
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 );
}
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 );
}
