Auf meinem Blog probierte ich in der ersten Zeit mit horizontal scrollenden Bildergalerien herum. Die waren schlicht in die Artikel eingebunden. Die Bilder liefen waagerecht ruhig durch einen Kasten. Man konnte keine Bilder beschriften oder direkt darauf zugreifen. Dafür war die Bedienung idiotensicher. Man konnte klicken wo man wollte, die Webseite veränderte sich nicht.
Seit einigen Jahren verwende ich nun den NIVO Slider. Man klickt sich mit Pfeilen durch die Galerien. Falls es bei jemandem nicht klappt, ist das nicht schlimm, der Artikel ist trotzdem lesbar. Der NIVO Slider ist auf vielen Webseiten immer noch sehr beliebt.
Letztes Jahr nahm ich Galleria dazu. Es gibt kleine Vorschaubilder und einen Vollbild-Modus, der besonders auf Mobilgeräten und bei hochauflösenden Fotos gut funktioniert. Mit dem Support hatte ich so meine Schwierigkeiten. Genau genommen reagieren die nicht auf Bug-Reports und noch nicht mal auf fertige Patches. Galeria sieht trotz seiner Bugs hervorragend aus und kann viel.
Auf Tumblr sah ich kürzlich eine Bildergalerie aus verschieden großen Mosaiksteinen. Es werden immer ein, zwei oder drei Fotos nebeneinander dargestellt. So etwas lässt sich relativ leicht in HTML realisieren.
<div class="photoset"> <a href="/wp-content/uploads/flight-mode-angekommen.jpg" class="photoset-3"> <img src="/wp-content/uploads/flight-mode-angekommen.jpg" /> </a> <a href="/wp-content/uploads/flight-mode-anschnallzeichen.jpg" class="photoset-3"> <img src="/wp-content/uploads/flight-mode-anschnallzeichen.jpg" /> </a> <a href="/wp-content/uploads/flight-mode-gepaeck.jpg" class="photoset-3"> <img src="/wp-content/uploads/flight-mode-gepaeck.jpg" title="Die überfüllten Bänder stehen" /> </a> <a href="/wp-content/uploads/flight-mode-unwetter.jpg" class="photoset-1"> <img src="/wp-content/uploads/flight-mode-unwetter.jpg" title="Flughafen wegen Unwetter geschlossen" /> </a> </div>
Es bekommt einfach jedes Bild eine Klasse photoset-1 für ein großes, photoset-2 für ein mittleres oder photoset-3 für ein kleines Foto. Auch das dazugehörige CSS ist recht übersichtlich:
.photoset a {
display:block;
float:left;
margin:1%;
}
.photoset a:hover {
}
.photoset a.photoset-1 {
width:98%;
}
.photoset a.photoset-2 {
width:48%;
}
.photoset a.photoset-3 {
width:31.33%;
}
.photoset a img {
padding:0;
margin:0;
border-radius:0;
box-shadow:none;
min-heiXght:100%;
min-width:100%;
}
Wenn man auf die Bilder klickt, sollen sie im Vollbild angezeigt werden. Dafür verwende ich PhotoSwipe. Das Design von Galleria gefällt mir eigentlich deutlich besser, aber Photoswipe funktioniert wirklich gut.
