Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Galerie d'images avec PHP

Compatible ActionScript 2. Cliquer pour en savoir plus sur les compatibilités.Compatible PHP. Cliquer pour en savoir plus sur les compatibilités.Par SamsamTS, le 27 septembre 2004

Article issu du forum, écrit par SamsamTS le 27 sept 2004

Notions recommandées

  1. Comprendre le XML
  2. Php
  3. Javascript

But

On se propose de créer une galerie d'images à l'aide de php. Pour cela il faut :

  1. Créer les miniatures automatiquement (php)
  2. Récupérer la liste des images automatiquement (php)
  3. Envoyer à flash la liste sous forme XML (php)
  4. Interpréter le XML et construire la galerie (flash)
  5. Ouvrir une popup pour afficher l'image (javascript)

galerie.zip

getImgList.php

Ce script va nous permettre de récupérer la liste des images et de créer les miniatures quand elles n'existent pas.

 
<?php
 
//Les répertoires
$rep_imgs = "./images";
$rep_mini = "./mini";
 
//Les dimensions max des miniatures
$width_mini = 100;
$height_mini = 100;
 
//La variable renvoyer à flash
$retour="<racine>";

Le dossier images contient les images de la galerie Le dossier mini contient les images miniatures de la galerie $width_mini et $height_mini sont les dimensions maximales que les miniatures doivent avoir.

 
//On ouvre le dossier
$rep=opendir($rep_imgs);
 
/*Exp​ression régulière pour identifier les fichiers jpg ou jpeg quelque soit leur casse */
$regex="#[-_a-z0-9]+.jp[e]?g#i";
 
//On parcours tous les fichiers 
while ($file = readdir($rep)){ 
 
	//Si c'est un jpg
	if(preg_match($regex, $file)){ 
 
  //On copie l'image
  $src_img = imagecreatefromjpeg("$rep_imgs/$file");

On parcours le dossier en vérifiant que les fichiers ont l'extension jpg ou jpeg avec n'importe quelle casse (JpEG, JpeG,…) et l'on fait une copie (en mémoire) de l'image afin de pouvoir récupérer ses dimensions ultérieurement.

 
//Si la miniature n'existe pas
  if(!file_exists("$rep_mini/$file")){
 
  	//On cherhe la plus grande dimension
  	if(imagesx($src_img) > imagesy($src_img)){
    //On calcul la proportion
    $proportion = $width_mini/imagesx($src_img);
 
    //Nouvelles dimensions
    $new_w = $width_mini;
    $new_h = imagesy($src_img)*$proportion;
  	}else{
    //On calcul la proportion
    $proportion = $height_mini/imagesy($src_img);
 
    //Nouvelles dimensions
    $new_h = $height_mini;
    $new_w = imagesx($src_img)*$proportion;
  	}

On vérifie que la miniature (du même nom que l'image) existe. Si elle n'existe pas on détermine quelle est la plus grande dimension. Si c'est la largeur alors la largeur de la miniature devra être la valeur maximale $width_mini et on calcule la hauteur en conséquence pour garder les proportions. Si c'est la hauteur alors c'est l'inverse.

 
//On crée la nouvelle image
  	$dst_img = imagecreatetruecolor($new_w,$new_h);
  	imagecopyresized($dst_img,$src_img,0,0,0,0,$new_w,$new_h,imagesx($src_img),imagesy($src_img));
 
  	//On l'enregistre
  	imagejpeg($dst_img,"$rep_mini/$file");
  }

On crée la miniature (en mémoire) et on l'enregistre (dans le dossier mini).

 
//On rajoute un noeud xml avec le nom de l'image et ses dimensions
  $retour .= "<img name='$file' width='".imagesx($src_img)."' height='".imagesy($src_img)."' />"; 
	} 
}

On rajoute un noeud xml avec le nom et les dimension de l'image.

 
//On ferme le premier noeud
$retour .= "</racine>"; 
 
//On ferme le dossier
closedir($rep); 
 
//On renvoie le xml au format utf8
echo utf8_encode($retour); 
 
?>

On ferme tout et on renvoie le xml encodé en utf8.

galerie.fla

Passons maintenant au flash, sur la frame 1

 
//Nouveau xml
var imglist = new XML();
//On ignore les blancs dans le xml
imglist.ignoreWhite = true;
//Quand la liste est chargée
imglist.onLoad = function() {
	createGalerie();
};
//On charge
imglist.load("getImgList.php");

On crée un nouvel objet xml et on lui fait charger notre fichier php. Une fois la liste au format xml chargé on lance la fonction createGalerie() que nous alors maintenant définir.

 
//Création de la galerie
function createGalerie() {
	//liste des images
	var noeuds = imglist.firstChild.childNodes;
	//On parcours la liste
	for (var i = 0; i<noeuds.length; i++) {
	  //nom de l'image
	  var nom = noeuds[i].attributes.name;
	  //On crée un clip vide et le positionne
	  var img = this.createEmptyMovieClip("img"+i, i);
	  img._x = (i%5)*110+10;
	  img._y = Math.floor(i/5)*110+10;
	  //On charge la miniature
	  var view = img.createEmptyMovieClip("view", 0);
	  view.loadMovie("mini/"+nom);
	  //On enregistre les infos
	  img.nom = "images/"+nom;
	  img.width = noeuds[i].attributes.width;
	  img.height = noeuds[i].attributes.height;
	  //On affiche l'image dans un popup lors du clic
	  img.onRelease = function() {
	  	popup(this.nom, this.width, this.height);
	  };
	}
}

Cette fonction crée autant de clip que d'images dans la liste et en affiche 5 par ligne. On charge les images dans un nouveau clip (view) afin de pouvoir définir la fonction onRelease (sur img). On prend également soin de sauvegarder les infos de chaque image dans le clip correspondant. Attention : il n'y a aucun préchargement à vous d'adapter le code selon vos besoins.

 
//Lance une popup
function popup(url, width, height) {
	var lalargeur = Math.min(Number(width)+20, System.capabilities.screenResolutionX);
	var lahauteur = Math.min(Number(height)+20, System.capabilities.screenResolutionY);
	var t = (System.capabilities.screenResolutionY-lahauteur)/2;
	var l = (System.capabilities.screenResolutionX-lalargeur)/2;
	var propriete = "width="+lalargeur+",height="+lahauteur+",top="+t+",left="+l;
	if (lalargeur == System.capabilities.screenResolutionX || lahauteur == System.capabilities.screenResolutionY) {
  propriete += ",scrollbars=1";
	}
	getURL("javascript:void(window.open('"+url+"','image"+width+"','"+propriete+"'));");
}
 
Cette fonction lance une popup affichant l'image sur laquelle on a cliqué. Vous pouver biensur utiliser votre propre système de popup selon vos besoin.

galerie.html

Pour que le javascript (popup) fonctionne correctement il faut que l'animation soit affichée dans une page html.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Galerie</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body {
	background-color : #FFFFFF; 
	margin:0;
	pading:0;
} 
-->
</style>
</head>
<body> 
<object type="application/x-shockwave-flash" data="galerie.swf" width="860" height="440"> 
	<param name="movie" value="galerie.swf" /> 
</object>
</body>
</html>

Ce code n'a rien d'extraordinaire, c'est juste pour afficher l'animation.