1.- Préambule :

Ce dispositif de présentation de photos n'utilise que DEUX documents HTML :

Le premier (Accueil.htm) est le point d'entrée. C'est lui qui présente les collections disponibles.

Une fois qu'une collection est choisie, c'est le second document qui est appelé (Diaporama.htm), avec en paramètre le nom du fichier-texte qui correspond à la collection choisie.

Le même document (Diaporama.htm) permet de visualiser les images une à une, dans la MÊME fenêtre que les miniatures représentant la collection.

C'est le script inclu dans Diaporama.htm qui gère alternativement l'affichage ou l'occultation de la page A (miniatures de la collection choisie) ou de la page B (image choisie affichée en grand).

Cela permet d'obtenir un passage très fluide d'une image à celle qui suit ou précède, ainsi que des allers et retours également très rapides entre les pages A et B.

A noter également que lorsqu'une miniature apparaît à l'écran, c'est en fait l'image elle-même qui est déjà chargée. Ses dimensions d'origine ont été au passage mémorisées, afin qu'il en soit tenu compte lors de l'affichage en page B.

Les photos peuvent avoir des dimensions diverses, qu'il est inutile de préciser.

Par défaut, et si la taille de l'écran le permet, les photos sont présentées sans modification de leur taille originelle. Mais si vous double-cliquez sur une image, une icône apparaît en haut et à droite de l'écran, pour vous signaler que vous êtes désormais en mode proportionnel. Dans ce mode, l'image peut se trouver agrandie, en fonction de la place disponible dans la fenêtre d'affichage.

Pour des images d'assez grandes dimensions, il peut se révéler utile de passer en mode plein écran (F11), et de faire disparaître la colonne des favoris.

La couleur de fond des boutons-flèches gauche et droite vous permet de savoir si l'image est dans sa taille originelle (teinte verte) ou si celle-ci a été augmentée (teinte rouge) ou diminuée (teinte bleue).

De même que le format des images n'a pas à être précisé, il est inutile d'indiquer le nombre d'images par collection.

2.- Les matériaux :

2.1.- Les fichiers-textes :

Pour chaque collection, il faut élaborer (par exemple dans le Bloc-Notes), un fichier-texte (.txt) ayant la structure suivante :

En premier lieu, on constitue la variable "text", qui sera utilisée par Diaporama.htm pour faire la présentation de la collection. La première ligne commence par text=, les autres par text+=. Ce qui suit est mis entre guillemets. Chaque ligne contient du texte (ci-dessus en magenta), mais aussi les tags HTML utiles. Certains tags sont redéfinis dans la section CSS de Diaporama.htm, par exemple le tag <H2>.

Plus bas, on définit les variables "URLs" et "URLi" :

URLi est l'URL relative du répertoire dans lequel sont rangées les photos de la collection. Dans l'exemple cité, il s'agit de "/ImagesDiapo/Paris/".

URLs est le chemin de la musique de fond. Elle n'est à renseigner QUE si on souhaite un fond sonore pour la collection. Sinon, on laisse URLs="", ou on supprime la ligne.

En-dessous, on initialise la variable "i", qui sera utilisée par la suite pour réaliser le numérotage automatique des photos. Cette ligne doit rester inchangée.

Vient maintenant la partie la plus importante, qui est contituée d'autant de lignes qu'il y a de photos. Dans chaque ligne, il faut indiquer, d'une part le nom de fichier de l'image (ci-dessus en rouge), ainsi que le commentaire (ci-dessus en vert) qui apparaîtra au survol de l'image dans la page A (présentation des miniatures), ou au-dessus de l'image dans la page B. L'un et l'autre sont entourés de guillemets.

Pour finir, on trouve la ligne NBI=vue.length; qu'il ne faut pas modifier.

2.2.- Accueil.htm :

Accueil.htm, rappelons-le, est le point d'entrée du diaporama. C'est lui qui présente les collections disponibles, et chaque collection est représentée par l'une de ses photos ou par une miniature de 150 x 100 pixels.

Le bloc qui permet d'adapter le code-source à votre cas précis se trouve dans le HEAD, et est facilement repérable. Je le reproduis ci-dessous :

La variable "URLi" contient l'URL relative des photos qui sont choisies pour représenter chaque collection. Il s'agit en fait d'une URL partielle, car ces photos ne sont pas dans le même répertoire. Le complément d'information apparaît plus bas, dans les zones représentées en rouge, où l'on peut lire la suite de l'URL suivie du nom de fichier. Ainsi, la photo choisie pour illustrer la première collection a pour chemin :

En-dessous d'"URLi", on trouve la variable "URLt" (URL relative des fichiers-textes), qui est réduite à sa plus simple expression (chaîne vide), parce que dans notre cas les fichiers txt sont stockés dans le même répertoire que Accueil.htm (et Diaporama.htm).

La variable "NumColl" joue le même rôle que la variable "i" dans les fichiers-textes (numérotage automatique). Cette ligne doit bien-sûr rester inchangée.

Dans les lignes qui suivent (une par collection), il y a juste à renseigner :

1.- La fin de l'URL de la photo choisie comme représentant la collection (en rouge ci-dessus).
2.- Le texte qui s'affiche au survol de la miniature (en vert ci-dessus).
3.- Le nom du fichier-texte associé à la collection (en bleu ci-dessus).

Dans Accueil.htm, il faut aussi, bien sûr, adapter à votre goût le contenu de la DIV "texte", puisque c'est elle qui contient le message d'accueil du diaporama.

Deux ajustements restent à faire :

- En premier lieu celui qui concerne le contenu de la cellule "BP2" du tableau "BasPage". En l'état actuel, il s'agit d'une image qui est en fait le compteur de visites de la page d'acccueil. Vous aurez probablement à coeur d'y insérer le chemin de votre propre compteur ! Cela se situe parmi les dernières lignes du code-source de Accueil.htm. Je suis certain que vous trouverez facilement.

- Et en second lieu, trois lignes plus bas, l'URL du mailto, et c'est tout.

2.2.- Diaporama.htm :

Réjouissez-vous, la seule chose à modifier dans Diaporama.htm est l'URL du mailto en ligne 408 ...

2.3.- Les accessoires :

Ce sont : le fond d'écran (FdDeg.jpg), le fichier qui permet l'affichage d'un cadre de type "ombre portée" (DropShadow.jpg), les constituants de la jauge de téléchargement (PixelGris.gif et PixelRouge.gif), les boutons de navigation du diaporama (BoutD.gif, BoutG.gif, RetColl.gif, RetMini.gif), l'icône de redimensionnement (RedimIco.gif), les boutons de commande du fond sonore (Snd_On.gif, Snd_Off.gif et PixelTrans.gif), et enfin les vignettes de conformité aux standards W3C et CSS (w3c.gif et vcss.gif).

A propos de ces dernières : dès que votre diaporama est en ligne, assurez-vous de sa conformité aux normes W3C et CSS en soumettant votre version de Accueil.htm et de Diaporama.htm aux validateurs ci-dessous :

Pour le W3C : http://validator.w3.org/
Pour le CSS : http://jigsaw.w3.org/css-validator/

3.- Que faire, en pratique :

Sur votre site, créez les répertoires Diaporama, FichiersTxt et ImagesDiapo, ce dernier comportant les sous-répertoires nécessaires au stockage de vos photos. Personnellement, j'ai placé ces répertoires à la racine du site, mais ce n'est bien sûr pas une obligation.

En local, préparez-vous un répertoire (par ex. "ImageSite") afin d'y décompresser le fichier ZIP disponible ICI.

Vous y trouverez les fichiers nécessaires. Je n'ai laissé que trois fichiers txt à titre d'exemple, mais il est évident que vous les remplacerez par vos propres fichiers, qui pourront être sensiblement plus nombreux.

Faites toutes les modifications nécessaires, en vous inspirant des indications données ci-dessus et en tenant compte des choix que vous avez fait pour l'organisation des fichiers sur votre site.

4.- Option Affichage des métadonnées EXIF :

Depuis la version du 4 avril 2007, si votre FAI propose une option PHP, il est possible de créer et exploiter une bibliothèque des métadonnées EXIF des photos qui sont présentées par Diaporama.htm. L'affichage est réalisé sur la ligne normalement réservée à la légende de la photo. Le visiteur peut ainsi, en cliquant sur cette ligne, passer de l'affichage classique de la légende à celui des métadonnées et inversement.

Les métadonnées retenues sont : la date, le type d'appareil, la durée d'exposition, l'ouverture, la sensibilité ISO, la focale et les dimensions de l'image.

La solution adoptée, qui a permis de ne faire que quelques modifications mineures dans Diaporama.htm, consiste à fabriquer, à l'aide d'un petit utilitaire écrit en PHP (cree_exif.php), une bibliothèque unique des métadonnées de toutes les photos de la galerie.

La seule contrainte est que les fichiers .jpg de la galerie soient tous accessibles à partir d'un répertoire unique (par exemple "ImagesDiapo"). L'organisation de l'arborescence de ce répertoire, en revanche, ne pose pas problème.

Si ce répertoire donne accès à des photos qui ne figurent dans aucune collection, les métadonnées de ces dernières seront inutilement collectées, ce n'empêchera pas le diaporama de fonctionner.

Inversement, si des photos sont rangées extérieurement à ce répertoire, leurs métadonnées ne seront pas collectées.

La bibliothèque générée par cree_exif.php est un fichier texte (EXIF.txt), dont la taille est d'environ 50 Ko pour 400 photos.

Celle-ci n'a besoin d'être reconstruite que lorsqu'on ajoute de nouvelles images. L'opération prend deux à trois secondes, en plaçant dans la barre d'adresse du navigateur une URL du type :

http://monsite/Diaporama/cree_exif.php?rep=/ImagesDiapo

En résumé, pour profiter de cette nouvelle option :

Assurez-vous que vos images sont accessibles à partir d'un unique répertoire (lequel peut être arborescent, bien sûr).

Retouchez si nécessaire, dans les fichiers .txt des collections, le chemin de ce répertoire (var URLi=).

Faites la même chose (si nécessaire) au début du fichier Accueil.htm (var URLi=).

Remplacez l'ancienne version de Diaporama.htm par la nouvelle (04/04/07 ou postérieure).

Dans le même répertoire que Accueil.htm et Diaporama.htm, ajoutez le fichier cree_exif.php (vous le trouverez bien sûr dans la nouvelle version de Diaporama.zip).

Il ne reste plus qu'à exécuter ce fichier, via une URL conforme à celle qui a été donnée plus haut (Il peut être commode de ranger cette URL parmi vos favoris).

Lorsque cree_exif.php a fini son travail, il affiche la liste des images dans lesquelles il a trouvé des métadonnées EXIF.

Vérifiez qu'un fichier exif.txt est bien apparu dans le répertoire principal de diaporama (celui dans lequel se trouvent tous les fichiers utiles, à l'exception des photos et des fichiers textes de chaque collection).

cree_exif.php ne traite que les fichiers d'extension tif et jpg. Si vous souhaitez qu'une image ne soit pas concernée par la collecte des informations, choisissez un format différent ou un suffixe long (tiff ou jpeg).

Depuis la version du 15 mars 2008, le fichier cree_exif.php, chargé de gérer la bibliothèque des métadonnées EXIF, génère du même coup un fichier FichiersTxt/RECENT.txt, lequel permet de créer une collection constituée des photos les plus récentes. Pour rendre cette collection disponible, il suffit (après vous être assuré de la création effective du fichier FichiersTxt/RECENT.txt) d'ajouter dans Accueil.htm une ligne du type :

5.- Prise en charge du background-color
de la page de présentation de chaque photo :

Depuis la version du 12 octobre 2007, Diaporama.htm assure la prise en charge d'un troisième paramètre éventuellement présent dans chaque ligne du fichier texte d'une collection.
Ce paramètre permet de déterminer sur quelle couleur de fond sera présentée la photo qui correspond à cette ligne du fichier.
Le paramètre couleur doit être passé au format hexadécimal, le '#' qui le précède étant facultatif.
Une ligne de fichier ainsi renseignée se présente donc comme suit :

Si la ligne de fichier ne comporte pas ce troisième paramètre (ou si celui-ci est inacceptable), l'image est présentée sur le motif de fond d'écran par défaut (FdDeg.jpg).

Afin de faciliter la recherche d'un fond coloré en rapport avec une image donnée, Diaporama.htm a été pourvu (pour Internet Explorer seulement) d'une fonctionnalité supplémentaire à laquelle on accède en double-cliquant sur le rebord ombré d'une photo.
Quand ce mode est activé, diverses couleurs de fond d'écran peuvent être essayées en transmettant leur code hexadécimal via le presse-papier.
Pour ce faire, il est commode d'utiliser un utilitaire de capture de code, tel que le freeware RVB de Pierre TORRIS.

Voilà, c'est tout ... Bonne manipulation.

Gilles ---