Webdesign - Diashow für beliebig viele Bilder mit einem JavaScript

  1. Zum Inhalt springen

webdesign
klamonfra
Klaus Franz


Diashow mit eigenen Bildern

Photos © Monika & Klaus Franz

Wie erstellt man eine Diashow mit sanfter Überblendung?

14Apr2014

Diashow für beliebig viele Bilder mit einem JavaScript


Ich möchte eine Diashow oder auch Slideshow im Kopf einer Website automatisch ablaufen lassen. Hierbei sollen beliebig viele Bilder einer Fotogalerie eingebunden werden können und eine sanfte Überblendung zwischen den einzelnen Bildern stattfinden.
Die Diashow wird mit JavaScript (objektorientierte Programmiersprache) realisiert, wobei aber bei ausgeschaltetem JavaScript (objektorientierte Programmiersprache) das erste Bild angezeigt werden soll.
Die Idee zu dieser Diashow habe ich auf der Seite von S.G. Chipman gefunden und dann meinen Wünschen angepasst. Nach der Realisierung hatte ich folgende größere Vorteile umgesetzt:

  • Die Diashow funktioniert mit beliebig vielen Bildern. Wobei ich in diesem Beispiel eine Obergrenze von 99 Bildern habe.
  • Bei deaktiviertem JavaScript (objektorientierte Programmiersprache) wird das erste Bild angezeigt, so dass das Design der Seite erhalten bleibt. Aus dem Grund kann das JavaScript (objektorientierte Programmiersprache) auch am Ende einer Seite geladen werden und sorgt damit für eine schnellere Ladezeit der Webseite. Das ist im Original-Script nicht der Fall, da werden alle Bilder untereinander dargestellt.
  • Beim Aufruf der Seite wird zuerst nur das erste Bild geladen und erst danach die weiteren Bilder. Das sorgt ebenfalls für eine schnellere Ladezeit. Das ist im Original-Script nicht der Fall, da werden alle Bilder hintereinander geladen.

Und so wird die Diashow auf einer Webseite eingebunden.

Die Bilder der Diashow werden mit dem Namen "name01.jpg" bis "namexx.jpg" in einem beliebigen Ordner auf dem Webserver gespeichert.
Achtung: Bei den Bildernamen muss man genau auf Groß- und Kleinschreibung achten.

Das erste Bild der Diashow wird in einen div-Container wie folgt in die Seite eingebunden:

<div id="diashow">
    <img id="eins" src="bilder800/name01.jpg" width="800" height="551"
         alt="Diashow mit eigenen Bildern">
</div>

Durch die Bezeichnung des "div-Container" mit "id = diashow" und der Identität "id = eins" des Bildes können wir im CSS (Cascading Style Sheet) ganz gezielt für das entsprechende Design sorgen.

#diashow {
    height: 34.438em;
    width: 50em;
    position: relative;
    margin: 2em auto 0;
    border: 5px solid #eee;
    box-shadow: 1px 1px 5px 2px #777;
}

#diashow img {
    display: none;
    height: 34.438em;
    width: 50em;
    position: absolute;
}

#diashow #eins {
    display: block;
}

Zuerst wird die Größe des Containers angegeben und in die Mitte der Seite gesetzt. Dann werden die Bilder mit "display: none" ausgeblendet, aber das Bild mit der Identität "id = eins" wiederum sichtbar geschaltet. Dadurch erreiche ich, dass das erste Bild bei deaktiviertem JavaScript (objektorientierte Programmiersprache) angezeigt wird.


Nun folgt noch das Wichtigste, das JavaScript.

Das zugehörige JavaScript (objektorientierte Programmiersprache) findet man auf der Seite von "S.G. Chipman". Ich habe dann das Script noch für meine Wünsche modifiziert.

Zuerst die Änderungen an der "function so_init()".
Hier laden ich nicht, wie im Original, alle Bilder in einer Schleife und mache sie unsichtbar, sondern lade zuerst nur das erste Bild. Außerdem wird noch eine weitere "function" mit dem Namen "newimg" für die weitere Verarbeitung und das Laden der restlichen Bilder aufgerufen.

function so_init() {
  if(!d.getElementById || !d.createElement)return;
  imgs[0] = d.getElementById("diashow").getElementsByTagName("img")[0];
  imgs[0].style.display = "block";
  imgs[0].xOpacity = .99;
  setTimeout(so_xfade,3000);
  newimg();
}

An der "function so_xfade()" habe ich die Dauer der Verweilzeit eines Bildes von 1000 Millisekunden auf 3000 Millisekunden gesetzt und rufe ebenfalls die "function newimg" auf. Die Dauer der Überblendung lasse ich auf 50 Millisekunden stehen.

function so_xfade() {
    ...
    setTimeout(so_xfade,3000);
    newimg();
  } else {
    setTimeout(so_xfade,50);
    ...
}

Und die neue "function newimg" mit der ich die restlichen Bilder lade, sieht dann wie folgt aus:

function newimg() {
  if (current < 23) {
    var cu1=current+1, cu2=current+2;
    imgAdr="http://www.webdesign-klamonfra.de/.../name";
    imgs[cu1] = new Image();
    imgs[cu1].src = imgAdr + ((cu2)<10 ? "0" + (cu2) : (cu2)) + ".jpg";
    imgs[cu1].xOpacity = 0;
    d.getElementById("diashow").appendChild(imgs[cu1]);
  }
}

Bei "(current < 23)" wird die Anzahl der Bilder minus 1 eingetragen, und bei "imgAdr" wird der Pfad wo die Bilder gespeichert sind, angegeben. Hier auf dieser Seite lade ich 24 Bilder. Jetzt wird das JavaScript (objektorientierte Programmiersprache) nur noch am Ende der Seite wie folgt eingebunden.

<script type="text/javascript"
    src="http://www.webdesign-klamonfra.de/js/slideshow.js">
</script>

Und schon ist diese wunderschöne und einfache Diashow in meiner Webseite eingebunden.

Zum Seitenanfang springen Λ