In HTML eine Slideshow erstellen - so geht's

Slideshow-Skripte verwenden

Um auf Ihrer Website eine Slideshow zu integrieren, können Sie grundsätzlich entweder ein bereits fertiges Skript einbinden oder die Slideshow selbst programmieren.

• Der Vorteil von fertigen Skripten besteht vor allem darin, dass Sie diese schnell und einfach in Ihre Website einfügen können und diese oft sehr viele Funktionen wie zum Beispiel das einfache Darstellen von Vorschaubildern oder das Öffnen der Bilder in einer vergrößerten Ansicht.
• Sie müssen dabei in den meisten Fällen nur das Skript mit den benötigten CSS- und Bilderdateien in Ihrem HTML-Dokument einfügen, was Sie in der jeweiligen Dokumentation oder Beispieldatei erklärt bekommen.
• Gute und kostenlose Skripte sind dabei zum Beispiel "Nivo Slider" oder "Photo Slider".
• Zum anderen können Sie den Code für die Slideshow auch selbst erstellen und dabei Ihre gewünschten Einstellungen und Funktionen selbst festlegen.
• Eine einfache Slideshow benötigt dafür nur relativ wenige Code-Zeilen und lässt sich ohne Probleme in jede HTML-Datei einfügen.

HTML- und CSS-Code erstellen

Um eine eigene Slideshow zu erstellen, müssen Sie sich zunächst dem HTML-Code widmen und die Slideshow mit CSS etwas gestalten.

• Der Aufbau der Diashow innerhalb der HTML ist dabei ganz einfach mit wenigen div-Tags erstellbar. Dazu müssen Sie lediglich einen div-Bereich für die Slideshow anlegen, in der Sie dann die Bilder innerhalb eines weiteren div-Elements aufrufen.
• Dies könnte zum Beispiel wie folgt aussehen:
  
  
  
• Achten Sie dabei darauf, dass die Bilder entweder dieselbe Größe haben oder Sie diese mit CSS einheitlich skalieren lassen. Sobald Sie das HTML-Grundgerüst haben, können Sie mit wenigen Zeilen CSS-Code Ihre Diashow noch etwas gestalten.
• Den CSS-Code können Sie dann entweder in Ihre bereits bestehende CSS-Datei einfügen oder innerhalb von "" in Ihrem head-Bereich einfügen. So könnten Sie zum Beispiel einen weißen Rahmen um die einzelnen Bilder erstellen und diese weiße Box noch mit einem Schatten vom restlichen Inhalt der HTML-Seite abheben. Dies könnten Sie bspw. wie folgt machen:
  #show
  {
  position: relative;
  width: 400px;
  height: 400px;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0,0,0,0.8);
  }
  
  #show > div
  {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  }

Slideshow mit jQuery animieren

Zuletzt müssen Sie Ihre Slideshow nur noch animieren lassen, was Sie schnell und einfach mit jQuery realisieren können.

• Dazu müssten Sie lediglich den folgenden Code in den head-Bereich Ihrer HTML-Seite einfügen und gegebenenfalls noch nach Ihren Wünschen anpassen:
   
  
• Mit diesem jQuery-Script lassen Sie zunächst alle Bilder bzw. div-Bereiche außer den ersten Eintrag ausblenden ("div:gt(0)").hide();") und die Slideshow-Funktion in einem Intervall alle 5 Sekunden ("5000") wiederholen.
• Dabei wird das vorherige Bild, also der vorherige div-Bereich, innerhalb von 1,5 Sekunden ("1500)" langsam ausgeblendet ("fadeOut") und das nächste Bild ("next") aufgerufen, das dann ebenfalls innerhalb von 1,5 Sekunden langsam eingeblendet wird ("fadeIn").
• Zuletzt weisen Sie die Funktion dem speziellen div-Element zu, wo diese ausgeführt werden soll, also in diesem Fall soll der div-Bereich "show" mit dieser Funktion animiert werden (".appendTo('#show');).