Photo Gallery Overview

FLEX

2.1.8

added aria-selected="true" and aria-disabled="true" for accessibility

The photo gallery shows scaled-down preview images (thumbnails) together with their names. These preview images are arranged in groups of 12. If the number of preview images exceeds this quantity, the “paging” navigation element is added to the photo gallery.

When the user clicks on an image, a detailed view is opened either in a lightbox or in single view mode for the images.

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>

Photo Gallery Single View Mode

FLEX

The single view mode allows the user to browse through the complete contents of a photo gallery. A caption can be added below the 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>

Lightbox

FLEX

Translations

A "lightbox" is an overlay that opens on top of the website. For instance, it is opened when a preview image in a photo gallery is clicked on, or when the zoom icon of an individual image is activated.

When a "lightbox" is opened, the website in the background is darkened. The "lightbox" comprises the title, the full view of the image, and its caption. The "lightbox" can be closed by clicking on the background, and by using the close command or the Esc key.

<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>

Swiss Confederation Web Guidelines

Swiss Confederation Web Guidelines

Multimedia

Photo Gallery Overview

Title of gallery

Photo Gallery Single View Mode

Navigation

Search

Multimedia

Title of gallery