HTML/Tutorials/Bilder im Internet/Bilder präsentieren

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Informationen zu diesem Text

Lesedauer
30min
Schwierigkeitsgrad
einfach
Vorausgesetztes Wissen
Kenntnisse in
● HTML
● CSS

Meist werden Bilder nicht nur einzeln, sondern zusammen mit anderen Fotos in einer Bildergalerie präsentiert. In diesem Kapitel lernen Sie, wie Sie Bildergalerien mit CSS gestalten können.

Bildergalerien sind immer ein Kompromiss zwischen den Wünschen möglichst viele Bilder auf einmal und in einem bestimmten Bild viele Details anzuzeigen. Deshalb gibt es oft einen Auswahlmechanismus, dass 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.

Zugängliche Bildergalerie[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.

Die hier vorgestellten Bildergalerien sollen diese Anforderungen erfüllen:

HTML - Liste mit button- und img-Elementen 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 dem Rahmen 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;
	}

	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. Eine Selektierung aller rechten Listenelemente, die dann nach links vergrößert würden, 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 figure 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“.

Fazit:

Diese Bildergalerie hat mehrere Nachteile:

  • Das Öffnen mit einem Klick oder der Entertaste erscheint wenig intuitiv.
  • Durch den internen Link auf die id des figure-Elements ändert sich die URL der aufgerufenen Seite - ein einfacher Zurück mit dem ←-Pfeil des Browsers ist nicht möglich.

Eine Polaroid-Bildergalerie[Bearbeiten]

In dieser Bildergalerie werden Bilder als kleinere Vorschauansichten angezeigt. Ein Berühren mit der Maus skaliert sie auf die Originalgröße. Zusätzlich erscheint die bisher durch overflow:hidden verborgene figcaption als Bildunterschrift.

Beispiel ansehen …
#galerie figure {
	background: #FFF;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
	display: inline-block;
	height: 15em;
	margin: 0 0 1em 2em;
	overflow: hidden;
	padding: 0;
	width: 15em;
	transition: all 0.25s ease-in;
}

#galerie figure img {
	width: 15em;
	height: 15em;
}

#galerie figure:hover,
#galerie figure:focus {
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8);
	margin: -1em 0px 0 20px;
	padding: 5px 5px 30px 5px;
	width: 15em;
	z-index: 2;
	transform: scale(2);
}

#galerie figcaption {
	color: #333;
	font: cursive 10px/150%;
	font-family: "Reenie Beanie", cursive;
	position:relative;
	text-align: center;
	width: 15em;
}

Ein Schatten sorgt für einen räumlichen Effekt, der durch ein leichtes Kippen bei jedem 3. Bild nach links und jedem 5. Bild nach rechts verstärkt wird. Der Hintergrund besteht nicht aus einer Grafik, sondern einem Verlaufsmuster.


Weblinks[Bearbeiten]