Galerie

Cette page est un gabarit de galeries d'images
sur lesquelles peut pointer le lien “Lire +” d'une carte

Galerie d'images sur cartes, en colonnes

Le comportement du bouton “Voir +” est différent suivant les colonnes de la galerie d'images.

Voir 

En cliquant sur le bouton, l'image s'ouvre dans un nouvel onglet. Elle s'affiche à sa taille réelle si la fenêtre de navigation le permet.

Voir 

Texte alternatif affiché en légende
Texte alternatif affiché en légende

Voir 

En cliquant sur le bouton, l'image s'ouvre dans une nouvelle page du même type qu'une page d'article. Cette page conduit vers d'autres images.

Voir 

Galerie d'images en cellules

Les images de la première rangée s'ouvrent dans un nouvel onglet quand on clique dessus. Celles de la seconde rangée ouvre une page de présentation de l'image. Elles ont toutes la même hauteur mais des largeurs différentes. Sur petit écran, les images se positionnent les unes sous les autres.

Cette page montre d'autres moyens de présenter plusieurs images

Ci-dessous sont présentées des images affichées via des onglet puis, plus bas, un diaporama à défilement manuel

Galerie d'images en colonnes
avec texte affiché au survol

En utilisant la feuille de style imghvr.css, il est possible de générer des effets d'affichage de textes avec diverses transitions déclenchées par le survol des images présentées. Les couleurs de la zone de texte affichée au survol et les couleurs intermédiaires de certaines transitions doivent être paramétrées directement dans la feuille de style imghvr.css.

Effet “fade-in”

Ce texte est codé en tant que légende (figcaption) de l'image survolée. Les classes de la feuille de style “imagehover.css” sont utilisées pour produire l'effet de transition au survol

Effet “hinge”

Ce texte est codé en tant que légende (figcaption) de l'image survolée. Les classes de la feuille de style “imagehover.css” sont utilisées pour produire l'effet de transition au survol

Effet “zoom”

Ce texte est codé en tant que légende (figcaption) de l'image survolée. Les classes de la feuille de style “imagehover.css” sont utilisées pour produire l'effet de transition au survol

Nom de l'image

Effet “push”

Ce texte est codé en tant que légende (figcaption) de l'image survolée. Les classes de la feuille de style “imagehover.css” sont utilisées pour produire l'effet de transition au survol

Nom de l'image

Effet “shut out”

Ce texte est codé en tant que légende (figcaption) de l'image survolée. Les classes de la feuille de style “imagehover.css” sont utilisées pour produire l'effet de transition au survol

 

Effet “reveal”

Ce texte est codé en tant que légende (figcaption) de l'image survolée. Les classes de la feuille de style “imagehover.css” sont utilisées pour produire l'effet de transition au survol

 

Image 01

Texte d'accompagnement de l'image 01

Images affichées via des onglets

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Diaporama à défilement manuel

Texte de commentaire du diaporama à défilement manuel avec images de même taille.
Ce type de diaporama s'adapte à la largeur de la fenêtre de navigation.

Articles connexes

Sous-titre h3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Consequensat pedibio altimus et caius perenit aliquent mematium quid gaistum.

Lire 

Sous-titre h3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lire 

Sous-titre h3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lire