Cette page est un gabarit de galeries d'images
sur lesquelles peut pointer le lien “Lire +” d'une carte
Le comportement du bouton “Voir +” est différent suivant les colonnes de la galerie d'images.
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.
En cliquant sur l'image, celle-ci s'ouvre dans une fenêtre modale. Le texte alternatif de l'image s'affiche en légende. La fenêtre modale se ferme en cliquant n'importe où dans la fenêtre.
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
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.
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
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
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
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
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
Texte d'accompagnement de l'image 01
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.
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.
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.