CSS/Tutorials/Bildergalerie

Aus SELFHTML-Wiki
< CSS‎ | Tutorials
Wechseln zu: Navigation, Suche

In diesem Tutorial lernen Sie, wie Sie eine Bildergalerie mit CSS gestalten können.

Dabei sollen Bilder in einer Vorschauansicht (engl. thumbnail für daumennagelgroße Ansicht) präsentiert und auf Wunsch auch in einer Großansicht angezeigt werden können. Im Netz finden sich häufig mit JavaScript oder jQuery verwirklichte Versionen. Diese Beispiele wurden jedoch nur mit CSS3 realisiert.

Anwendungsbeispiel[Bearbeiten]

Ich möchte gerne, dass Bilder durch Überfahren der Maus in Großdarstellung angezeigt werden.

Diese Aufgabenstellung vernachlässigt zwei Aspekte bei Bildergalerien:

  • Auf mobilen Geräten ist der Viewport so klein, dass auf eine Vorschauansicht verzichtet werden kann.
  • Ein Bild sollte sowohl auf mobilen Touchgeräten ohne Tastatur als auch mit der Tastatur, z.B mit der Tab-Taste ( ), ausgewählt werden können.

Grundfunktionalität[Bearbeiten]

Die HTML-Struktur unserer Galerie ist übersichtlich:

Beispiel ansehen …
<ul id="galerie">
	<li><button tabindex="1"><img src="dummy-1.jpg" alt="Spaß in der Sonne"></button></li>
	<li><button tabindex="1"><img src="dummy-2.jpg" alt="Berg im Morgennebel"></button></li>
	<li><button tabindex="1"><img src="dummy-3.jpg" alt="Spaß in der Sonne"></button></li>
	<li><button tabindex="1"><img src="dummy-4.jpg" alt="Korallenriff"></button></li>
	<li><button tabindex="1"><img src="dummy-5.jpg" alt="Morgensonne am Gardasee"></button></li>
	<li><button tabindex="1"><img src="dummy-6.jpg" alt="Via Appia, Rom"></button></li>    
</ul>
Die Galerie besteht aus einer unsortierten Liste. So sind die Bilder als zusammengehörende Teilelemente erkennbar. Die Bilder sind in einzelnen Buttons integriert. Dies hat den Vorteil, dass sie mit der Tab-Taste „durchgetabbt“ werden können. Damit sie gleich vom ersten Tab erfasst werden, erhalten sie ein tabindex-Attribut mit dem Wert 1. Die browsereigene Darstellung der Buttons ähnelt des Rahmens eines Dias, so dass der Effekt einer Bildergalerie passend dargestellt wird.

Die Auswahl der einzelnen Bilder wird durch CSS angezeigt.

Beispiel ansehen …
/* Mobile first - für schmale Viewports */

li {
	display: inline-block;	
	list-style-type: none;
	width: 45%;
}

img {
	padding: 0;
	margin: 0;	
	width: 100%;  /* Bild passt sich an verfügbaren Raum im li an */
}

button {
  padding: 0.1em;
}

     /* Large screens */
@media all and (min-width: 35em) {
	li {
		width: 10em;
	}

	img {
		padding: 0;
		margin: 0;	
		width: 100%;  /* Bild passt sich an verfügbaren Raum im li an */
	}

	button {
		padding: 0.1em;
	}

	button:focus, 
	button:hover {
		background: #09c;
	}
}
Das Grundlayout besteht aus zwei Blöcken.

In einer ersten Stufe wird die Liste so formatiert, dass immer zwei Bilder nebeneinander so groß wie möglich dargestellt werden.

Erst ab einer Viewport-Breite von mehr als 35em wird mittels media queries die kleinere Vorschauansicht mit 10em Breite aktiviert.

Beim Überfahren eines Bildes mit der Maus wird der :hover-Zustand, durch ein Tappen auf einem Touchbildschirm oder eine Tab-Auswahl :focus ausgelöst. Über Pseudoklassen können die Buttons nun mit CSS formatiert werden und erhalten eine blaue Hintergrundfarbe.

Großansicht[Bearbeiten]

Das obige Beispiel kann nun so erweitert werden, dass die Pseudoklassen :hover und :focus eine Großansicht anzeigen.

Beispiel ansehen …
@media all and (min-width: 35em) {
	button {
		padding: 0.1em;
		width: 10em;
		height: 7.5em;
		position: relative;	
	}

	button img {
		border: 0;
		position: absolute;
		left: 0%;
		top: 0%;
		z-index: 1;
		box-shadow: 0;
		width: 10em;		
		transition: all 1s;			
	}

	button:focus img, 
	button:hover img {
		border: 2em solid #eee;
		border-radius: 1em;
		box-shadow: 1px 1px 5px #333;
		width: 300%;
		position: absolute;
		left: -4%;
		top: -4%;
		z-index: 5;

		transition: all 1s;		
	}	
}
Die Buttons erhalten eine Angabe position: relative, damit sie den Bezugspunkt für die absolute Positionierung der Bilder darstellen.

Die feste Breite von 10em wird durch das Auslösen der Pseudoklassen vergrößert. Zusätzlich wird mit border: 2em solid #eee; und box-shadow: 1px 1px 5px #333; ein Rand und ein Schatten eingeblendet.

Um das Bild immer im Vordergrund zu halten, wird z-index: 5 festgelegt. Damit die Änderung der Anzeige nicht zu abrupt stattfindet, wird mit transition: all 1s; ein weicher Übergang festgelegt.

Fazit[Bearbeiten]

Mit dieser Technik können Sie ein Bild auswählen und in einer Großansicht anzeigen. Allerdings hinterlässt die Großansicht eine Lücke am Platz der thumbnail-Vorschau, die hier völlig überdeckt wird. Rechts positionierte Bilder ragen evtl. über den Bildrand. Dies könnte durch eine andere Positionierung verhindert werden, die alle rechten Listenelemente selektiert. Dies wäre aber nur möglich, wenn die Galerie eine feste Anzahl von Listenelementen hätte und deshalb keine flexible Breite haben dürfte.

Galerie mit Popupboxen[Bearbeiten]

Eine Alternative wäre der Einsatz der Pseudoklasse target, mit der Sie Elemente selektieren, die Ziel eines Verweises sind.

Grundfunktionalität[Bearbeiten]

Beispiel ansehen …
<ul id="galerie">
	<li><a tabindex="1" href="#bild1"><img src="dummy-1.jpg" alt="Spaß in der Sonne"></a></li>
	...   
</ul>  

<figure id="bild1" class="details">
	<img src="dummy-1.jpg" alt="Spaß in der Sonne">
	<a class="close" id="c1" href="#c1" title="schließen">schließen</a>
	<figcaption>Spaß in der Morgensonne</figcaption>
</figure>
Die Listenelemente enthalten einen internen Seitenanker auf ein figure-Element. Wenn der Link ausgewählt wird, kann das angesprochene figure-Element mit der Pseudoklasse target selektiert und formatiert werden. Beim Anklicken des Schließen-Links wird ein anderes Element ausgewählt und das figure verliert sein „target“.

CSS[Bearbeiten]

Beispiel ansehen …
@media all and (min-width: 35em) {
	li {
		width: 10em;
	}

.details {
	position: absolute;
	right: 10%;
	top: 10%;
	background-color: #F1F3F4;
	border: 0.1em solid #3983ab;
	border-radius: 0 8px 8px;
	padding: 1em 1em .2em;
	width: 25em;
	max-height: 20em;
	overflow: auto;
	display: none;
}

.details img {
	width: 90%;
}

.details:target {
	display: block;
}

.close {
	width:0;
	heigh:0;
	border: 0; 
	text-shadow: none; 
	color: transparent;
}
.close:after {
   position: absolute;
   top: 1em;
   right: 1em;
   content:"X";
   color: white;
   background: #c32e04;
   font: font: bold 1em/150% Georgia, Times, serif;
   border: 0.1em solid #3983ab;
   border-radius: 0 8px 8px;
   display: block;
   text-align:center;
   width: 1.5em;
   height:1.5em; padding:0.2em 0 0 0em;
  }
}
Das figure-Element mit der class="details" wird im Ausgangszustand nicht angezeigt. Wenn der Link ausgewählt wird, kann das angesprochene fiugre mit der Pseudoklasse target selektiert und formatiert werden.

display: block; sorgt dafür, dass es jetzt sichtbar wird.

Beim Anklicken des Schließen-Links wird ein anderes Element ausgewählt und das figure verliert sein „target“.

Weblinks[Bearbeiten]

Siehe auch[Bearbeiten]