Bildgalerie Übersicht

FLEX

2.1.8

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

Die Komponente "Bildergalerie Übersicht" zeigt Vorschaubilder (thumbnails) mit der Bildbezeichnung. Die Vorschaubilder sind in 12er-Gruppen zusammengefasst. Überschreitet die Anzahl der Vorschaubilder diese Menge, wird die Bildergalerie mit dem Navigationselement Paging ergänzt.

Beim Klick auf ein Vorschaubild wird eine Detailansicht entweder in einer Bilder-Lightbox oder einer Bilder-Einzelansicht geöffnet.

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>

Bildergalerie Einzelansicht

FLEX

In der Einzelansicht kann man durch den gesamten Inhalt einer Bildergalerie blättern. Unterhalb des Bildes kann ein Text eingebunden werden.

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

Übersetzungen

Eine Lightbox ist ein Overlay, das sich über der Webseite öffnet. Sie wird z.B. nach dem Klick auf ein Vorschaubild in einer Bildergalerie oder beim Klick auf ein Lupe-Icon eines einzelnen Bildes geöffnet.

Wird eine Lightbox geöffnet, wird die Webseite im Hintergrund abgedunkelt. Die Lightbox besteht aus dem Titel, der Grossansicht eines Bildes und einer Legende. Mit Pfeil-Icons in der Lightbox oder mit den Pfeil-Tasten auf der Tastatur kann der Anwender zwischen verschiedenen Bildern blättern. Die Lightbox kann durch einen Klick auf den Hintergrund, dem Schliessen-Link oder mit der ESC-Taste geschlossen werden.

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

Richtlinien für das Webdesign Bund

Richtlinien für das Webdesign Bund

Multimedia

Bildgalerie Übersicht

Title of gallery

Bildergalerie Einzelansicht

Navigation

Suche

Multimedia

Title of gallery