voyons comment implémenter une galerie photo basique avec le site web basique .
a partir du site simple décrit ici , nous allons modifier le répertoire “page1” en lui ajoutant 8 photos comme ci dessous . attention pour la dénomination des fichiers photos choisir une codification simple. ici en l’occurrence , les miniatures seront affichées par paquet de 4 sur plusieurs lignes ( 2 lignes pour cet exemple) donc le nom de fichier est numéroté avec un index ligne colonne
Contenu de “page1.html” :
voici le code html et les commandes de style de “page1.html” . ce fichier au format texte devra bien entendu etre modifié en html en changeant le nom de l’extension.
la partie entre les balise <style> et </style> permet de definir le style (formater) le contenu de la page . vous pouvez donc modifier les valeur suivant vos besoins .
voici le détail du code :
<!DOCTYPE html>
<html>
<head>
<title> GALERIE PHOTO 1</title>
<style>
img
{
width: 140px;
heigh: 110px;
}
th
{
font-size: 2em;
background-color: #f9ddff;
padding: 20px;
}
body
{
font-family: sans-serif;
font-size: lem;
text-align: center;
background-color: slateblue;
}
table
{
background-color: white;
width: 60%;
}
td
{
padding: 25px;
}
</style>
</head>
<body>
<table align="center">
<tr>
<th colspan="4">GALERIE PHOTO 1</th>
</tr>
<tr>
<td colspan="4">clicker sur la vignette pour agrandir la photo</td>
</tr>
<tr>
<td><a href="image01.jpg" target="_blank"><img src="image01.jpg"></a></td>
<td><a href="image02.jpg" target="_blank"><img src="image02.jpg"></a></td>
<td><a href="image03.jpg" target="_blank"><img src="image03.jpg"></a></td>
<td><a href="image04.jpg" target="_blank"><img src="image04.jpg"></a></td>
</tr>
<tr>
<td><a href="image11.jpg" target="_blank"><img src="image11.jpg"></a></td>
<td><a href="image12.jpg" target="_blank"><img src="image12.jpg"></a></td>
<td><a href="image13.jpg" target="_blank"><img src="image13.jpg"></a></td>
<td><a href="image14.jpg" target="_blank"><img src="image14.jpg"></a></td>
</tr>
</table>
</body>
</html>
en appelant la page 1 via le menu de gauche du site web basique , on ouvre “page1.html” dans la fenetre de visualisation et cela donne:
et quand on clique sur une des vignettes de la page, on ouvre une nouvelle fenêtre avec la photo en taille maxi adaptée a la fenêtre , par exemple en cliquant sur la deuxième vignette de la deuxième ligne on obtient cette page:
voila , pas plus compliqué que ça . vous pouvez bien entendu créer plusieurs galeries photos , appelée chacune par une ligne différente dans le menu de gauche …
pour cela , créer autant de répertoire et de fichiers “pagex.html” avec les photos relatives dans le répertoire .