Aperçu de galerie d’images

FLEX

2.1.8

aria-selected="true" et aria-disabled="true" ajoutés pour l’accessibilité

La composante «Aperçu de galerie d’images» présente des images d’aperçu (vignettes) avec la désignation de l’image. Les images d’aperçu sont regroupées par groupes de 12 images. Si le nombre d’images d’aperçu dépasse cette quantité, la galerie d’images sera remplacée par l’élément de navigation «Pagination».

Lorsque vous cliquez sur une image d’aperçu, une vue détaillée est ouverte soit en mode Visionneuse, soit en mode Vue individuelle.

Title of gallery

<h1>Title of gallery</h1>
<br>
<hr>
<nav class="pagination-container clearfix">
	<span class="pull-left">Object - 2 of 3</span>
	<ul class="pull-right pagination">
		<li class="separator disabled">
			<a href="#" title="Step backward" aria-disabled="true">
        <span class="icon icon--step-backward"></span>
        <span class="sr-only">Step backward</span>
      </a>
		</li>
		<li class="separator disabled"><a aria-disabled="true" href="#">Previous</a></li>
		<li class="active"><a href="#">1</a></li>
		<li><a href="#">2</a></li>
		<li>...</li>
		<li><a href="#">17</a></li>
		<li class="separator-left"><a href="#">Next</a></li>
		<li class="separator-left">
			<a href="#" title="Step forward">
        <span class="icon icon--step-forward"></span>
        <span class="sr-only">Step forward</span>
      </a>
		</li>
	</ul>
</nav>
<div class="row">

	<div class="col-sm-3">
		<div class="thumbnail-wrapper">
			<a href="#" class="thumbnail">
				<figure>
					<img src="http://placehold.it/588x367" alt="image description">
					<figcaption>Caption content</figcaption>
				</figure>
			</a>
		</div>
	</div>

	<div class="col-sm-3">
		<div class="thumbnail-wrapper">
			<a href="#" class="thumbnail">
				<figure>
					<img src="http://placehold.it/306x306" alt="image description">
					<figcaption>Caption content</figcaption>
				</figure>
			</a>
		</div>
	</div>

	<div class="col-sm-3">
		<div class="thumbnail-wrapper">
			<a href="#" class="thumbnail">
				<figure>
					<img src="http://placehold.it/306x306" alt="image description">
					<figcaption>Caption content</figcaption>
				</figure>
			</a>
		</div>
	</div>

	<div class="col-sm-3">
		<div class="thumbnail-wrapper">
			<a href="#" class="thumbnail">
				<figure>
					<img src="http://placehold.it/588x367" alt="image description">
					<figcaption>Caption content</figcaption>
				</figure>
			</a>
		</div>
	</div>

	<div class="col-sm-3">
		<div class="thumbnail-wrapper">
			<a href="#" class="thumbnail">
				<figure>
					<img src="http://placehold.it/588x367" alt="image description">
					<figcaption>Caption content</figcaption>
				</figure>
			</a>
		</div>
	</div>

	<div class="col-sm-3">
		<div class="thumbnail-wrapper">
			<a href="#" class="thumbnail">
				<figure>
					<img src="http://placehold.it/588x367" alt="image description">
					<figcaption>Caption content</figcaption>
				</figure>
			</a>
		</div>
	</div>

	<div class="col-sm-3">
		<div class="thumbnail-wrapper">
			<a href="#" class="thumbnail">
				<figure>
					<img src="http://placehold.it/588x367" alt="image description">
					<figcaption>Caption content</figcaption>
				</figure>
			</a>
		</div>
	</div>

	<div class="col-sm-3">
		<div class="thumbnail-wrapper">
			<a href="#" class="thumbnail">
				<figure>
					<img src="http://placehold.it/588x367" alt="image description">
					<figcaption>Caption content</figcaption>
				</figure>
			</a>
		</div>
	</div>

	<div class="col-sm-3">
		<div class="thumbnail-wrapper">
			<a href="#" class="thumbnail">
				<figure>
					<img src="http://placehold.it/588x367" alt="image description">
					<figcaption>Caption content</figcaption>
				</figure>
			</a>
		</div>
	</div>

	<div class="col-sm-3">
		<div class="thumbnail-wrapper">
			<a href="#" class="thumbnail">
				<figure>
					<img src="http://placehold.it/588x367" alt="image description">
					<figcaption>Caption content</figcaption>
				</figure>
			</a>
		</div>
	</div>

	<div class="col-sm-3">
		<div class="thumbnail-wrapper">
			<a href="#" class="thumbnail">
				<figure>
					<img src="http://placehold.it/588x367" alt="image description">
					<figcaption>Caption content</figcaption>
				</figure>
			</a>
		</div>
	</div>

	<div class="col-sm-3">
		<div class="thumbnail-wrapper">
			<a href="#" class="thumbnail">
				<figure>
					<img src="http://placehold.it/588x367" alt="image description">
					<figcaption>Caption content</figcaption>
				</figure>
			</a>
		</div>
	</div>

</div>
<hr>
<nav class="pagination-container clearfix">
	<span class="pull-left">Object - 2 of 3</span>
	<ul class="pull-right pagination">
		<li class="separator disabled">
			<a href="#" title="Step backward" aria-disabled="true">
        <span class="icon icon--step-backward"></span>
        <span class="sr-only">Step backward</span>
      </a>
		</li>
		<li class="separator disabled"><a aria-disabled="true" href="#">Previous</a></li>
		<li class="active"><a href="#">1</a></li>
		<li><a href="#">2</a></li>
		<li>...</li>
		<li><a href="#">17</a></li>
		<li class="separator-left"><a href="#">Next</a></li>
		<li class="separator-left">
			<a href="#" title="Step forward">
        <span class="icon icon--step-forward"></span>
        <span class="sr-only">Step forward</span>
      </a>
		</li>
	</ul>
</nav>

Galerie d’images – vue individuelle

FLEX

La vue individuelle permet de feuilleter l’ensemble du contenu d’une galerie d’images. Un texte peut être ajouté en bas de l’image.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Primum quid tu dicis breve? Neminem videbis ita laudatum, ut artifex callidus comparandarum voluptatum diceretur. Nihil enim iam habes, quod ad corpus referas; Duo Reges: constructio interrete. At hoc in eo M. Id mihi magnum videtur.

Image title JPG, 1024 x 768 Pixel, 1.1 MB
Image title JPG, 5000 x 3000 Pixel, 8.3 MB

<div class="row">
	<div class="col-sm-12">
		<hr>
		<a href="#" class="icon icon--before icon--less hidden-print">Back to Overview</a>
		<nav class="pull-right">
			<ul>
				<li><a href="#">Previous</a></li>
				<li> | </li>
				<li><a href="#">Next</a></li>
			</ul>
		</nav>
		<hr>
	</div>
</div>
<div class="row">
	<div class="col-sm-12">
		<br>
		<img src="http://placehold.it/1000x768" alt="image description">
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Primum quid tu dicis breve? Neminem videbis ita laudatum, ut artifex callidus comparandarum voluptatum diceretur. Nihil enim iam habes, quod ad corpus referas; Duo Reges: constructio interrete.
			At hoc in eo M. Id mihi magnum videtur.
		</p>
		<small>Bildnachweis / Copyright: Fotograf Hans Mustermann, Bern, 2009</small>
		<br><br>
		<a data-toggle="collapse" class="collapsed" href="#collapseImg">Images format</a>
		<div id="collapseImg" class="collapse">
			<ul class="list-unstyled">
				<li><a href="#" class="icon icon--before icon--doc">Image title</a> JPG, 1024 x 768 Pixel, 1.1 MB</li>
				<li><a href="#" class="icon icon--before icon--doc">Image title</a> JPG, 5000 x 3000 Pixel, 8.3 MB</li>
			</ul>
		</div>
		<br>
	</div>
</div>
<div class="row">
	<div class="col-sm-12">
		<hr>
		<a href="#" class="icon icon--before icon--less hidden-print">Back to Overview</a>
		<nav class="pull-right">
			<ul>
				<li><a href="#">Previous</a></li>
				<li> | </li>
				<li><a href="#">Next</a></li>
			</ul>
		</nav>
		<hr>
	</div>
</div>

Visionneuse

FLEX

Traductions

Une Visionneuse est un élément qui s’ouvre en superposition du site Internet. Elle s’ouvre p. ex. lorsque l’on clique sur une image d’aperçu d’une galerie d’images ou sur l’icône «loupe» d’une image particulière.

Quand on ouvre une visionneuse, le site Internet en arrière-plan est obscurci. La visionneuse est constituée du titre, de la vue d’image en grand format et d’une légende. A l’aide des icônes de flèches dans la visionneuse ou des touches de flèches du clavier, l’utilisateur peut faire défiler les différentes images. La visionneuse peut être fermée en cliquant sur l’arrière-plan, sur le lien de fermeture ou encore avec la touche ECHAP.

<div class="row">
	<div class="col-sm-3 col-sm-offset-3">
		<div class="thumbnail-wrapper">
			<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox-example">
				<figure>
					<img src="http://placehold.it/588x367" alt="image description">
					<figcaption>Caption content</figcaption>
				</figure>
			</a>
		</div>
	</div>
</div>

<div class="modal fade" id="lightbox-example" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close icon icon--before icon--close" data-dismiss="modal" aria-hidden="true">Close</button>
				<h3 class="modal-title" id="myModalLabel">Image title</h3>
			</div>
			<div class="modal-body">
				<img src="http://placehold.it/588x368" alt="image description">
				<p>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Esse enim quam vellet iniquus iustus poterat inpune. Itaque primos congressus.
				</p>
			</div>
		</div>
	</div>
</div>

Lignes directrices pour le design web de la Confédération

Lignes directrices pour le design web de la Confédération

Multimédia

Aperçu de galerie d’images

Title of gallery

Galerie d’images – vue individuelle

Navigation

Chercher

Multimédia

Title of gallery