Page 1 sur 2

Afficher les images contenues dans un répertoire.

Posté : 12 mai 2008, 00:03
par Nico_FdMG
Bonsoir,
Je suis vraiment débutant en ce qui concerne le PHP et je viens de passer ma soirée à chercher un code me premettant de créer des galeries le plus simplement possible, j'en ai trouvé plusieurs mais à chaque fois cela ne me convenait pas :? . Là, j'en ai un peu mare et je commence à fatiguer des yeux alors je lance mon grand SOS pour un problème surement "si simple" #-o.
En fait ce que je voudrais c'est afficher toutes les images d'un répertoire en taille réelle, sans lien, sans légende, sans bordure (sans rien quoi) mais par nom décroissant et centrées (Ah! Et j'oubliais : les unes à coté des autres et non en une seule colone comme j'ai obtenu lors des mes essais *--). Avec un code comme celui que je cherche, je réaliserai des galeries en l'utilisant sur plusieurs pages faisant appel à des images venant plusieurs répertoires. Ensuite, il me faudra me lancer à la recherche d'un deuxième code avec création de miniatures avec lien vers l'image en grandeur réelle mais... chaque chose en temps !
Est-ce que quelqu'un a une petite idée pour m'aider ? :roll:

Posté : 12 mai 2008, 00:49
par x0s
Le mieux c'est que tu fasses un tutoriel comme celui-ci par exemple : http://pbnaigeon.developpez.com/tutorie ... dynamique/

Tu essayes de tout comprendre en t'aidant bien sur de la documentation officielle : http://fr.php.net/

Après tu pourras créer ton script personnalisé avec les connaissances requises...

Posté : 12 mai 2008, 02:03
par FredoMkb
Bonsoir :)

Le tutoriel proposé par x0s est vraiment excellent !

Pour ma part, j'avais un tout petit bout de code qui fait quelque chose de semblable à ce que tu cherches, mais les images sont placées centrées dans la page dans une seule colonne, et elle ne sont pas triées par ordre décroissant de leur nom... si ça t'intéresse quand-même, le voici :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head><title>Galerie</title></head>
<body>
<?php 
$liste[] = '<table align="center" cellspacing="5" style="text-align: center;">';
if ($dossier = opendir(dirname(__FILE__).'/')) {
	while (($item = readdir($dossier)) !== false) {
		if ($item[0] == '.') { continue; }
		if (!in_array(end(explode('.', $item)), array('jpg','jpeg','png','gif'))) { continue; }
		$liste[] = '<tr><td><img src="'.$item.'" alt="'.$item.'" /></td></tr>';
	}
	closedir($dossier);
}
$liste[] = '</table>';
echo implode("\n", $liste);
?>
</body>
</html>
Ce code ne liste que les fichiers qui ont une extension parmi les suivantes : "jpg", "jpeg", "png" et/ou "gif", c'est tout. Il suffit de placer ce code dans un fichier nommé "index.php" dans chaque répertoire contenant les images à afficher, dès que tu te rends sur un des ces dossiers, les images contenues seront automatiquement listées.

Sinon, qu'entends-tu par "les unes à coté des autres et non en une seule colone" ?

Cela me paraît assez curieux comme présentation :shock:

Enfin, peut-être qu'en bidouillant un peu ce petit code tu pourras arriver à tes fins... si j'ai un peu de temps, je verrais ce que je peux faire de mon côté...

à+ :)

Posté : 12 mai 2008, 11:31
par FredoMkb
Bonjour :)

Bon, j'ai pris un peu de temps pour adapter mon mini script et voici une solution qui devrait normalement correspondre à peu près à ce que tu cherchais...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN"> 
<html> 
<head><title>Galerie</title>
<style type="text/css">
<!--
body { background-color: #eeeeee; }
div { width: 100%; overflow: auto; }
table { text-align: center; }
table td { padding: 10px; background-color: #ffffff; }
-->
</style>
</head> 
<body>
<div>
<?php  
$table = '<table align="center" cellspacing="10"><tr>'."\n"; 
$liste = array();
if ($dossier = opendir(dirname(__FILE__).'/')) { 
	while (($item = readdir($dossier)) !== false) { 
		if ($item[0] == '.') { continue; } 
		if (!in_array(end(explode('.', $item)), array('jpg','jpeg','png','gif'))) { continue; } 
		$liste[] = $item; 
	} 
	closedir($dossier); 
	rsort($liste);
	foreach ($liste as $val) {
		$table .= '<td><img src="'.$val.'" alt="'.$val.'" /></td>'."\n";
	}
} 
$table .= '</tr></table>'; 
echo $table; 
?>
</div>
</body> 
</html>
Donc, toujours pareil, enregistre ce bout de code dans un fichier nommé "index.php", place une copie de ce fichier dans les répertoires contenant les images que tu désires afficher, inscrit l'adresse de chaque dossier sur ton navigateur et, normalement, le script devrait t'afficher toutes les images contenus dans le dossier demandé (celles qui ont une des extensions supportées), elles seront listées dans une seule rangée et triées par ordre décroissant de leur nom... :shock:

Voilà, à toi de l'adapter suivant tes besoins... à+ :)

Posté : 12 mai 2008, 12:18
par Nico_FdMG
Merci ! ^^
Tout ça commence a prendre un peu forme :D.
J'ai regardé le tutorial de x0s et encore une fois ceux que j'avais trouvé hier à tête reposée, je commence a identifier les variables et fonctions dont j'ai besoin. Dans le tuto de x0s, une constante NBRE_COLONNES et je trouve cela pas mal du tout =). Il faudrait que je fasse un grand mélange de tous les codes existants pour faire le mien, mais je n'en suis pas là...
FredoMkb, ton code fonctionne bien lorsque que je le place dans le dossier ou se trouvent les images que je veux afficher mais est-il possible de faire appel a des images d'un dossier X en mettant le code sur une page qui n'est pas dans ce dossier X ? Surement une histoire de $dir mais quand j'essaye tout seul j'ai toujours des messages d'erreurs *--.

Posté : 12 mai 2008, 12:37
par orgerix
Remplace dirname(__FILE__).'/' par le chemain d'accès relatif à ton dossier ou sont les images.

Posté : 12 mai 2008, 16:16
par Nico_FdMG
J'ai trouvé une solution pour afficher les images d'un dossier, maintenant ca donne ça :
<?php   
$table = '<table align="center" cellspacing="10" width="1080"><tr>'."\n";  
$liste = array(); 
$dir="mon dossier/";
if ($dossier = opendir($dir)) {  
    while (($item = readdir($dossier)) !== false) {  
        if ($item[0] == '.') { continue; }  
        if (!in_array(end(explode('.', $item)), array('jpg','jpeg','png','gif'))) { continue; }  
        $liste[] = $item;  
    }  
    closedir($dossier);  
    rsort($liste); 
    foreach ($liste as $val) { 
        $table .= '<td><img src="'.$dir.'/'.$val.'" alt="" /> </td>'."\n"; 
    } 
}  
$table .= '</tr></table>';  
echo $table;  
?>
Je me suis débrouillé comme j'ai pu =D.
Maintenant j'ai un autre petit problème... avec le tableau. Mes images ne sont plus en une seule colonne mais sur une seule ligne; il faudrait qu'il y ait un retour à la ligne en fonction de la largeur du tableau ou en fonction du nombre d'images sur une ligne (la deuxième solution étant surement plus compliquée que la première je suis bien prêt a me contenter d'un retour à la ligne un peu aléatoire ^^). Comment faire ?

Posté : 12 mai 2008, 17:18
par AB
Tu peux compter le nombre de tes images et en fonctions du nombre de photos affichées par ligne faire une autre ligne. Ex tous les 5 photos :
<?php   
$table = '<table align="center" cellspacing="10" width="1080"><tr>'."\n";  
$liste = array(); 
$dir="mon dossier/";
if ($dossier = opendir($dir)) {  
    while (($item = readdir($dossier)) !== false) {  
        if ($item[0] == '.') { continue; }  
        if (!in_array(end(explode('.', $item)), array('jpg','jpeg','png','gif'))) { continue; }  
        $liste[] = $item;  
    }  
    closedir($dossier);  
    rsort($liste); 

    $nb_images_ligne = 5;
    $i=1;

    foreach ($liste as $val) { 

    if($i%$nb_images_ligne != 0)
        $table .= '<td><img src="'.$dir.'/'.$val.'" alt="" /> </td>'."\n"; 
        else
        $table .= '<td><img src="'.$dir.'/'.$val.'" alt="" /> </td></tr><tr>'."\n";
    $i++;
    } 
}  
$table .= '</tr></table>';  
echo $table;  
?>
Pas testé, juste pour le principe

Posté : 12 mai 2008, 18:05
par Nico_FdMG
Waaaouu =)=).
Ca fonctionne sans aucun problème :wink:.
Un grand merci pour vous ^^.
J'aurai surement encore besoin d'aide pour un autre code avec miniatures plus tard, en attendant je marque ce sujet résolu !

Posté : 12 mai 2008, 18:50
par FredoMkb
Salut :)

En plus de la solution de AB, voici une autre, légèrement différente au niveau de la boucle, mais le résultat est identique. J'en ai profité pour ajouter quelques commentaires afin que tu puisses comprendre aisément le rôle de chaque partie importante du code si jamais tu souhaites y apporter des modifs :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN"> 
<html> 
<head><title>Galerie</title>
<style type="text/css">
<!--
body { background-color: #eeeeee; }
div { width: 100%; overflow: auto; }
table { text-align: center; }
table td { padding: 10px; background-color: #ffffff; }
-->
</style>
</head> 
<body>
<div>
<?php
// Variables "$repertoire" et "$nombre" a personnaliser
$repertoire = dirname(__FILE__).'/'; // Chemin d'acces du dossier a lister
$nombre = 5; // Nombre d'images a afficher par ligne
$liste = array(); // Tableau pour la liste d'images a afficher
$table = array(); // Tableau pour le code Html a publier
// On debute le travail avec le contenu du repertoire (ouverture)
if ($dossier = opendir($repertoire)) { 
	// On recupre le nom de chaque image presente dans le repertoire
	while (($item = readdir($dossier)) !== false) { 
		if ($item[0] == '.') { continue; } 
		if (!in_array(end(explode('.', $item)), array('jpg','jpeg','png','gif'))) { continue; } 
		$liste[] = $item; 
	} 
	closedir($dossier); // On fini de travailler avec le reperoire (fermeture)
	rsort($liste); // On tri la liste d'images par ordre decroissant
	// On construit le tableau Html pour l'affichage
	$table[] = '<table align="center" cellspacing="10"><tr>'; 
	for ($i = 0; $i < count($liste); $i++) {
		$image = '<td><img src="'.$repertoire.$liste[$i].'" alt="'.$liste[$i].'" /></td>';
		// Si le numero d'image a ajouter est multiple du nombre 
		// d'images par ligne, alors on ajoute une nouvelle rangee
		if ((($i + 1) % $nombre) == 0) { $image .= '</tr><tr>'; }
		$table[] = $image;
	}
	$table[] = '</tr></table>'; 
} 
// On affiche le tableau avec les images
echo implode("\n", $table)."\n"; 
?>
</div>
</body> 
</html>
Bien entendu, tu peux personnaliser l'aspect de l'affichage en modifiant les styles Css suivant tes goûts et/ou besoins...

Pour la solution avec des miniatures, tu souhaites faire quoi ?

1. Afficher les miniatures déjà existantes dans un autre dossier ?
2. Générer des miniatures à la volée à partir des images originales ?
3. Autre ?

La première solution est relativement simple à faire, puisque le présent script peut très bien s'utiliser pratiquement en l'état (il faudrait juste ajouter le lien vers l'image originale), pour la deuxième solution, en revanche, il faudra faire appel à un programme de manipulation d'images pour pouvoir générer les miniatures, ça se complique donc un peu, à voir...

Voilô... à+ :)

Posté : 13 mai 2008, 19:13
par Nico_FdMG
Super les commentaires ! =D
Euhm... Pour la solution avec les miniatures, je pense que la première solution (afficher les miniatures déja existantes comme par exemple dans un dossier "mini" placé dans le dossier X) est celle qui me convient ^^. Et il faudrait que les images taille réelle s'affichent dans une pop-up centrée à l'écran; j'avais déja commencé a regarder un peu les scripts sur divers sites =P.

Posté : 13 mai 2008, 20:29
par AB
Dans tes futurs développements il sera sans doute intéressant de faire un système de navigation pour n'afficher qu'un certain nombre de photos par page (et les photos suivantes dans les pages suivantes...).

Puisque tu as un tableau ($liste) indexé numériquement c'est assez facile :

count($liste) te donne le nombre total d'images.
Si tu défini $nb_images_page = 10 (ce qui ferait afficher au maximum deux lignes de 5 images dans ton exemple), le nombre de page nécessaires sera donc de ceil(count($liste)/$nb_images_page).

Voilà c'est le début du principe.
Ensuite un petit calcul pour trouver le numéro d'index (de la première image à afficher dans le tableau $liste) que tu renverras par des variable $_GET en fonction du numéro des pages du menu, et le tour est joué :wink:

Posté : 14 mai 2008, 05:46
par FredoMkb
Bonjour à tous :)

Bon bon, je me suis pris au jeu, du coup, sur la base du script précédent, j'en ai fait un qui est désormais capable d'afficher les images originales et les miniatures existantes dans un dossier nommé "mini" se trouvant dans le dossier des images originales... les script permet même de basculer d'un affichage à l'autre, c'est à dire, des miniatures (affichage par défaut) vers les images originales, et vice-versa. Enfin, cerise sur le gâteau, on peut faire un tri croissant et décroissant de la liste d'images affichées en cliquant sur les liens en haut de la page.

Bon, je ne vais pas publier le code ici, il est devenu quand-même un peu gros, mais voici un lien pour tester la bête, et un autre pour télécharger le script Php (au format ".zip" pour 550Ko environs), déjà mis en place dans une structure de dossiers "galerie" et "mini" (avec deux images pour faire des tests)...

Au début du code, il y a un certain nombre de valeurs à configurer pour personnaliser le fonctionnement du script (il y a des commentaires pour donner quelques indications).

Alors, le script fonctionne par défaut pour lister le contenu du dossier où il se trouve, il suffit donc de pointer le navigateur sur le dossier où il se trouve pour que les images existantes soient listées (c'est la raison pour laquelle j'ai nommé le script "index.php"). Le programme détectera automatiquement la présence du dossier "mini" contenant les miniatures, si ce dossier n'existe pas, il affichera les images originales seulement. Je n'ai pas testé le fonctionnement du script avec un chemin d'accès vers un autre dossier que celui qui l'accueil, mais je pense (j'espère) qu'il ne posera pas de problèmes...

Lorsque les miniatures sont affichées, il suffit de cliquer sur elles pour qu'une nouvelle fenêtre s"ouvre avec l'image originale, un simple clic sur cette dernière et la fenêtre se referme. Si jamais une miniature est orpheline, c'est à dire qu'elle ne dispose pas de son image originale, seul la miniature sera affichée, sans lien vers l'image originale (évidemment ;) )...

Enfin, il y a d'autres petits détails qui peuvent être configurés, mais je n'ai pas mis en place de système de pagination tel que proposé par AB, ce serait bien en effet, mais là je commence à être un peu lessivé... donc, si j'ai le courage, ce sera pour une prochaine version... à moins... à moins que quelqu'un se sente de le faire... des volontaires ? :D

Voilà... j'espère que ce script correspond à peu près à ce que tu souhaitais Nico... tiens-moi au courant en tout cas... à+ :)

Posté : 14 mai 2008, 21:19
par AB
Petit test : sous IE7 le code javascript qui permet de centrer et de dimensionner la fenêtre pop up d'agrandissement aux dimensions de la grande image ne fonctionne pas...
Pour le reste ça à l'air fonctionnel.

Posté : 14 mai 2008, 23:05
par FredoMkb
Bonsoir :)

Merci AB pour le test ! :pouce:

Travaillant sur Mac, je ne peut faire des tests avec IE (version trop ancienne), mais, ceci-dit, plus rien ne m'étonne venant de ce navigateur :?

Bon, restons constructifs... quels sont les symptômes que tu as pu constater :

- Le popup ne s'ouvre pas ?
- Il ne se redimensionne pas ?
- Il se redimensionne mais pas correctement ?
- Il ne se place pas au centre de l'écran ?
- Il n'affiche pas l'image ?
- Autre ?

Suivant ce que tu auras observé, je vais voir si je peut trouver une solution, mais je ne promet rien, c'est pas bien facile de déboguer quand on ne peut pas tester... :shock:

Sinon, j'avoue que le code Php est un peu dégueux... j'ai codé ça un peu à l'arrache vers 4 heures du mat... mais bon, ça a l'air de fonctionner pas trop mal, pour ce que c'est en tout cas ;)

Perso, je ne suis pas trop mécontent en réalité, car c'est mon tout premier script de galerie... faut bien une première fois à tout :D )...

Merci... à+ :)