Génération du site web de l'ULB - format xml
sommairesommaireindexindexpage précédentepage précédentepage suivantepage suivanteimprimerimprimerenvoyerenvoyermarquermarquer

Éléments <galerie> de mise en page: affichage de blocs et/ou d'images en galerie

Tout comme une <présentation>, un élément <galerie> permet de présenter un ensemble d'images (<image> ou <images>) et ou de blocs (<bloc>, <toc>, <index>, <nuage>...).

La différence est que ces images ou ces blocs sont affichés les uns à coté des autres (en quantité paramétrable) sur une ou plusieurs lignes (également en quantité paramétrable), comme dans une galerie de photos.

Exemple
<galerie nombre-colonnes="6"  style="cadre1" bords="arrondis">
   <images répertoire="img/galerie"/>
</galerie>

Ce qui donne:

Nombre de colonnes et de lignes dans la galerie

Les attributs nombre-colonnes et nombre-lignes permettent de contrôler le nombre de colonnes et de lignes à afficher dans la galerie.

Dans l'exemple précédent, les images se trouvent toutes dans le répertoire img/galerie lié au projet. Elles seront affichées 6 par 6 sur chaque ligne, grâce à l'attribut nombre-colonnes="6". La galerie utilise autant de lignes que nécessaire pour afficher toutes les images (dans cet exemple, le nombre de lignes n'est pas fixé par un attribut nombre-lignes).


Dans l'exemple ci-dessous, les images sont affichées 6 par 6 sur chaque ligne, grâce à l'attribut nombre-colonnes="6" sur un maximum de 1 ligne, grâce à l'attribut nombre-lignes="2". Comme il y a plus de 6 images à afficher, des onglets vont apparaître automatiquement au dessus de la galerie, afin de permettre l'affichage des autres images sur des "pages" différentes (ici sur 3 "pages").

Exemple
<galerie bords="arrondis" nombre-colonnes="6" nombre-lignes="1" style="class1">
   <images répertoire="img/galerie"/>
</galerie>

Cela donne:


Le même exemple mais avec une délai de transition de 6 secondes et un effet de transition.

Exemple
<galerie bords="arrondis" nombre-colonnes="6" nombre-lignes="1" style="class1" délai-transition="4" effet-transition="fondue1Normale">
   <images répertoire="img/galerie"/>
</galerie>

Cela donne:


Position de la galerie au sein de la page

Par défaut, une galerie va s'afficher de manière centrée, par rapport à la page (ou à la colonne) dans laquelle elle est placée. Vous pouvez changer cela grâce à l'attribut position. cet attribut peut valoir position="gauche", position="droite" ou position="centre" (valeur par défaut).

Exemple
<galerie position="gauche" nombre-colonnes="3" style="cadre-très-léger" bords="arrondis">
   <image file="img/galerie/p1.jpg"/>
   <image file="img/galerie/p2.jpg"/>
   <image file="img/galerie/p3.jpg"/>
</galerie>
Exemple
<galerie position="droite" nombre-colonnes="3" style="cadre-très-léger" bords="arrondis">
   <image file="img/galerie/p1.jpg"/>
   <image file="img/galerie/p2.jpg"/>
   <image file="img/galerie/p3.jpg"/>
</galerie>
Exemple
<galerie position="centre" nombre-colonnes="3" style="voile-cadre" bords="arrondis">
   <image file="img/galerie/p1.jpg"/>
   <image file="img/galerie/p2.jpg"/>
   <image file="img/galerie/p3.jpg"/>
</galerie>

Style d'une galerie

Une galerie est considérée comme un bloc. Tous les attributs (style, bords et ses variantes, ajuster-hauteur...) définis pour les blocs peuvent être utilisés, ainsi que l'élément <titre>.

En voici quelques exemples:
Exemple
<galerie nombre-colonnes="3" style="colorBar6" bords="arrondis">
   <image file="img/galerie/p1.jpg"/>
   <image file="img/galerie/p2.jpg"/>
   <image file="img/galerie/p3.jpg"/>
</galerie>

Exemple
<galerie nombre-colonnes="3" style="class1" bords="arrondis">
   <image file="img/galerie/p1.jpg"/>
   <image file="img/galerie/p2.jpg"/>
   <image file="img/galerie/p3.jpg"/>
</galerie>

Exemple
<galerie nombre-colonnes="3" style="blow1" bords="carrés">
   <image file="img/galerie/p1.jpg"/>
   <image file="img/galerie/p2.jpg"/>
   <image file="img/galerie/p3.jpg"/>
</galerie>

Format des onglets

Comme pour une <présentation>, l'attribut onglets permet de contrôle le format des onglets à afficher.

Exemple
<galerie nombre-lignes="2" nombre-colonnes="4" onglets="détachés" style="class1" bords="arrondis">
   <images répertoire="img/galerie"/>
</galerie>

Cela donne:
sommairesommaireindexindexpage précédentepage précédentepage suivantepage suivante
ULB - entreprise écodynamique