Diashow aufgebohrt

Oft sind Diashows mit JavaScript sehr komplex aufgebaut, der Anwender muss im JavaScript-Code die Bilder für die Diashow eintragen oder die Geschwindigkeit etc. anpassen.

Mit dieser autom. Diashow werden Bilder und Beschreibungen aus einer HTML-Aufzählungsliste (<ul>) über JavaScript ausgelesen und angezeigt. Der Vorteil, wenn man weitere Bilder hinzufügt ist, das nur die Aufzählungsliste erweitert werden muss.

Ein Beispiel:

<ul id="bilder" speed="4500" fade="15">
 <li data-src="02.jpg" data-sub-html="<p>Beschreibung Bild 2</p>"></li>
 <li data-src="01.jpg" data-sub-html="<p>Beschreibung Bild 1</p>"></li>
 <li data-src="03.jpg" data-sub-html="<p>Beschreibung Bild 3</p>"></li>

 <li data-src="04.jpg" data-sub-html="<p>Beschreibung Bild 4</p>"></li>
 <li data-src="05.jpg" data-sub-html="<p>Beschreibung Bild 5</p>"></li>
</ul>

Einfach die Position der Listenelemente ändern um die Reihenfolge der Bilder anzupassen. Bei speed="4500" wird die Geschwindigkeit angepasst und bei fade="15" die Dauer des Fade-in-Effekts.

Demo

Central Park in New York

Je nachdem welche Hintergrundfarbe auf der Seite vorhanden ist, sieht der Fade-In Effekt anders aus. Man kann die Hintergrundfarbe anpassen, entweder mit background-color: …; oder mit background: repeating-linear-gradient(…); (Beispiel) oder wie im oberen Beispiel einen Bilderrahmen um die Diashow setzen.

QuelltextKopierenAusblendenZeilen

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html lang="de">
 <head>
  <meta charset="UTF-8">
  <title>Diashow</title>

  <style>
  ul#bilder {
   display: None;
  }

  img#bild {
   border: Solid 3px #FFD700;
  }
  </style>


  <script>
  window.addEventListener("load", function() {
   let bilder = document.getElementById("bilder");
   var gruppe = bilder.getElementsByTagName("li");
   var speed = document.getElementById("bilder").getAttribute("speed");
   var fade = document.getElementById("bilder").getAttribute("fade");
   var i = 1;
  
   setInterval(function () {
    document.getElementById("bild").src = gruppe[i].dataset.src;
    document.getElementById("text").innerHTML = gruppe[i].dataset.subHtml;
    document.getElementById("bild").style.opacity = "0.0";

    for (let s = 0 ; s <= 100 ; s++ ) {
     const opa = s / 100;
     window.setTimeout(function () {
      document.getElementById("bild").style.opacity = opa.toString();
     } , fade * s);
    }
    i++;
    if (i == gruppe.length) i = 0;
   }, speed);

  });
  </script>


 </head>
<body>

<ul id="bilder" speed="4500" fade="15">
 <li data-src="01.jpg" data-sub-html="<p>Beschreibung Bild 1</p>"></li>
 <li data-src="02.jpg" data-sub-html="<p>Beschreibung Bild 2</p>"></li>
 <li data-src="03.jpg" data-sub-html="<p>Beschreibung Bild 3</p>"></li>
</ul>

<figure>
 <img src="01.jpg" id="bild">
 <figcaption id="text"> <p>Beschreibung Bild 1</p> </figcaption>
</figure>

</body>
</html>

Infos über die Verwendung von Datenattributen:
Using data attributes

Weitere Diashows finden Sie unter: Diashow automatisch und Diashow manuell

Tipps

Floodsperre
Um das Flooden (= Zumüllen mit großen Mengen meist sinnlosen Inhalts) von Foren und Gästebüchern etc. zu erschweren oder um zu verhindern das nach dem absenden des Formulars und drücken der F5-Taste (Seite neu laden) die Daten nochmals eingetragen werden, kann die hier vorgestellte Floodsperre einen Schutz bieten.
Fehler 404 mit .htaccess abfangen
Eine Website wird öfters umgebaut, Seiten kommen hinzu, andere Seiten werden entfernt oder bekommen eine neue Adresse. Eine selbst gestaltete Fehler-Weiterleitungsseite, leitet den Besucher sicher zum Angebot der Webseite.
10 Regeln zu Dateinamen
Die Entscheidung, wie Sie die Dateien und Verzeichnisse (Ordner) auf Ihrer Website benennen ist nicht ganz Ihnen überlassen. Es gibt einiges, worauf Sie bei dieser Wahl achten müssen.
Diese Schlagwörter könnten Sie interessieren:
PHP-Fehlermeldungen Lokaler Webserver PHPMailer Canvas Zeichnen Mehrfachauswahl Dateibrowser Gästebuch Suchmaschine Blätterfunktion Favicon Sicherheit JSON Silbentrennung Sitemaps-Protokoll Mimetypen Event-Kalender ASCII Zeitfunktionen Wasserzeichen