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

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>.
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>

Catégorie Créer son site

Créer un site, ce qu'il vous faut savoir et ce qu'il vous faut !Les erreurs à éviter lors de la création d'un siteNom de domaine et Hébergement internetWampServerTransfert d'une page par ftpCHMOD ou CHange MODeLogiciels FTP gratuitStatistique gratuiteLogiciels de créations de sitesFavicon dans les favoris et la barre d'adresseProtection par fichier htaccess d'un dossier sous Free.frMontrer ou cacher un bloc de texte avec getElementByIdKit graphique gratuit - Free templateGraphisme gratuit - Créer votre bannière ou logo gratuitementServices de redirections d'url gratuitHébergements gratuit de sitesEffet lightbox sur un blocSimple galerie d'imagesCréez votre site facilement avec WebSelfFabriquez votre site avec SiteWCréer un site gratuitement et facilement avec Wifeo