Galerie Navigation: zwischen Bildern blättern

Sobald eine Galerie mehrere Bilder enthält, brauchen Besucher eine Möglichkeit, zwischen ihnen zu wechseln. Diese Bedienelemente bilden zusammen die Galerie Navigation. Dazu gehören Pfeile zum Blättern, eine Vorschauleiste, ein Zähler und die Steuerung per Tastatur. Im Bildergalerie-Script sind diese Wege bereits eingebaut, sodass sich Besucher ohne Anleitung zurechtfinden. Eine gute Galerie Navigation klärt drei Fragen sofort: Wo bin ich, wie komme ich zum nächsten Bild und wie komme ich wieder heraus.

Wofür die Galerie Navigation da ist

Ein einzelnes großes Bild füllt den Bildschirm, doch die Galerie enthält viele weitere. Die Navigation sorgt dafür, dass der Betrachter vom ersten zum nächsten Foto gelangt, ohne die Seite jedes Mal neu zu laden. Sie hält den Überblick und zeigt, wo im Album man sich gerade befindet. Ohne diese Wegweiser würde man sich in einer großen Sammlung schnell verlieren und manche Bilder gar nicht erst entdecken.

Geöffnet wird ein Bild meist in einer Lightbox, also einer abgedunkelten Überlagerung, die das Foto groß zeigt und den Rest der Seite ausblendet. Genau in dieser Ansicht arbeiten die Bedienelemente. Sie sollen die Aufmerksamkeit auf dem Bild lassen und trotzdem jederzeit erreichbar sein.

Diese Elemente gehören dazu

Mehrere Bauteile arbeiten zusammen, damit das Blättern reibungslos klappt. Die Tabelle zeigt, was jedes davon tut und wie es üblicherweise erreichbar ist.

Bedienung per Maus, Finger und Tastatur

Je nach Gerät steuert der Besucher die Galerie auf unterschiedliche Weise. Das Script unterstützt mehrere Wege gleichzeitig, damit niemand umlernen muss, nur weil er das Gerät wechselt.

• Am Computer klickt man auf die Pfeile oder direkt auf ein Vorschaubild.
• Auf dem Handy wischt man mit dem Finger nach links oder rechts.
• Mit der Tastatur übernehmen die Pfeiltasten das Blättern, weitere Tasten steuern den Rest.

Dass mehrere Bedienarten parallel funktionieren, ist wichtig, weil nicht jeder dieselbe Eingabe nutzt. Eine Galerie, die nur einen Weg kennt, schließt einen Teil der Besucher aus. Mehrere Wege parallel anzubieten kostet Sie nichts, weil das Script sie bereits mitbringt.

Tastatur-Shortcuts im Überblick

Wer am Computer schaut, kommt mit der Tastatur oft schneller voran als mit der Maus. Diese Belegung ist bei Bildergalerien üblich und auch hier vorgesehen.

Die letzten beiden Zeilen betreffen die Barrierefreiheit. Wer eine Maus nicht nutzen kann, springt mit Tab durch die Schaltflächen und löst sie mit Enter aus. Damit das klappt, sollte die Fokus-Reihenfolge sinnvoll sein: vom Vorheriges-Pfeil über das Bild zum Nächstes-Pfeil und schließlich zum Schließen-Symbol. Ein sichtbarer Fokusrahmen zeigt dabei an, welches Element gerade aktiv ist.

Worauf Sie als Betreiber achten

Die Navigation ist sinnvoll voreingestellt, doch ein paar konkrete Punkte halten sie auch bei vielen Bildern und auf kleinen Bildschirmen angenehm.

• Touchziele wie Pfeile und Schließen-Symbol sollten mindestens 44 mal 44 Pixel groß sein, das ist die gängige Mindestgröße für eine sichere Fingerbedienung.
• Die aktuelle Position im Album sollte über den Zähler stets erkennbar bleiben.
• Ein klarer Weg zurück zur Übersicht darf nie fehlen.
• Bei langen Vorschauleisten sollten die Miniaturbilder per Lazy Loading erst dann geladen werden, wenn sie ins Bild rücken.

Der letzte Punkt wird erst bei großen Alben spürbar. Lädt eine Galerie mit 300 Fotos sämtliche Vorschaubilder sofort, ruckelt der Aufbau und verbraucht unnötig Datenvolumen. Werden die Miniaturen dagegen nachgeladen, sobald der Besucher in der Leiste weiterscrollt, bleibt die responsive Galerie auch am Handy flüssig. Eine verständliche Galerie Navigation entscheidet oft darüber, ob jemand das ganze Album anschaut oder schon nach dem zweiten Bild abbricht.

Navigation bei kleinen und großen Galerien

Bei wenigen Bildern reichen die Pfeile völlig aus, weil man schnell durch ist. Sobald ein Album viele Aufnahmen enthält, hilft die Vorschauleiste, weil sie einen direkten Sprung zu einem bestimmten Foto erlaubt, ohne durch alle anderen zu blättern. Der Zähler zeigt dabei jederzeit, wie viel noch kommt, und nimmt dem Besucher das Gefühl, sich zu verlaufen. Wer eine sehr große Sammlung hat, sollte sie in Kategorien aufteilen, damit jede einzelne Galerie überschaubar bleibt. So bleibt die Bedienung auch dann angenehm, wenn insgesamt hunderte Bilder zusammenkommen.

Häufige Fragen

Ob am Desktop, am Handy oder per Tastatur - bei der Bedienung der Galerie tauchen immer wieder dieselben praktischen Fragen auf.

Wie bediene ich die Galerie mit der Tastatur?

Die Pfeiltasten links und rechts blättern zum vorigen oder nächsten Bild, die Escape-Taste schließt die vergrößerte Ansicht und bringt Sie zurück zur Übersicht. So kommen auch Besucher ohne Maus oder Touch schnell durch das Album.

Wie groß sollten die Schaltflächen für die Bedienung am Handy sein?

Touchziele sollten mindestens etwa 44 Pixel groß sein, damit man sie sicher mit dem Daumen trifft, ohne danebenzutippen. Im Bildergalerie-Script sind Pfeile und Schließen-Symbol bereits fingergerecht voreingestellt, achten Sie bei eigenen Designanpassungen aber darauf, diese Größe nicht zu unterschreiten.

Welche Bedienelemente gehören zur Galerie-Navigation?

Pfeile links und rechts zum Blättern, eine Vorschauleiste für den direkten Sprung zu einem bestimmten Bild, ein Zähler im Stil Bild 3 von 20 sowie ein Schließen-Symbol zurück zur Übersicht. Am Handy kommt das Wischen mit dem Finger hinzu, das Script unterstützt alle Wege parallel.

Verwandte Themen

Wie sich einzelne Bedienelemente und Ansichten im Detail verhalten, zeigen diese Beiträge:

• Was ist eine Lightbox in einer Galerie
• Was ist eine Bildvergrößerung beim Klick
• Was ist eine responsive Galerie
• Was ist eine Slideshow auf der Webseite
• Was ist ein Bilder Raster Layout