- 1^ère partie -

Montrer des photos c'est bien,
si la page d'accueil est déjà écrite, c'est encore mieux!

Pour des galeries comportant de nombreuses photographies, les techniques HTML et Javascript permettent d'utiliser des pages d'affichages génériques. C'est le principe de la visite dynamique. Mais pour les pages d'accueil, qui présentent toutes les photographies sous forme d'imagettes, leur mise à jour est fastidieuse et rend difficile la maintenance du site web.

Dans ce cas, la programmation à base de la fonction document.write() va automatiser cette tâche.

2 types de pages d'accueil

Il existe 2 principaux types de page d'accueil :

• toutes les photographies sont présentées sur une seule page. Ce principe est appelé ici : "PresenteTout"
• la galerie est composée de plusieurs pages ne comportant qu'un nombre réduit de photos. C'est le principe du : "PresentePage"

Dans les 2 cas, la structure du site est la même que celle présentée pour la visite dynamique. Tout est construit autour des données enregistrées dans la page principale.

Il est conseillé de nommer les photographies grand format xxx_gf.jpg et les imagettes petit format présentées sur les pages d'accueil xxx_pf.jpg. Il sera alors plus facile de manipuler le nom des photos dans les différentes pages dynamiques. Dans la base de donnée, le nom de la photo n'est alors représenté que par le radical, soit :

image[1] =  "ruisseau";

Afficher l'image en grand format s'effectue alors par la commande :

document.write("<img src='" + image[1] + "_gf.jpg'>");

qui revient au même qu'écrire directement dans le source de la page html :

<img src="ruisseau_gf.jpg">

Afficher l'imagette s'effectue par la commande :

document.write("<img src='" + image[1] + "_pf.jpg'>");

Toute la galerie sur une seule page

Présenter toutes les photographies sur une même page est la manière la plus simple de réaliser une page d'accueil. C'est également la plus facile à programmer.

Pour éviter d'afficher toutes les imagettes sur une seule ligne et obliger le visiteur à utiliser la barre de défilement horizontale pour les visualiser, le nombre maximale de colonnes est défini. Par exemple :

var nbCol = 3;

Pour afficher les imagettes avec la commande habituelle (voir la visite dynamique), il faudrait écrire :

document.write("<a href='affiche.html' onClick='parent.numero=1'>");
document.write("<img src='" + parent.image[1] + "_pf.jpg' border='0'></a>");
document.write("<a href='affiche.html' onClick='parent.numero=2'>");
document.write("<img src='" + parent.image[2] + "_pf.jpg' border='0'></a>");
document.write("<a href='affiche.html' onClick='parent.numero=3'>");
document.write("<img src='" + parent.image[3] + "_pf.jpg' border='0'></a>");
//une ligne de 3 imagettes est remplie : retour à la ligne
document.write("<br>");
document.write("<a href='affiche.html' onClick='parent.numero=4'>");
document.write("<img src='" + parent.image[4] + "_pf.jpg' border='0'></a>");
document.write("<a href='affiche.html' onClick='parent.numero=5'>");
document.write("<img src='" + parent.image[5] + "_pf.jpg' border='0'></a>");
...
        

Cette écriture est simplifiée en introduisant une variable i pour parcourir la liste. Elle représente le numéro des images et vaudra successivement 1,2,3...jusqu'à parent.max. C'est rôle de la boucle suivante :

for (i=1;i<=parent.max;i++) {}
        

avec :

i=1	condition de départ de la boucle
i<=parent.max	condition pour rester dans la boucle
i++	opération à effectuer entre chaque boucle. Ici i est incrémenté de 1 ( i = i+1)

Une nouvelle ligne est commencée lorsque le numéro de l'image est un multiple du nombre de colonne, ou encore si le reste de la division du numéro de l'image par le nombre de colonne est nul :

if (( i % nbCol ) == 0) document.writeln("<br>");

Il n'y a plus qu'à afficher toutes les imagettes :

for (i=1;i<=parent.max;i++)
{
    //affichage d'une imagette et de son lien vers l'affichage de la photo grand format
    document.write("<a href='affiche.html' onClick='parent.numero=" + i + ";'>");
    documentwrite("<img src='" + parent.image[i] + "_pf.jpg' border='0'></a>");
    //retour à la ligne : reste de la division de i par nbCol = 0
    if (( i % nbCol ) == 0) document.write("<br>");
}
        

La page d'affichage présentée dans la visite dynamique ne nécessite aucune modification si ce n'est le lien Galerie qui doit pointer vers la page d'accueil générique presenteTout.html :

//lien vers la galerie
document.write("<a href='presenteTout.html'>Galerie</a>");
        

Pour appliquer les principes de "PresenteTout" à votre site, adaptez les sources ci-dessous :

Source de la page d'accueil presenteTout.html

<html>
<head>
    <title>Fenêtre d'affichage</title>
</head>

<body>
    <script>
    <!--masquer le script pour les anciens browsers
        nbCol=3;

        document.writeln("GALERIE");
        numero=0;
        //affichage des imagettes
        for (i=0;i<=parent.max;i++)
        {
            document.writeln("<a href='affiche.html' onClick='parent.numero=" + i + ";'>");
            document.write("<img src='" + parent.image[i] + "_pf.jpg' border='0'></a>");
            if (((i+1) % nbCol) == 0) document.writeln("<br>");
        }

    // cesser de masquer le script -->
    </script>
</body>

</html>
        

Aussi simple soit-elle, cette formule présente néanmoins des inconvénients. Si le nombre de photographies est trop important, la page d'accueil risque d'être longue à charger. De plus, elle risque de ne pas tenir sur un seul écran et de nécessiter d'utiliser la barre de défilement verticale pour la voir entièrement ce qui n'est jamais conseillé. Pour remédier à cela, le mieux est de définir un nombre de lignes maximal par page et d'afficher la galerie sur plusieurs pages.