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
|
<?php
//nom du répertoire contenant les images ? afficher
$nom_repertoire = './images';
//on ouvre le répertoire
$pointeur = opendir($nom_repertoire);
$i = 0;
//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[$i] = $fichier;
$i++;
}
}
//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 for ($j=0; $j<$i; $j++){ ?>
<img src="<?php echo $nom_repertoire.'/'.$tab_image[$j]; ?>" alt="" title="<?php echo $tab_image[$j]; ?>" 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> |
Partager