décembre 26, 2011

Php : Galerie d’images

Créer une galerie d’images

Dans ce tutorial nous allons apprendre à créer une sorte de galerie d’images, en PHP. Le principe est assez simple : une page unique qui sera capable d’afficher toutes vos images une à unes, et composée d’une navigation simple grâce à deux liens “précédent” “suivant”.

// La structure de la page.

Pour ceux qui n’auraient pas la possiblité de créer leur propre page, voici le code source d’une page très basique, mais qui vous permettera de réaliser le tutorial :

<html>
<head>
<title>Gallerie d’images</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1”>
</head>

Cette page devra s’appeller zoom.php et peut être modifiée à votre convenace, bien évidemment.

// Récupération des informations concernant les images.

Il vous faut tout d’abord créer le dossier qui contiendra les images à scanner. Faites un dossier nommé images dans le meme répertoire que votre page zoom.php .

Une fois tout cela réalisé, placez quelques images dans votre dossier images, ce qui nous permettra de pouvoir tester directement le système à la fin du tutorial.

Voici le code à placer tout en haut de votre page zoom.php , juste avant la balise <html> :

<?
// ouverture du dossier
$dossier = opendir(“images/”);

// initialisation du compteur
$i = 1;

// tant qu’il y’a des fichiers, alors on les teste
while($image = readdir($dossier)) {

// si on trouve .gif ou .jpg dans le nom de fichier, alors on incrémente le compteur
if(eregi(“.gif”,$image) || eregi(“.jpg”,$image) || eregi(“.png”,$image)) {

// on place le nom de fichier dans un tableau
$nom_fichier[$i] = $image;
$i++; // et on incrémente
}
}

// récupération du maximum des images ( donc $i… ben oui, réfléchissez un peu :) )
$max = $i;

// récupération du numéro de l’image à afficher + tests
if(empty($_GET[“numero”]) || $_GET[“numero”] > $max - 1) {
$numero = 1;
}
else {
$numero = $_GET[“numero”];
}
?>

- Explications: Dans la variable dossier, nous précisons le path ( chemin ) où se trouvent les images. Ensuite on intialise la variable qui nous servira de compteur dans la boucle while qui va suivre.

La boucle while($image = readdir($dossier)) va en gros, scanner tous les fichiers du dossier ( qui à été précisé dans la variable du même nom ) jusqu’à ce qu’il n’en trouve plus. Dans cette boucle, une condition est posée. Si on trouve “.gif” , “.jpg”, ou “.png” dans le nom de l’image, alors on peut placer le nom du fichier dans le tableau $nom_fichier et ajouter la valeur + 1 à notre compteur.

Ensuite nous pouvons récupérer la valeur de $compteur, qui correspond au nombre d’images présentes dans notre dossier. Cette valeur va être stockée dans la variable $max.

Les informations concernant l’image à regarder seront transmises dans les liens. Ces informations transiteront sous le nom de numéro . C’est ce qu’on appelle la méthode GET. Il faut donc vérifier que cette valeur n’est pas vide, ou n’est pas plus grande que le nombre de fichier présent dans le dossier. Dans le cas ou une de ces deux conditions serait remplie, le $numero de l’image sera 1, pour éviter tout bug de PHP. Tout ce que je viens de vous raconter se trouve dans ce test :

if(empty($_GET[“numero”]) || $_GET[“numero”] > $max - 1) {
$numero = 1;
}

Si évidemment aucune de ces deux conditions n’est remplie, on prends la valeur transmise par GET, car elle est plosible, et nous sommes donc sur de ne pas être confronté au débugger PHP :

else {
$numero = $_GET[“numero”];
}

// Placer les liens précédent, et suivant.

Une des difficultés de ce tutorial, c’est d’afficher correctement vos liens précédent et suivant , mais surtout avec les bon paramètres. En effet , comme nous allons transmettre les informations par GET, il nous faudra transmettre la bonne valeur via numero .Dans notre cas : $numero - 1 pour précédent, et $numero + 1 pour suivant.

Voici le code à insérer, dans la cellulle précédent ( voir plan et/ou dans le code html donnés en début de tutorial ) :

<?
if($numero <= 1) {
echo “Précédent”;
}
else {
$previous = $numero - 1;
echo ” <a href="zoom.php?numero=”.$previous.“">Précédent</a>”;
}
?>

- Explications: Comme vous pouvez le constater, si numero est plus petit ou égal à 1, alors nous sommes sur la premiere image. Le lien ne doit donc pas etre actif. Sinon, on affiche un lien, avec une valeur passée en GET. Cette valeur est $previous, qui est en fait $numero - 1. Cela aura donc pour effet de passer à l’image précédente.

Même chose pour le lien suivant. Voici le code à insérer dans la cellulle suivant :

<?
if($numero >= $max - 1) {
echo “Suivant”;
}
else {
$next = $numero + 1;
echo “<a href="zoom.php?numero=”.$next.“">Suivant</a>”;
}
?>

- Explications: La seule chose qui diffère du cas précédent, c’est la condition à changé et qu’on ne soustrait plus mais qu’on additionne. Si $numero est plus grand ou égal aux nombre de fichiers image, alors le lien n’est pas actif. Sinon tout est en ordre.

// Affichage de l’image.

Il ne nous reste plus qu’à afficher l’image. Pour cela il faut insérer ce code dans la cellule dédiée à l’affichage de l’image ( voir plan en début de tutorial ) :

<?
echo “<img src="images/”.$nom_fichier[$numero].“" style="border:1px Solid #00000;">”;
?>