Slideshow auf der Webseite einfach erklärt

Auf der Startseite eines Gasthofs wechselt oben ein breites Bild alle paar Sekunden: erst die Terrasse, dann der Gastraum, dann ein Teller mit Forelle. Niemand hat geklickt, die Bilder laufen von selbst durch. Eine solche Slideshow auf der Webseite zeigt viele Fotos auf der Fläche von einem, aber immer nur eines zur selben Zeit, und sie entscheidet selbst, wann das nächste kommt. Für Betreiber einer Bildergalerie ist deshalb weniger die Technik interessant als die Frage, ob ihre Fotos davon profitieren oder ob Besucher lieber selbst blättern.

Was eine Slideshow auf der Webseite im Hintergrund tut

Technisch besteht eine Slideshow aus einem festen Rahmen, einem Stapel von Bildern und einem Taktgeber. Der Taktgeber zählt die Sekunden und blendet nach Ablauf das nächste Bild ein. Damit dieser Wechsel nicht ruckelt, muss das kommende Bild schon geladen sein, bevor es gebraucht wird. Die meisten Slideshows holen deshalb mindestens das nächste, oft gleich alle Bilder im Voraus. Das hat eine Folge, die man leicht übersieht: Zehn Bilder mit je 250 KB bedeuten 2,5 MB, die auch dann übertragen werden, wenn der Besucher nach dem ersten Bild weiterscrollt.

Rechnen Sie außerdem nach, wie viele Bilder einer Reihe überhaupt jemand sieht. Bei 24 Fotos und 4 Sekunden je Bild dauert ein Durchlauf 96 Sekunden. Wer 20 Sekunden auf der Seite bleibt, sieht fünf davon. Die ersten Bilder einer Slideshow werden also oft betrachtet, die letzten fast nie. Das spricht dafür, das stärkste Motiv an den Anfang zu setzen und die Reihe kurz zu halten, eher sechs als vierundzwanzig Bilder.

Fünf Stellschrauben und wann welche Einstellung passt

Fast jedes Slideshow-Werkzeug bietet dieselben Regler. Statt einer Empfehlung für alle Fälle hilft eine Faustregel je Situation.

• Standzeit: Reine Stimmungsbilder ohne Text vertragen 4 Sekunden. Steht Schrift im Bild oder darunter, brauchen Leser 6 bis 8 Sekunden, sonst ist das Bild weg, bevor der Satz zu Ende gelesen ist.
• Übergang: Weiches Überblenden wirkt ruhig, ein Schieben von rechts nach links betont die Reihenfolge, etwa bei den Stationen einer Wanderung. Unterschiedliche Bildformate löst keiner der beiden Übergänge, dafür braucht es einen festen Rahmen (siehe typische Fehler).
• Start: Wo die Slideshow steht, entscheidet über den Start. Auf einer Startseite als Blickfang darf sie von selbst laufen. Innerhalb einer Galerie, in der jemand gezielt Fotos sucht, sollte sie erst auf Wunsch beginnen.
• Schleife: Ein Blickfang darf endlos kreisen. Eine Bildergeschichte mit Anfang und Ende sollte am letzten Bild anhalten.
• Anhalten und Barrierefreiheit: Wer den Mauszeiger auf das Bild legt oder es antippt, will es länger ansehen. Eine Slideshow, die dann trotzdem weiterspringt, ärgert. Läuft eine Bewegung von selbst länger als fünf Sekunden, verlangen die Regeln für barrierefreie Webseiten (WCAG) ohnehin eine Möglichkeit zum Anhalten.

Ob die Standzeit reicht, prüfen Sie mit einem einfachen Test: Lesen Sie die Bildunterschrift eines Bildes in normalem Tempo laut vor. Ist das nächste Bild schon da, bevor Sie fertig sind, verlängern Sie die Standzeit.

Slideshow, Raster oder Blättern von Hand?

Für eine eigene Fotogalerie gibt es drei Grundformen der Darstellung. Sie schließen sich nicht aus, haben aber jeweils eine Aufgabe, für die sie besonders gut taugen.

Daraus ergibt sich eine einfache Arbeitsteilung: Die Slideshow ist das Schaufenster mit wenigen ausgesuchten Motiven, das Raster das Inhaltsverzeichnis der ganzen Sammlung, und das Blättern von Hand dient dem Besucher, der eine Serie wirklich ansehen will. Das Diagramm stellt die beiden Wege durch eine Serie nebeneinander: wer den Takt vorgibt und wie viel dafür geladen wird.

Typische Fehler und woran Sie sie erkennen

Die meisten Probleme einer Slideshow auf der Webseite sieht man erst, wenn man die eigene Seite mit fremden Augen betrachtet, am besten auf dem Handy und mit langsamer Verbindung. Drei Befunde kommen besonders häufig vor:

• Springender Inhalt: Rutscht der Text unter der Slideshow bei jedem Wechsel nach oben oder unten, haben die Bilder verschiedene Seitenverhältnisse. Ein Hochformat zwischen lauter Querformaten macht den Rahmen plötzlich doppelt so hoch, beim Überblenden genauso wie beim Schieben. Abhilfe schafft ein fester Rahmen mit einheitlichem Format, in den alle Bilder vorher passend zugeschnitten werden.
• Weiße Pause: Erscheint das nächste Bild erst nach einer Lücke, ist es zu groß oder wurde nicht vorgeladen. Ein Foto mit 3 MB braucht im Mobilfunknetz leicht mehrere Sekunden.
• Wichtiges auf Bild vier: Stehen Öffnungszeiten oder ein Termin nur auf dem dritten oder vierten Bild, sehen viele Besucher sie nie. Was jeder lesen soll, gehört in den Text der Seite.

Was das Bildergalerie-Script bietet: Blättern statt Automatik

Das Bildergalerie-Script hat keine Slideshow mit automatischem Bildwechsel. Die Dokumentation nennt Diashow, Wischgesten und Vollbild ausdrücklich unter den Dingen, die die Lightbox nicht kann. Was es gibt, ist das Durchblättern von Hand: Ein Klick auf ein Vorschaubild öffnet die Lightbox, und alle Bilder der Kategorie bilden darin eine Serie. Damit lässt sich eine Kategorie Bild für Bild ansehen, nur bestimmt der Besucher den Takt.

Die Optionen animate und resizeSpeed tragen Sie nicht in js/lightbox.js ein, sondern in die Vorlage tpl/bildergalerie.html, und zwar vor der Zeile, die js/lightbox.js lädt, etwa window.LightboxOptions = { resizeSpeed: 9 };. Bei einem Update sichern Sie diese Vorlage vorher und spielen sie danach zurück, dann bleibt die Einstellung erhalten. Mit dem Standard 7 dauert jeder Schritt der Größenänderung beim Blättern 0,6 Sekunden, mit 9 nur noch 0,3.

Für flüssiges Blättern sorgen außerdem die Felder „Maximale Breite der großen Ansicht“ und „Maximale Höhe der großen Ansicht“ unter „Einstellungen“ im Abschnitt „Große Ansicht (Lightbox)“. Mit dem Standard von 1024 Pixeln lädt die Lightbox bei einem 4000 Pixel breiten Handyfoto eine verkleinerte Kopie statt des Originals.

Die Reihenfolge beim Hochladen festlegen

Weil es keine automatische Wiedergabe gibt, zählt beim Durchblättern umso mehr die Reihenfolge. Die Galerie zeigt Bilder in der Reihenfolge, in der sie hochgeladen wurden, umsortieren lässt sich nachträglich nichts. Eine Reise von 24 Bildern erzählen Sie also, indem Sie die Fotos in der gewünschten Abfolge hochladen, bei Bedarf in mehreren Durchgängen. Das erste Bild wird dabei zum Titelbild der Kategorie auf der Startseite.

Selbst bauen: eine kleine Slideshow für die Startseite

Wer trotzdem eine laufende Slideshow auf der Webseite möchte, setzt sie auf die eigene Startseite und lässt jedes Bild auf die passende Kategorie der Galerie verlinken. Als Bildquelle eignen sich die Fotos, die die Galerie schon für die große Ansicht bereithält: Öffnen Sie ein Foto in der Lightbox und kopieren Sie mit Rechtsklick die Bildadresse. Bei großen Fotos ist das die verkleinerte Kopie bilder/tn/ob_3_…, bei kleinen das Original. Sechs solcher Bilder mit je rund 200 KB ergeben 1,2 MB, die die Startseite beim Öffnen lädt. Das folgende Beispiel blendet alle 6 Sekunden über und hat einen Knopf zum Anhalten. Es pausiert, solange der Mauszeiger auf dem Bild liegt oder ein Bildlink den Tastaturfokus hat, und bleibt ganz stehen, wenn Besucher in ihrem Betriebssystem weniger Bewegung eingestellt haben:

<div class="schau"> <a href="galerie/bildergalerie.php?kid=3"><img src="galerie/bilder/tn/ob_3_terrasse.jpg" alt="Terrasse am Abend"></a> <a href="galerie/bildergalerie.php?kid=3"><img src="galerie/bilder/tn/ob_3_gastraum.jpg" alt="Gastraum"></a> <!-- bis zu sechs Bilder -->
</div>
<button type="button" id="schau-knopf">Anhalten</button> <style>
.schau{position:relative;aspect-ratio:3/2;overflow:hidden}
.schau a{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity 1s}
.schau a.an{opacity:1;pointer-events:auto}
.schau img{width:100%;height:100%;object-fit:cover}
</style> <script>
const schau = document.querySelector('.schau');
const bilder = schau.querySelectorAll('a');
const knopf = document.getElementById('schau-knopf');
let nr = 0;
let laeuft = !matchMedia('(prefers-reduced-motion: reduce)').matches;
let verweilt = false; // Maus oder Tastaturfokus auf dem Bild
schau.addEventListener('mouseenter', () => verweilt = true);
schau.addEventListener('mouseleave', () => verweilt = false);
schau.addEventListener('focusin', () => verweilt = true);
schau.addEventListener('focusout', () => verweilt = false);
bilder[0].classList.add('an');
knopf.textContent = laeuft ? 'Anhalten' : 'Abspielen';
setInterval(() => { if (!laeuft || verweilt) return; bilder[nr].classList.remove('an'); nr = (nr + 1) % bilder.length; bilder[nr].classList.add('an');
}, 6000);
knopf.onclick = () => { laeuft = !laeuft; knopf.textContent = laeuft ? 'Anhalten' : 'Abspielen';
};
</script>

Den Ordner galerie/ passen Sie an den Ort an, an dem Ihre Galerie liegt. Der feste Rahmen mit aspect-ratio und object-fit:cover verhindert, dass ein Hochformat die Seite springen lässt. Der Ausschnitt wird dabei mittig gewählt, wichtige Motive sollten also nicht am Rand liegen. Testen Sie das Zusammenspiel ruhig mit Ihren eigenen Fotos: Das Bildergalerie-Script können Sie kostenlos herunterladen.

Häufige Fragen

Bevor Sie eine Slideshow einrichten, klären diese Fragen die wichtigsten Einstellungen und den Unterschied zur Diashow.

Verwandte Themen

Wer eine Slideshow plant, kombiniert sie meist mit diesen Galerie-Funktionen und Begriffen.

• Was ist eine Diashow im Internet
• Was ist eine Lightbox in einer Galerie
• Was ist eine Galerie Navigation
• Was ist eine responsive Galerie
• Bildergalerie Ratgeber: Funktionen einer Galerie verständlich erklärt