UNE GALERIE PHOTO DYNAMIQUE

Montrer des photos c'est bien,
mais si on peut les mettres en ligne facilement, c'est encore mieux!

Une galerie se compose d'une page d'accueil contenant des imagettes qui sont autant de liens vers des photos haute résolution. Mais si les liens pointent directement vers des photos, la visite est pénible car il faut revenir à chaque fois vers la page d'accueil pour poursuivre.

Afin que la visite soit fluide et agréable, il faut accéder directement à la photo suivante sans retourner obligatoirement à l'accueil. Les liens de la page d'accueil ne pointent plus sur des photos mais sur d'autres pages HTML qui contiennent la photo choisie en grand format et proposent des liens vers les photos précédentes et suivantes.

Hélas, cela implique d'avoir une page html pour TOUTES les photos! C'est d'autant plus pénible et rébarbatif à réaliser que la page est toujours la même (la photo, un éventuel commentaire et les liens). Bref tout serait plus simple s'il était possible de créer une page d'affichage générique avec des éléments dynamiques automatiquement mis à jour.

Une page d'affichage générique

Le javascript est du code inséré dans une page html et interprété par le browser web lui-même. Il permet, entre autre, d'écrire directement dans une page html, bref de générer dynamiquement une page html. Par exemple, écrire :

<script>
    document.write("<img src='avion.jpg'>");
</script>
        

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

<img src="avion.jpg">

Dans le cadre d'une galerie de photographies, il s'agit d'afficher tout d'abord la photo avion.jpg puis la photo ruisseau.jpg, c'est à dire de remplacer dans la page d'affichage :

<img src="avion.jpg">

par :

<img src="ruisseau.jpg">

En javascript cela peut s'écrire tout simplement

<script>
    document.write("<img src='" + image + "'>");
</script>
        

où image est une variable qui vaudra successivement avion.jpg et ruisseau.jpg. Pour faciliter le passage d'une photo à l'autre, il est préférable de manipuler le nom de la photo dans un tableau déclaré de la manière suivante :

<script>
    image = new Array();
    image[1] =  "avion.jpg";
    image[2] =  "ruisseau.jpg";
</script>
        

L'affichage de l'image s'écrit alors :

<script>
    document.write("<img src='" + image[numero] + "'>");
</script>
        

En appelant la page contenant ce code javascript plusieurs fois et en donnant successivement à la variable numero la valeur 1, 2... les différentes photo de la galerie peuvent ainsi être présentées. De même, un autre tableau permet d'afficher le commentaire de chaque photographie. Il donc est possible de créer une page d'affichage générique à partir de données préalablement renseignées.

Mais les variables en javascript ne sont valables que dans la page où elles ont été créées. Ici il va falloir transmettre la variable numero dans une page d'affichage avec la valeur 1 (correspondant à l'image avion.jpg) puis dans une nouvelle page mais avec la 2 (correspondant à l'image ruisseau.jpg). Comment passer toutes ces données aux différentes pages?

Plusieurs frames

La solution est d'utiliser des frames. Les frames sont des cadres qui sont déclarés dans une page html principale et dans lesquels on peut afficher d'autres pages. De plus, une variable déclarée dans la page principale sera accessible aux frames. La structure de la galerie photo peut, par exemple, être :



Deux frames ont été déclarées dans la page principale :

• frame 1 dans lequel sera affiché un éventuel sommaire
• frame 2 dans lequel seront affichées les photographies

L'affichage d'une photo

Le tableau image est déclaré sur la page principale. Idem pour les commentaires. Pour qu'un clic sur une imagette de l'accueil permette d'accéder directement à la photo sélectionnée il suffit d'indiquer son numéro à la fenêtre d'affichage générique via la variable numero. Le code html permettant d'accéder à la page générique est le suivant :

<a href="affiche.html"><img src="avion_petit.jpg"></a>

Pour mettre à jour la variable numero il suffit d'ajouter :

<a href="affiche.html" onClick="parent.numero = 1"><img src="avion_petit.jpg"></a>
        

La variable numero est déclarée sur la page principale. parent.numero permet alors d'y accéder depuis n'importe quel frame déclaré dans la page principale. La photo sélectionnée s'affiche alors de la manière suivante :



De la même manière, pour passer d'une photo à l'autre il suffit d'avoir un lien pointant sur la page générique et incrémentant la variable numero. Le code dans la page générique est alors :

<script>
    document.write("<a href='affiche.html' OnClick='parent.numero++'>Suivante</a>");
</script>
        

Voilà les grands principes de la galerie photo dynamique. Il est possible de les appliquer à votre site en adaptant les sources ci-dessous :

Source de la page principale

<html>
<head>
    <title>Galerie de photo</title>

    <script>
    <!--//masquer le script pour les anciens browsers

        var numero = 0; //numéro de la photo
        max = 4; //numéro de la dernière photo
        image = new Array();
        commentaire = new Array();

        image[0] =  "avion.jpg";
        commentaire[0] = "Décollage face à la chaine du Mont Blanc";

        image[1] =  "ruisseau.jpg";
        commentaire[1] = "Au bout du lac d'Annecy, le ruisseau eau morte";

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

<frameset cols="140,*">
    <frame name="sommaire" src="sommaire.html">
    <frame name="affichage" src="galerie.html">
    <noframes>
        <body>
        </body>
    </noframes>
</frameset>

</html>
        

Source de la page d'accueil galerie.html

<html>
<head>
    <title>accueil</title>
</head>

<body>
    <div align="center">
        <!--en cliquant sur la photo, appel de affiche.html et mise à jour du numéro -->
        <a href="affiche.html" OnClick="parent.numero = 0"><img src="avion_petit.jpg"></a>
        <br>
        <a href="affiche.html" OnClick="parent.numero = 1"><img src="ruisseau_petit.jpg"></a>
        <br>
    </div>
</body>


</html>
        

Source de la page d'affichage générique affiche.html

<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] + "'>");
        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 )
            document.write("<a href='affiche.html' OnClick='parent.numero--'>Précédente</a>");
        //lien vers la galerie
        document.write("<a href='galerie.html'>Galerie</a>");
        //lien vers la suivante sauf si dernière photo
        if ( parent.numero < parent.max)
            document.write("<a href='affiche.html' OnClick='parent.numero++'>Suivante</a>");
        document.write("</div>");
    // cesser de masquer le script -->
    </script>
</body>

</html>
        

Pour en savoir plus

Pour plus d'informations, des sites sur l'html et le javascript sont indiqués sur la page des liens.