Une galerie photo basique

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 .