HTML/Tutorials/Bilder im Internet/Bilder präsentieren
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.
Inhaltsverzeichnis
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.
Damit die hier vorgestellten Bildergalerien sollen diese Anforderungen erfüllen:
<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 Auswahl der einzelnen Bilder wird durch CSS angezeigt.
/* 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;
}
}
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.
@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;
}
}
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.
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]
<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>
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]
@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;
}
}
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.
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.
#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]
- nikesh.me: image hover effects
- htmlgoodies: How To Create an Image Gallery Using CSS3
- script-tutorials: How to Create a Pure CSS3 Animated Photo Gallery
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.