TheM : Page d'accueil dynamique en javascript

Une galerie sur plusieurs pages

Avec le principe "PresenteTout (voir "une page d'accueil dynamique - 1ère partie"), toutes les photographies sont présentées sur une seule page et seul le nombre de colonne est défini. Cette fois-ci, avec les principe "PresentePage", le nombre de photographies présentées simultanément est limité. La galerie est donc composée de plusieurs pages définies par un nombres de ligne et un nombre de colonne fixes. Par exemple :

var nbCol = 3;
var nbLigne = 2;

Quelle est la page en cours?

La variable parent.numero permet de connaitre la page en cours (variable Page). En effet, une page possède nbCol colonnes et nbLigne lignes. Elle peut donc accueillir nbCol x nbLigne images. Le numéro de la dernière photographie d'une page vaut donc :

derniere = Page*nbCol*nbLigne;

et le numéro de la première photographie (numéro de la dernière photo de la page précédente + 1) :

premiere = (Page-1)*nbCol*nbLigne + 1;

En comparant parent.numero aux valeurs de premiere et derniere, il est facile de calculer Page, le numéro de la page correspondante.

L'affichage des imagettes

La boucle d'affichage est un peu différente de celle de PresenteTout. Pour PresenteTout, toutes les photos sont affichées grâce à une seule boucle. Cette fois-ci, deux boucles permettent d'afficher les imagettes contenues sur une même page : une boucle qui parcourt les lignes et, pour chaque ligne, une boucle qui parcourt les colonnes :

//parcours des lignes
for (i=1;i<=nbLigne;i++)
{
    //parcours des colonnes d'une même ligne
    for (j=1;j<=nbCol;j++)
    {
        //il y a bien (nbCol x nbLigne) imagettes
    }
}

Pour revenir à la ligne il suffit d'ajouter la commande suivante :

for (i=1;i<=nbLigne;i++)
{
    document.writeln("<br>"); //affichage d'un saut de ligne
    for (j=1;j<=nbCol;j++) {}
}

Il ne reste plus qu'à afficher les imagettes avec leur lien. numero permet de calculer le numéro de la photo à afficher. Cette variable est incrémentée avec la commande :

<img src='" + parent.image[numero++] + "_pf.jpg' border='0'>

qui revient à écrire :

<img src='" + parent.image[numero] + "_pf.jpg' border='0'>
numero = numero + 1;

Sachant que numero est comprise entre premiere (numéro de la première photo de la page) et derniere (numéro de la dernière photo de la page), la boucle d'affichage est :

numero=premiere;
for (i=1;i<=nbLigne;i++)
{
    document.writeln("<br>");
    for (j=1;j<=nbCol;j++)
        if (numero<=derniere)
        {
            //affichage d'une imagette avec son lien
            document.writeln("<a href='affiche.html' onClick='parent.numero=" + numero + ";'>");
            document.writeln("<img src='" + parent.image[numero++] + "_pf.jpg' border='0'></a>");
        }
}

Les liens vers les autres pages

Un sommaire permet de naviguer d'une page à l'autre. Par exemple, si la galerie compte 4 page et que la deuxième est affichée :

1 2 3 4

où 1, 3 et 4 pointent vers les autres pages et 2 indique la page en cours. La boucle d'affichage du sommaire est :

for (i = 1 ; i <= nbPage ; i++ )
    //affichage du numero de la page actuelle
    if (i==Page) document.write(i);
    //autre page = lien
    else
    {
        document.write("<a href='presentePage.html' onClick='parent.numero=");
        document.write( (i*nbCol*nbLigne) + ";'>" + i + "</a>");
    }

où nbPage est le nombre total de pages de la galerie. Le numéro de la dernière photo de la page visée est indiqué dans la variable parent.numero qui permet de calculer le numéro de la page affichée.

3 manières de visiter la galerie

Une galerie présentée sur plusieurs pages autorise plusieurs sortes de visite :

il est possible de parcourir toute la galerie en passant d'une photographie à l'autre sans jamais revenir aux pages d'accueil. Le lien Galerie renvoi alors à la page dans laquelle se trouve la photo visionnée. C'est la visite directe. La page d'affichage, déjà présentée dans la visite dynamique, le permet sans autre modification que celle du lien vers la galerie qui cette fois-ci pointe vers la page générique presentPage.html.
il n'est possible de visionner que les photographies présentées sur une même page d'accueil. Pour voir le reste de la galerie, il est nécessaire de revenir à la page d'accueil en cours qui comporte les liens vers les autres pages. C'est la visite "intra-page".
il n'est possible de visionner que les photographies présentées sur une même page d'accueil. Mais la première et la dernière photographie de la page offrent la possibilité d'accéder directement aux pages d'accueil qui précèdent et suivent la page en cours. C'est la visite "inter-page".

visite directe

visite "intra-page"

visite intra-page

visite "inter-pages"

visite inter-pages

Les visites intra et inter-page

La page d'affichage générique affiche.html est l'outil de parcours de la galerie. Pour qu'elle puisse tenir compte des pages d'accueil, il faut qu'elle ait accès aux valeurs des numéros des premières et dernières photographies de chaque page. Les variables suivantes sont donc ajoutées sur la page index.html :

var premiere;   //numero de la premiere photo de la page
var derniere;   //numero de la derniere photo de la page

Ces variables seront mises à jour, après leur calcul, par les pages d'accueil. Les seules modifications à apporter à la page d'affichage conernent les liens Suivante et Précédente.

Pour la visite intra-page, ces liens ne sont disponibles qu'à l'intérieur de la page. Dans les autres cas, le visiteur n'aura pas d'autre choix que de retourner à la page d'accueil elle-même :

//affichage de la photo précédente sauf pour la première
if (parent.numero != parent.premiere)
    document.writeln("<a href='affiche.html' OnClick='parent.numero--'>Photo Précédente</a>");
//affichage de la photo suivante sauf pour la dernière
if (parent.numero != parent.derniere)
    document.writeln("<a href='affiche.html' OnClick='parent.numero++'>Photo Suivante</a>");

Dans le cas de la visite inter-page, ces liens sont complétés par un accès aux pages d'accueil précédente et suivante pour les première et dernière photographies de la page en cours :

//affichage de la photo précédente sauf pour la première
if (parent.numero != parent.premiere)
    document.writeln("<a href='affiche.html' OnClick='parent.numero--'>Photo Précédente</a>");
//pour la première, accès à la page précédente
else
    document.writeln("<a href='presentePage.html' OnClick='parent.numero--'>Galerie Précédente</a>");

//affichage de la photo suivante sauf pour la dernière
if (parent.numero != parent.derniere)
    document.writeln("<a href='affiche.html' OnClick='parent.numero++'>Photo Suivante</a>");
//pour la dernière, accès à la page suivante
else
    document.writeln("<a href='presentePage.html' OnClick='parent.numero++'>Galerie Précédente</a>");

Voilà comment il est possible de créer dynamiquement une page d'accueil. Vous pouvez appliquer les principes de "PresentePage" à votre site en adaptant les sources ci-dessous :

Source de la page d'accueil presentePage.html

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

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

        //calcul du nombre de page en valeur entière
        for (nbPage=1;nbPage <= ((parent.max+1) / nbCol) / nbLigne;nbPage++) {};
        //calcul du numéro de la page actuelle
        for (Page=1;Page*nbCol*nbLigne  < (parent.numero+1);Page++) {};

        //calcul du numéro de la premiere et dernière image de la page actuelle
        premiere = (Page-1)*nbCol*nbLigne;
        derniere = Page*nbCol*nbLigne - 1;
        if (derniere>parent.max) derniere=parent.max;
        parent.premiere = premiere;
        parent.derniere = derniere;

        document.writeln("GALERIE");
        //affichage des liens vers les autres pages de la galerie
        for (i = 1 ; i <= nbPage ; i++ )
            //affichage du numero de la page actuelle
            if (i==Page) document.write(i);
            //autre page = lien
            else
            {
                document.write("<a href='presentePage.html' onClick='parent.numero=");
                document.write( ((i-1)*nbCol*nbLigne) + ";'>" + i + "</a>");
            }

            //affichage des imagettes
            numero=premiere;
            for (i=1;i<=nbLigne;i++)
            {
                document.writeln("<br>");
                for (j=1;j<=nbCol;j++)
                    if (numero<=derniere)
                    {
                        //affichage d'une imagette avec son lien
                        document.writeln("<a href='affiche.html' onClick='parent.numero=" + numero + ";'>");
                        document.write("<img src='" + parent.image[numero++] + "_pf.jpg' border='0'></a>");
                    }
            }

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

</html>

Source de la page d'affichage générique affiche.html
pour une visite "inter-pages"

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

<body>
    <script>
    <!--masquer le script pour les anciens browsers
        document.write("<div align='center'>");
        //affichage de l'image
        document.write("<img src='" + parent.image[parent.numero] + "_gf.jpg'>");
        document.write("<br>");
        //affichage du commentaire
        document.write(parent.commentaire[parent.numero]);
        document.write("<br>");
        //lien vers la précédente sauf si première photo
        if (parent.numero >= 0)
        {
            //première photo : lien vers la page précédente
            if (parent.numero == parent.premiere)
            {
                document.writeln("<a href='presentePage.html' OnClick='parent.numero--'>");
                document.write("Galerie Précédente</a>");
            }
            //sinon affichage de la photo précédente
            else
            {
                document.writeln("<a href='affiche.html' OnClick='parent.numero--'>");
                document.write("Photo Précédente</a>");
            }
        }
        //lien vers la galerie
        document.write("<a href='presentePage.html'>Galerie</a>");
        //lien vers la suivante sauf si dernière photo
        if (parent.numero <= parent.data.max)
        {
            //dernière photo : lien vers la page suivante
            if (parent.numero == parent.derniere)
            {
                document.writeln("<a href='parentPage.html' OnClick='parent.numero++'>");
                document.write("Galerie suivante</a>");
            }
            //sinon affichage de la photo suivante
            else
            {
                document.writeln("<a href='affiche.html' OnClick='parent.numero++'>");
                document.write("Photo Suivante</a>");
            }
        }
        document.write("</div>");
    // cesser de masquer le script -->
    </script>
</body>

</html>

Contact

Des questions, des encouragements ou d'autres techniques à me proposer : écrivez-moi !!

UNE PAGE D'ACCUEIL DYNAMIQUE