AFFICHER PLUSIEURS GALERIES

Un sommaire pour naviguer

Si le photographe souhaite présenter un grand nombre de photographies, des problèmes vont rapidement apparaitre. Il est en effet difficile d'imaginer une seule et même galerie regroupant toutes les oeuvres produites. Elle risque non seulement d'être trop longue à charger mais l'internaute va avoir du mal à la parcourir. Les difficultés à retrouver une photo particulière ne sont également à prendre en compte.

Il peut être plus judicieux de regrouper les photographies par thèmes, dates, conditions de prises de vue, etc. A chaque groupe correspond une galerie qui doit être à son tour présentée sur le site internet. L'internaute doit pouvoir alors identifier rapidement la galerie qu'il souhaite visiter. Le meilleur moyen étant de présenter une brève description ou un titre pour toutes les galeries, chaque titre étant en fait un lien qui mènera le visiteur vers la galerie proprement dite. C'est le principe du sommaire.

En reprenant la structure de site vue pour la galerie dynamique, la fenêtre du navigateur est décomposée en 2 frames verticales qui s'affichent par dessus la page principale.

• La frame 1 contient le sommaire sommaire.html et a pour nom sommaire
• La frame 2 contient la galerie photographique proprement dite et a pour nom affichage

La galerie classique

Pour une galerie classique, à chaque photo correspond un fichier html. De même, la page d'accueil possède son équivalent html. Ainsi, et en reprenant la règle de nommage édictée dans l'article "générer vos pages html", la page d'accueil de la galerie est MumGal.html. Accéder à cette galerie depuis le sommaire revient donc à créer un lien vers cette page. C'est ce que fait le code suivant :

<a href="MumGal.html">la galerie de Mumu</a>

Mais si ce code est appliqué ainsi dans sommaire.html, en cliquant sur "la galerie de Mumu", le visiteur vera la galerie s'afficher dans la frame 1 à la place du sommaire et non dans la frame 2. Pour corriger cela, il faut indiquer la frame 2 comme destination du lien hypertexte. C'est la cible ou "target" en anglais. La commande à placer dans sommaire.html devient :

<a href="MumGal.html" target="affichage">la galerie de Mumu</a>

En cliquant dans le sommaire sur "la galerie de Mumu", la page d'accueil de la galerie est bien chargée dans le frame 2.

La galerie dynamique

Pour la galerie dynamique, la commande est à peine plus compliquée. Dans ce cas, la frame 2 n'affiche pas directement une page html correspondant à chaque photo, mais elle est raffraichie par les données contenue sur la page principale. Ces mêmes données sont mises à jour lors de la visite de la galerie.

Changer de galerie revient alors à recharger la page principale avec le fichier contenant les données correspondant à la galerie demandée. C'est l'objet de la commande suivante :

<a href="#" onClick='parent.location="accueil.html";'>la galerie de Mumu</a>

Les frames étant déclarées dans la page principale, cette dernière est considérée comme le parent des frames 1 et 2. D'où l'expression parent.location qui permet de modifier le contenu de la page principale à partir d'une commande présente dans l'une des frames.

Conclusion

Voilà de quoi réaliser un sommaire tout à fait fonctionnel et présenter ainsi plusieurs galeries sur une même site internet, que ces galeries soient dynamiques ou classiques. A vous maintenant de nous présenter vos photos!

TheM Le site de Mumu