Menu

Cadre photo sur DashScreen

28 janvier 2015 - DashScreen DashBoard
Cadre photo sur DashScreen

Comme je n’avais pas de cadre photo chez moi j’ai trouvé sympa d’en mettre un sur mon DashScreen. 🙂

J’ai repris le module de Sébastien de cette page !  Que j’ai un peu modifié car il ne fonctionnait pas chez moi.

En plus j’ai créé un petit programme qui me permet de rajouter une photo directement de mon téléphone 🙂 Comme cela j’ai des photo à jour.

Sur le fichier index.php: juste le DIV

<br />
<div id="photo"></div>
<p>

Sur le style.css: 

div#photo
{
right : 200px;
top : 250px;
position : absolute;
width : 200px;
height : 200px;
background-color : rgba(0, 0, 0, 0);
}

Je place par rapport à la droite et le haut. J’ai choisi  de limiter le DIV a 200px par 200px car si l’image est trop grande et grosse le temps de chargement est trop long il y aura de long moment sans photo et c’est pas très jolie pour un cadre photo.

Le javascript.js :

var photo_timeout;

function photo ()
{
$.ajax({
async : false,
type: "GET",
url: "./ajax.php",
data: "block=photo",
success: function(html){
$("#photo").html(html);
}
});

meteo_timeout = setTimeout("photo()", 10000);
}

J’appelle la fonction du fichier ajax.php toutes les 10 secondes pour changer la photo.

Le fichier ajax.php :

if($block == 'photo'){
echo photo();
}

On écrit « echo » le retour de la fonction photo()

Le fichier inc.php :

function photo () {
$dir = "photodiaporama/";
session_start();
$_SESSION['photos']= array();
$i=0;
if (is_dir($dir)) {
if ($dh = opendir($dir)) {
while (($file = readdir($dh)) !== false) {
$a = $dir."/".$file;
if(is_file($a)) {$_SESSION['photos'][$i++]=$dir.$file;}
}
closedir($dh);
}
}
if (!isset($_SESSION['countPhoto'])) { $_SESSION['countPhoto'] = 0;}
else{
if($_SESSION['countPhoto'] < count($_SESSION['photos'])-1)
$_SESSION['countPhoto']++;
else{
$_SESSION['countPhoto'] = 0;
}
$r ='<img heiht = "100%" width="100%" src="'; $r .= $_SESSION['photos'][$_SESSION['countPhoto']]; $r .='"/>';
return $r;
}
}

Pour cette fonction il faut utiliser les fonctions SESSION pour ne pas avoir toujours la même photo d’afficher :(Toutes les photos sont placées dans un répertoire, on les comptes, si c’est le début de la SESSION ou si toutes les photos on été affiché l’incrémentation est mise à 0 sinon on augmente de 1 ++.

La fonction retourne la BALISE IMG avec la prochaine photo.

Étiquettes :