Parcourir un dossier d'images

**brestoise** · 30/05/2013, 15h08

bonjour, j'ai un dossier des images, je veux parcourir ce dossier et afficher ses images en vignettes, et à chaque click sur la petite vignette il m'affichera dans la meme page l'image en taille réelle.
au fait, j'ai un script qui permet de parcourir un dossier:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<?php 
//nom du r?pertoire contenant les images ? afficher
$nom_repertoire = './images';
//on ouvre le repertoire
$pointeur = opendir($nom_repertoire);
$i = 0;
//on les stocke les noms de fichiers images dans un tableau
while ($fichier = readdir($pointeur))
{
	if (substr($fichier, -3) == "gif" || substr($fichier, -3) == "jpg" || substr($fichier, -3) == "png" || substr($fichier, -4) == "jpeg" || substr($fichier, -3) == "PNG" || substr($fichier, -3) == "GIF" || substr($fichier, -3) == "JPG")
	{
		$tab_image[$i] = $fichier;
		$i++;
	}
}
//on ferme le r?pertoire
closedir($pointeur);
//on trie le tableau par ordre alphab?tique
array_multisort($tab_image, SORT_ASC);
echo '<table><tr>';
for ($j=0;$j<=$i-1;$j++)
{
	echo '<td colspan=2 align="center"><img src="'.$nom_repertoire.'/'.$tab_image[$j].'"  width="50" height="50" title="'.$tab_image[$j].'" ><br>';
}
echo'</tr></table><hr></p>'; 
 ?>

et le code qui affiche des vignettes et les affiche en taille reelle apres un click:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
function affichImage(idImage) {
conteneur=document.getElementById('conteneurImg');
myArray= conteneur.getElementsByTagName('img');
for (i=0;i<myArray.length;i++) {
    myArray[i].style.display="none";
}
document.getElementById(idImage).style.display="block";}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<img src="Koala.jpg" alt="" onclick="affichImage('grandeImage1')" width="150" height="150" />
<img src="Lighthouse.jpg" alt="" onclick="affichImage('grandeImage2')" width="150" height="150"/>
 
<div id="conteneurImg">
<img src="Koala.jpg" alt="" id="grandeImage1" style="display:none;" />
<img src="Lighthouse.jpg" alt="" id="grandeImage2" style="display:none;" />
</div>

le probleme c'est que je sais pas lier entre les 2scipts

**Séb.** · 30/05/2013, 17h56

Pour résumer tu veux intégrer un script Javascript à une page HTML.

Je dis bien HTML et pas PHP car dans ce contexte Javascript ne connaît pas le PHP, uniquement le HTML.

Poste sur le forum adéquat : Javascript.

**Séb.** · 30/05/2013, 17h59

Remarques en passant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if (substr($fichier, -3) == "gif" || substr($fichier, -3) == "jpg" || substr($fichier, -3) == "png" || substr($fichier, -4) == "jpeg" || substr($fichier, -3) == "PNG" || substr($fichier, -3) == "GIF" || substr($fichier, -3) == "JPG")

- Tu exécutes X fois la commande substr( ) alors qu'à chaque fois tu fais à peu près la même chose
- Tu ne testes pas l'extension mais seulement les dernière lettres du nom de fichier (quelconque.xgif serait considéré comme un .gif)
- Tu tentes de gérer la casse, mais c'est fait de manière incomplète (et les .Gif ? etc.)

Invité · 30/05/2013, 19h49

Bonsoir,

Code mixte :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<?php 
//nom du répertoire contenant les images ? afficher
$nom_repertoire = './images';
//on ouvre le répertoire
$pointeur = opendir($nom_repertoire);
$tab_image = array();
//on les stocke les noms de fichiers images dans un tableau
while ($fichier = readdir($pointeur))
{
	$extension_file 	= strtolower( pathinfo($nom_repertoire.'/'.$fichier, PATHINFO_EXTENSION) );
	$extensions_array 	= array('gif','jpg','jpeg','png');
	if ( in_array($extension_file, $extensions_array) )
	{
		$tab_image[] = $fichier;
	}
}
//on ferme le répertoire
closedir($pointeur);
//on trie le tableau par ordre alphabétique
array_multisort($tab_image, SORT_ASC);
?>
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Pictos + Image</title>
<style type="text/css">
#small_image, #big_image, hr { clear:both; }
#small_image img { width:50px; height:50px; float:left; margin:5px; border:1px solid #ccc; }
#big_image img { border:1px solid #ccc; max-width:350px; max-height:350px; } /* facultatif : on limite la taille d'affichage de la grande image */
</style>
<script type="text/javascript">
function affichImage(URLimage) {
	document.getElementById('big_image').innerHTML = '<img src="' + URLimage + '" alt="" />';
}
</script>
</head>
<body>
 
<div id="small_image">
<?php	foreach ($tab_image as $image){ 
			$image_file = htmlspecialchars($nom_repertoire.'/'.$image);
			$image_name = htmlspecialchars(pathinfo($image, PATHINFO_FILENAME));
?>
	<img src="<?php echo $image_file; ?>" alt="" title="<?php echo $image_name; ?>" onclick="affichImage(this.src);" />
<?php	} ?>
</div>
<hr>
<div id="big_image"></div> <!-- c'est la div où s'affichera la grande image -> rempli grâce au script JavaScript -->
 
</body>
</html>

Comme tu es étudiante, je te laisse... étudier.

Quelques infos, cependant :
- séparation des codes PHP/HTML (on n'utilise les balises <?php et ?> que là où elles sont nécessaires).
- pathinfo(xxxxx, PATHINFO_EXTENSION) fournit l'extension réelle du fichier.
- pas besoin d'une <table> ici. Une simple div suffit, avec des images en float:left;

Parcourir un dossier d'images

Langage PHP

Vue hybride

Discussions similaires

Partager

Partager