Simple galerie d'images

Nous allons voir dans ce tutoriel comment créer simplement une galerie d'images sans être obligé d'utiliser une tonne de Javascript.
  • Chrysantheme
  • Desert
  • Hydrangeas
  • Meduses
Chrysantheme

Le principe de base est tout simple :
  • D'un côté les images miniatures et de l'autre les images de tailles standard.
  • Un peut de XHTML.
  • Un peut de CSS.
  • Un poil de Javascript.
Code XHTML :
<div class="conteneur-galerie-image">
 
<div class="gauche-galerie-image">
<ul class="miniature-galerie-image">
  <li><img src="Chrysantheme.jpg" alt="Chrysantheme" onmouseover="ChangeImage('Chrysantheme.jpg');"/></li>
  <li><img src="Desert.jpg" alt="Desert" onmouseover="ChangeImage('Desert.jpg');"/></li>
  <li><img src="Hydrangeas.jpg" alt="Hydrangeas" onmouseover="ChangeImage('Hydrangeas.jpg');"/></li>
  <li><img src="Meduses.jpg" alt="Meduses" onmouseover="ChangeImage('Meduses.jpg');"/></li>
</ul>
</div>
 
<div class="droite-galerie-image">
<div id="affiche-image"><img src="Chrysantheme.jpg" alt="Chrysantheme"/></div>
</div>
 
</div>
Code CSS :
.conteneur-galerie-image{
margin:0 auto;
border:5px solid #EEE;
width:670px;
height:auto;
overflow:auto;
padding:5px;
}
.gauche-galerie-image{
width:100px;
height:auto;
float:left;
}
.droite-galerie-image{
width:550px;
height:auto;
float:right;
text-align:center;
}
.droite-galerie-image img{
width:490px;
height:400px;
background:#D5F4FF;
padding:5px;
}
.miniature-galerie-image{
list-style-type:none;
padding:0;
}
.miniature-galerie-image li{
display:inline;
}
.miniature-galerie-image li img{
width:80px;
height:80px;
background:#EEE;
padding:5px;
margin:2px;
}
.miniature-galerie-image li img:hover{
background:#D5F4FF;
}
Code Javascript (à placer dans l'entête du document):
<script type="text/javascript">
<!--
var ChangeImage = function ChangeImage(Url)
{
document.getElementById('affiche-image').innerHTML = '<img src="'+Url+'" />';
}
-->
</script>
Explications :

Côté XHTML et CSS, nous créons dans un premier temps un simple conteneur (conteneur-galerie-image) qui "encadre" 2 "div" (gauche-galerie-image et droite-galerie-image) positionnés sur le même axe. Le "div" de gauche permet d'afficher les miniatures sous forme de liste. Le "div" de droite affiche quand à lui l'image survolé dans une taille plus grande.
Le code Javascript permet d'afficher l'image plus grande au survole de la miniature par l’intermédiaire de l'élément "affiche-image"  appelé dans la fonction ChangeImage() dans le "div" portant le même nom, soit : <div id="affiche-image"></div>.
Et si j'ai beaucoup d'images..?
Avec un petit bout de code PHP et un peut d'imagination, vous pouvez automatiser la chose.
2 conditions doivent être réunis :
  1. L'image de taille "normal" doit porter le même nom que sa miniature.
  2. Les miniatures doivent être dans un dossier à part des images de taille "normal".

Par exemple , pour le dossier miniature on créé un dossier nomé "mini" et pour les images de taille "normal" on créé un dossier nomé "normal".
Si une miniature se nome "fleur.jpg", l'image de taille "normal" doit également se nomer "fleur.jpg".
<div class="conteneur-galerie-image">
<?php
$i=1;
//Adresse des dossiers.
$adresse_miniature = "./photos/mini/";
$adresse_normal = "./photos/normal/";
//Ouverture du dossier des miniatures. 
$dossier = opendir($adresse_miniature);
echo '<ul class="miniature-galerie-image">';
//on boucle pour l'affichage des images
while ($Fichier = readdir($dossier))
{  
    if ($Fichier != "." && $Fichier != "..") 
    { 
        if($i==1){
            echo '<div class="droite-galerie-image"><div id="affiche-image"><img src="'.$adresse_normal.$Fichier.'" alt="photo"/></div></div>';
        }
        echo '<li><img src="'.$adresse_miniature.$Fichier.'" alt="photo" onmouseover="ChangeImage(\''.$adresse_normal.$Fichier.'\');"></li>';
        $i++;
    }
}
echo '</ul>';
//Fermeture du dossier. 
closedir($dossier);
?>
</div>

Voir/déposer un commentaire (23) | Signaler un problème