TheM : Galerie dynamique en javascript

Les limites du Javascript

Lorsque le nombre de photographies devient important, le principe de la visite dynamique permet de simplifier les opérations de création et de maintenance d'une galerie. Cette technique fait appel à du javascript pour construire au fur et à mesure les pages visitées par l'internaute.

Mais tous les explorateurs ne supportent pas le javascript. De plus, les différentes variables à transmettre d'une frame à l'autre peuvent rendre difficile la création de liens vers une page de galerie précise ou une photo déterminée. C'est pourquoi il est parfois préférable de conserver le principe d'une page HTML par photographie. Se pose alors à nouveau le problème de la génération de tous ces fichiers.

Un logiciel pour générer

Il existe des logiciels du commerce (certains sont présentés sur le site "Publication HTML" indiqué dans les liens) qui génèrent de manière automatique des galeries photographiques HTML. Pourquoi ne pas créer soi-même un programme de ce type? Voici, de manière simplifiée, les différentes étapes de la génération d'une galerie

Création du modèle de la page d'accueil de la galerie
Création du modèle de la page d'affichage d'une photo
Saisie des différents fichiers des photos à présenter
Génération des fichiers HTML de la galerie

Le modèle de la page d'accueil

Le modèle proposé pour la page d'accueil, galerie.html, est celui-ci :

<html>
<head>
 <title>[libelle]</title>
</head>

<body>
Ma galerie Photo<br>
[galerie]
</body>

</html>

où [libelle] et [galerie] sont des balises qui seront remplacées lors de la génération des fichiers par les valeurs suivantes :

[libelle]	titre donné aux pages de la galerie
[galerie]	tableau contenant les imagettes/liens vers les photos grands format

Le modèle de la page d'affichage

De même, le modèle proposée pour la page d'affichage, image.html, est celui-ci :

<html>
<head>
 <title>[libelle]</title>
</head>

<body>
<img src="images/[image]_gf.jpg"><br>
[commentaire]<br>
[precedent] [galerie] [suivant]
</body>

</html>

avec les balises suivantes :

[libelle]	titre donné aux pages de la galerie
[image]	nom du fichier de la photographie
[commentaire]	description de la photographie
[precedent]	lien vers l'image précédente si nécessaire
[galerie]	lien vers la page d'accueil de la galerie
[suivant]	lien vers l'image suivante si nécessaire

Le fichier de données des photos

La liste des photographies à afficher est passée dans un fichier de données. De ce point de vue, il est assez semblable aux tableaux de données de la galerie dynamique. Pour chaque photo, leurs paramètres propres sont indiqués après la balise [locale]. Ils sont ainsi différenciés des paramètres communs à toutes les photos qui eux sont indiqués après la balise [globale]. Ces paramètres globaux sont, par exemple, le titre des pages de la galerie, valeur passée dans la variable libelle. C'est également dans ce fichier que sont indiqués les différents paramètres de construction propres à la galerie (par exemple le nombre de colonnes du tableau des imagettes de la page d'accueil). Ces variables sont passées après la balise [construct]. Le fichier liste.txt ressemble donc à ceci:

[construct]
nbCol = "2";
fichier = "Mum";
[globale]
libelle = "la galerie de Mumu";
[locale]
image =  "avion";
commentaire = "Décollage face à la chaine du Mont Blanc";
[locale]
image =  "ruisseau";
commentaire = "Au bout du lac d'Annecy, le ruisseau eau morte";

Toutes les balises utilisées dans les fichiers modèles de la page d'accueil et des pages d'affichage sont bien présentes dans cette liste avec, pour chacune d'elles, leur valeur respective.

Pour le nom des photographies, seul est indiqué le préfixe. Par exemple, au lieu de avion_gf.jpg ou avion_pf.jpg (pour les photographies destinées à être présentées respectivement sur une page d'affichage et sur la page d'accueil), la variable image prend la valeur avion dans le fichier de données. Pour générer la page d'accueil avec les imagettes, le logiciel rajoutera automatiquement le suffixe _pf.jpg au nom. Pour le fichier d'affichage, il remplacera simplement la balise [image] par sa valeur puisque le suffixe est indiqué directement dans le modèle :

<img src="images/[image]_gf.jpg"><br>

Remarquez que les fichiers images se trouvent dans un sous-répertoire images. Lors de la génération de la page d'accueil, le programme ajoutera automatique ce sous-répertoire avant le nom des imagettes.

Après la balise [construct] se trouve également une variable fichier qui a ici la valeur Mum. Elle indique le préfixe à utiliser pour les noms de fichiers. Les fichiers générés auront pour suffixe Gal.html, si c'est la page de présentation, ou Imgxx.html, si c'est la page d'affichage d'une photo (xx sera remplacé par le numéro de la photo).La génération va donc produire les fichiers suivants :

MumGal.html	page d'accueil de la galerie
MumImg01.html	page d'affichage de la photographie avion_gf.jpg
MumImg02.html	page d'affichage de la photographie ruisseau_gf.jpg

Le programme

Reste à créer le programme! Celui-ci va devoir :

Lire le fichier liste.txt et se créer une liste des différents paramètres de construction, globaux et locaux à chaque photo.
Recopier le fichier galerie.html, le modèle de la page d'accueil de la galerie, y remplacer toutes les balises globales par leur valeur et écrire le tableau des imagettes/liens à la place de la balise [galerie].
Pour chaque photo, recopier le fichier image.html, le modèle de la page d'affichage, y remplacer toutes les balises globales et locales par leur valeur, et renseigner correctement les balises [precedent], [galerie] et [suivant].
Détruire la liste élaborée à partir du fichier de données.

C'est ce que réalise le programme dont le code est présenté ci-dessous. Il a été écrit en langage C. Vous pouvez le recopier et le compiler.

/************************************************************************\
Copyright (C) 2002 Vincent Mugnier - them@ifrance.com

Ce programme est un logiciel libre. Vous pouvez le redistribuer et/ou le
modifier en conformité avec la licence GNU General Public License telle
qu'elle est publiée par la Free Software Foundation;

Ce programme est distribué avec l'espoir qu'il sera utile, mais SANS
AUCUNE GARANTIE; sans même la garantie implicite de QUALITE ou de
FONCTIONNEMENT DANS UN USAGE PARTICULIER. Voir la GNU General Public
License pour plus de détails : http://www.fsf.org/licenses/gpl.txt
\************************************************************************/

#include <stdio.h>
#include <string.h>

void ChangParam();

int main(int argc, char* argv[])
{
    FILE *_pList, *_pModelImg, *_pImg;
    char _sLigne[255], _sCom[50], _sType[50], *_pVal, _sNomFic[50];
    char _sPrefixFic[10], _sLigneTempo[255];
    int _iCompt,_iType,_iNbCol;

typedef struct stParam
    {
        char sCom[50];            //nom de commande
	char sVal[100];            //valeur du paramètre
	struct stParam *pParam;    //paramètre suivant
    } PARAM, *pPARAM;

typedef struct stImage
    {
        pPARAM pParam;            //liste des paramètres
	struct stImage *pImg;    //image suivante
    } IMG, *pIMG;

pIMG _pPremImg = NULL,_pStImg;
    pPARAM _pParam, _pPremParam = NULL, _pStParam;

for (_iCompt=0; _iCompt<255; _iCompt++) _sLigneTempo[_iCompt]='\0';

//création de la liste
    _pList = fopen("liste.txt","r");
    _iType=0;
    while (fgets(_sLigne,255,_pList)!=NULL)
    {
        //lecture du type de données
	_iCompt = sscanf(_sLigne,"[%s",_sType);
	if (_iCompt == 1)
	{
	    _iType = 0;

if (strncmp(_sType,"locale",strlen(_sType)-1)==0)
	    {
	        _iType = 1;
		if (_pPremImg == NULL)	//premiere photo
		{
		    _pStImg = (pIMG) malloc(sizeof(IMG));
		    _pPremImg = _pStImg;
		}
		else			//ajout d'une photo
		{
		    _pStImg->pImg = (pIMG) malloc(sizeof(IMG));
		    _pStImg = _pStImg->pImg;
		}
		_pStImg->pParam = NULL;
            }
	    else if (strncmp(_sType,"globale",strlen(_sType)-1)==0)
	        _iType = 2;
	    else if (strncmp(_sType,"construct",strlen(_sType)-1)==0)
	        _iType = 3;
         }
	 else
	 {
	     //lecture du type du paramètre

_iCompt = sscanf(_sLigne,"%s = ",_sCom);
	     if (_iCompt==1)
	     {
	         //lecture de la valeur
		 _pVal = strtok(_sLigne,"\"");
		 _pVal = strtok(0,"\"");

switch (_iType)
		 {
		 case 1 : //paramètres d'une image
		     //premier paramètre de la photo
		     if (_pStImg->pParam == NULL)
		     {
		         _pStImg->pParam = (pPARAM) malloc(sizeof(PARAM));
			 _pParam = _pStImg->pParam;
		     }
		     //ajout d'un paramètre à la photo
		     else
		     {
		         _pParam->pParam = (pPARAM) malloc(sizeof(PARAM));
			 _pParam = _pParam->pParam;
		     }

//saisie de la commande du paramètre
		     strcpy(_pParam->sCom,_sCom);
		     //saisie de la valeur du paramètre
		     strcpy(_pParam->sVal,_pVal);

break;

case 2 : //paramètres globaux
	             //premier paramètre global
		     if (_pPremParam == NULL)
		     {
		         _pPremParam = (pPARAM) malloc(sizeof(PARAM));
			 _pStParam = _pPremParam;
		     }
		     //ajout d'un paramètre global
		     else
		     {
		         _pStParam->pParam =
			     (pPARAM) malloc(sizeof(PARAM));
			 _pStParam = _pStParam->pParam;
		     }

//saisie de la commande du paramètre
		     strcpy(_pStParam->sCom,_sCom);
		     //saisie de la valeur du paramètre
		     strcpy(_pStParam->sVal,_pVal);

break;

case 3 : //paramètres de construction des pages
		     if (strcmp(_sCom,"nbCol") == 0)
		         _iNbCol = atoi(_pVal);
		     if (strcmp(_sCom,"fichier") == 0)
		         strcpy(_sPrefixFic,_pVal);
		     break;

}
	     }
         }
    }

//création du fichier de galerie
    sprintf(_sNomFic,"%sGal.html",_sPrefixFic);
    _pImg = fopen(_sNomFic,"w");
    _pStImg = _pPremImg;
    _iCompt = 1;
    //ouverture du fichier modèle galerie
    _pModelImg = fopen("galerie.html","r");
    while (fgets(_sLigne,255,_pModelImg)!=NULL)
    {
        //remplacement des paramètres globaux du fichier modèle
	_pStParam = _pPremParam;
	while (_pStParam !=NULL)
	{
	    ChangParam(_sLigne,_pStParam->sCom,_pStParam->sVal);
	    _pStParam = _pStParam->pParam;
	}

_pVal = strstr(_sLigne,"[galerie]");
	//si le paramètre [galerie] est dans la ligne
	if (_pVal != NULL)
	{
	    //copie du début de la ligne
	    strncpy(_sLigneTempo,_sLigne,strlen(_sLigne)-strlen(_pVal));
	    fprintf(_pImg,"%s",_sLigneTempo);

//création du tableau des imagettes
	    fprintf(_pImg,"<table>\n<tr>\n");
	    _pStImg = _pPremImg;
	    _iCompt=1;
	    while (_pStImg != NULL)    //parcours de la liste des images
	    {
	        sprintf( _sLigneTempo,
		         "<td><a href='%sImg%.2d.html'>"
			 "<img src='images/[image]_pf.jpg'></a></td>\n",
			 _sPrefixFic,_iCompt);
		//remplacement des paramètres locaux de chaque image
		_pParam = _pStImg->pParam;
		while (_pParam !=NULL)
		{
		    ChangParam(_sLigneTempo,_pParam->sCom,_pParam->sVal);
		    _pParam = _pParam->pParam;
		}
		fprintf(_pImg,"%s",_sLigneTempo);
		//saut de ligne si nb de colonne atteint
		if ((_iCompt++ % _iNbCol) == 0)
		    fprintf(_pImg,"</tr>\n<tr>\n");
		_pStImg = _pStImg->pImg;
	    }
	    fprintf(_pImg,"</tr>\n</table>");

//copie de la fin de la ligne
	    strcpy(_sLigne,_pVal + 9);
	}

fprintf(_pImg,"%s",_sLigne);

}
    fclose(_pImg);
    fclose(_pModelImg);

//création des fichiers d'affichage
    _pStImg = _pPremImg;
    _iCompt = 1;
    while (_pStImg !=NULL)
    {
        sprintf(_sNomFic,"%sImg%.2d.html",_sPrefixFic,_iCompt++);
	_pImg = fopen(_sNomFic,"w");

//ouverture du fichier modèle image
	_pModelImg = fopen("image.html","r");
	while (fgets(_sLigne,255,_pModelImg)!=NULL)
	{
	    //remplacement des paramètres locaux du fichier modèle
	    _pParam = _pStImg->pParam;
	    while (_pParam !=NULL)
	    {
	        ChangParam(_sLigne,_pParam->sCom,_pParam->sVal);
		_pParam = _pParam->pParam;
	    }

//remplacement des paramètres globaux du fichier modèle
	    _pStParam = _pPremParam;
	    while (_pStParam !=NULL)
	    {
	        ChangParam(_sLigne,_pStParam->sCom,_pStParam->sVal);
		_pStParam = _pStParam->pParam;
	    }

//remplacement des liens
	    if (_pPremImg != _pStImg)
	    {
	        sprintf( _sNomFic,
		         "<a href='%sImg%.2d.html'>précédent</a>",
			 _sPrefixFic,_iCompt-2);
		ChangParam(_sLigne,"precedent",_sNomFic);
	    }
	    else ChangParam(_sLigne,"precedent","");

sprintf(_sNomFic,
	            "<a href='%sGal.html'>galerie</a>",
		    _sPrefixFic);
	    ChangParam(_sLigne,"galerie",_sNomFic);

if (_pStImg->pImg != NULL)
	    {
	        sprintf(_sNomFic,
		        "<a href='%sImg%.2d.html'>suivant</a>",
			_sPrefixFic,_iCompt);
		ChangParam(_sLigne,"suivant",_sNomFic);
	    }
	    else ChangParam(_sLigne,"suivant","");

//recopie de la ligne
	    fprintf(_pImg,"%s",_sLigne);
	}

fclose(_pModelImg);
	fclose(_pImg);

_pStImg = _pStImg->pImg;
    }

//destruction de la liste des photos
    _pStImg = _pPremImg;
    while (_pStImg != NULL)
    {
        _pPremImg = _pStImg;

//destruction des paramètres locaux
	_pParam = _pPremImg->pParam;
	while (_pParam != NULL)
	{
	    _pPremImg->pParam = _pParam->pParam;
	    free(_pParam);
	    _pParam = _pPremImg->pParam;
	}
	_pStImg = _pPremImg->pImg;
	free(_pPremImg);
    }

//destruction de la liste des paramètres globaux
    _pStParam = _pPremParam;
    while (_pStParam != NULL)
    {
        _pPremParam = _pStParam;
	_pStParam = _pPremParam->pParam;
	free(_pPremParam);
    }
}

void ChangParam(char *sLigne, char *sParam, char *sVal)
{
    char *_pParam,_sTempo[255],_sParam[50];
    int i;

for (i=0; i<255; i++) _sTempo[i]='\0';

strcpy(_sParam,"[");
    strcat(_sParam,sParam);
    strcat(_sParam,"]");

_pParam = strstr(sLigne,_sParam);
    //si le paramètre est dans la ligne
    if (_pParam != NULL)
    {
        //copie du début de la ligne
        strncpy(_sTempo,sLigne,strlen(sLigne)-strlen(_pParam));
        //insertion du paramètre
        strcat(_sTempo,sVal);
        //copie de la fin de la ligne
        strcat(_sTempo,_pParam + strlen(_sParam));
        strcpy(sLigne,_sTempo);
    }
}

Après avoir exécuter ce programme dans le répertoire où se trouve les fichiers liste.txt, galerie.html, image.html et le sous-répertoire images voici l'arborescence résultante. Elle correspond au fichier de données indiqué en exemple plus haut. Les fichiers indiqués en italique sont ceux qui ont été générés.

liste.txt		fichier de données
galerie.html		modèle de la page d'accueil
image.html		modèle de la page d'affichage
MumGal.html		page d'accueil de la galerie
MumImg01.html		page d'affichage de la photo avion_gf.jpg
MumImg02.html		page d'affichage de la photo ruisseau_gf.jpg
images		sous-répertoire contenant les photos de la galerie
	avion_pf.jpg	première photo en petit format pour la page d'accueil
	avion_gf.jpg	première photo en grand format pour la page d'affichage
	ruisseau_pf.jpg	deuxième photo en petit format pour la page d'accueil
	ruisseau_gf.jpg	deuxième photo en grand format pour la page d'affichage

Après avoir enlever les fichiers liste.txt, galerie.html et image.html, il ne reste plus que l'arborescence d'une galerie parfaitement fonctionnelle. Vous pouvez appliquer ce petit programme à vos propres fichiers de données et vos propres modèles. Notez que, à part les balises [galerie], [precedent], [suivant] et [image] qui sont écrites dans le code source du programme, toutes les autres n'apparaissent que dans les fichiers de construction. Elles sont lues dans le fichier de données et remplacées si elles apparaissent dans les modèles. Vous pouvez par conséquent les supprimer ou en ajouter de nouvelles et adapter ainsi les modèles aux besoins de votre galerie.

Précisions importantes

Le code source présenté dans cette page vous est proposé sans aucune garantie. En l'utilisant, vous acceptez les termes de la GNU Public License telle qu'elle est proposée par la Free Software Foundation. Pour plus de renseignements sur le logiciel libre et la Free Software Foundation voyez le site de l'AFUL.

Si vous avez des questions sur ce générateur de page HTML, découvert un bug dans le code source proposé ici ou d'autres techniques à me proposer : écrivez-moi !!