Vor einiger Zeit habe ich in in diesem Artikel eine Bildergalerie vorgestellt, die Bilder bei Mouseover vergrößert. Was mit Desktopbrowsern prima funktioniert, ist auf mobilen Browsern eher suboptimal und verlangt nach einer besseren Lösung.

Da könnte ich folgendes anbieten: mittels des Checkbox-Hacks werden Bilder per Mauskilck vergrößert und bei erneutem Mausklick wieder verkleinert. Perfekt zum „touchen“ aber auch für Desktop-Browser eine tolle Sache. Und das alles per minimalistischem CSS-Code.

Und neugierig geworden? So wird unsere fertige Galerie später aussehen:

Die fertige Bildergalerie

Um auch optisch zu überzeugen, garnieren wir das Ganze noch mit einigen CSS3-Spielereien. Ihr wisst ja, dafür bin ich immer zu haben.

Dann legen wir mal los.

Beginnen wir mit der HTML-Struktur der Galerie

<div id="gallery">

	<h1>Eine Lightbox-Bildergalerie mittels Checkbox Hack</h1>

	<ul>

		<li>
			<input type="checkbox" id="img-1">
			<label for="img-1"><img id="img1" src="../images/galerie/bild1.jpg"></label>
			<div class="overlay"></div>
		</li>

		<li>
			<input type="checkbox" id="img-2">
			<label for="img-2"><img id="img2" src="../images/galerie/bild2.jpg"></label>
			<div class="overlay"></div>
		</li>

		<li>
			<input type="checkbox" id="img-3">
			<label for="img-3"><img id="img3" src="../images/galerie/bild3.jpg"></label>
			<div class="overlay"></div>
		</li>

		<li>
			<input type="checkbox" id="img-4">
			<label for="img-4"><img id="img4" src="../images/galerie/bild4.jpg"></label>
			<div class="overlay"></div>
		</li>

		<li>
			<input type="checkbox" id="img-5">
			<label for="img-5"><img id="img5" src="../images/galerie/bild5.jpg"></label>
			<div class="overlay"></div>
		</li>

		<li>
			<input type="checkbox" id="img-6">
			<label for="img-6"><img id="img6" src="../images/galerie/bild6.jpg"></label>
			<div class="overlay"></div>
		</li>

		<li>
			<input type="checkbox" id="img-7">
			<label for="img-7"><img id="img7" src="../images/galerie/bild7.jpg"></label>
			<div class="overlay"></div>
		</li>

		<li>
			<input type="checkbox" id="img-8">
			<label for="img-8"><img id="img8" src="../images/galerie/bild8.jpg"></label>
			<div class="overlay"></div>
		</li>

		<li>
			<input type="checkbox" id="img-9">
			<label for="img-9"><img id="img9" src="../images/galerie/bild9.jpg"></label>
			<div class="overlay"></div>
			</li>

	<ul>

</div>

Wie ihr seht definieren wir die Galerie-Bilder als Listenelemente. Im Listenelement ist eine Checkbox mitsamt Label eingefügt, das Galerie-Bild wiederum ist Inhalt des Labels der Checkbox. Dazu kommt noch ein Div-Container mit der Klasse overlay. Wofür erkläre ich später.

Ein Wort noch zu den Bildern. Wir benötigen nur eine Auflösung. Für die kleinen Galerie-Thumbs werden wir das originale Bild einfach verkleinert darstellen.

Deklarieren wir zunächst die Grundstruktur der Galerie

#gallery {
	width: 903px;
	margin: 50px auto;
}

ul {
	margin: 0;
}

li {
	position: relative;
	float: left;
	list-style: none;
	line-height: 0;
	padding-right: 1px;
	padding-bottom: 1px;
}

img {
	width: 300px;
	height: auto;
	cursor: pointer;
}

Die Breite der Galerie ergibt sich aus der Breite der 3 nebeneinander platzierten Listenelementen mit jeweils 300 Pixeln sowie einem Innenabstand (padding) von einem Pixel nach rechts. Wir vergeben eine feste Breite, damit wir die Galerie über den Außenabstand (margin) horizontal zentrieren können.

Die Zeilenhöhe (line-height) der Listenelemente setzen wir auf null, da ansonsten das Listenelement länger wäre als das Bild. Das würde dazu führen, dass der Abstand nach unten zwischen den Bildern größer wäre, als wir es wollen.

Weiter geht’s mit den Galerie-Bildern:

img {
	width: 300px;
	height: auto;
	cursor: pointer;
}

Diesen geben wir eine feste Breite und setzen die Höhe auf auto. Sollten wir Bilder mit unterschiedlichen Seitenverhältnissen haben, wird durch die automatische Höhe nichts verzerrt.

Mit der Definition von cursor steuern wir den Mauszeiger, der sich beim Bewegen über das Bild zum „Zeiger“ verändern soll. Damit signalisieren wir dem Besucher, dass bei einem Mausklick auf dem Bild etwas passiert.

Als nächstes kümmern wir uns um die Checkbox. Die Funktion des Checkbox-Hacks habe ich in diesem Artikel schon einmal erklärt.

Um es kurz zu machen: ist die Checkbox (zu deutsch Kontrollkästchen) deaktiviert (Standard), werden die Bilder als Thumbs angezeigt. Wird die Checkbox durch das Anklicken eines Bildes aktiv (:checked), wird das Bild in voller Größe dargestellt.

input[type=checkbox] {
	display: none;
}

input[type=checkbox]:checked ~ label img {
	position: fixed;
	width: 900px;
	height: 600px;
	top: 50%;
	left: 50%;
	margin-top: -300px;
	margin-left: -450px;
	box-shadow: 0 0 20px #888;
	z-index: 2;
}

Mittels der ersten Deklaration verstecken wir das eigentliche Kontrollkästchen, da wir es nicht brauchen. Mit der zweiten Anweisung definieren wir die vergrößerten Bilder, wenn die Checkbox aktiv ist. Wir positionieren die Bilder fixiert mit statischer Höhe und Breite, so dass wir das vergrößerte Bild horizontal und vertikal zentrieren können. Zur Abrundung erhält das vergrößerte Bild noch einen Schlagschatten (box-shadow).

Was soll der z-index da? Erinnert ihr auch noch an den Div-Container overlay? Damit fügen wir einen weißen transparenten „Schleier“ als Hintergrund zwischen Galerie und dem vergrößertem Bild ein. Das gibt einen netten Effekt:

Bildergarlerie mit vergrößertem Bild

Um die Schichten in die richtige Reihenfolge zu bringen, benötigen wir einen z-index für die vergrößerten Bilder und den Schleier. Unterste Schicht ist die Galerie (#gallery), darüber der transparente Schleier (.overlay) und als oberste Schicht das vergrößerte Bild (input[type=checkbox]:checked ~ label img). Setzen wir keinen z-index, wäre der Schleier oben und würde das Bild verdecken.

Den Schleier deklarieren wir wie folgt:

.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	background: rgba(255,255,255,.8);
	z-index: 1;
}

Dieser wird fixiert oben links angeordnet und hat eine Höhe und Breite von jeweils 100% und erhält einen geringeren z-index als das vergrößerte Bild.

Damit ist die Galerie fertig und einsatzbereit.

Eins wollen wir der Optik zuliebe aber noch einbauen: beim hovern eines Bildes sollen die anderen Bilder abgeschwächt dargestellt und das ausgewählte Bild damit hervorgehoben werden.

Das erreichen wir, indem wir folgendes hinzufügen:

ul:hover li {
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	opacity: .5;
}

ul:hover li:hover {
	opacity: 1;
}

Kurz erklärt: wenn die Aufzählungsliste gehovert wird, werden alle Listenelemente auf 50% Sichtbarkeit (opacity) herabgesetzt. Wird nun ein Listenelement gehovert, erhält es die volle Sichtbarkeit, während die anderen weiter bei 50% Sichtbarkeit verbleiben. Letztendlich fügen wird durch transition noch einen netten Übergangs-/Animationseffekt hinzu. Diesen Trick habe ich in diesem Artikel bereits vorgestellt.

Fertig.

Hier findest du eine Live-Demo der Bildergalerie:

und hier die Galerie als Download zu deiner freien Verfügung:

Viel Spass damit.

Ich habe noch die ein oder andere Idee, wie man die Galerie optisch noch weiter aufwerten kann. Seid gespannt.