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="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>

 <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>

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>

Weitere Diashows finden Sie unter: Diashow automatisch und Diashow manuell

Tipps

Suchanfrage an eine Datenbank über AJAX senden und empfangen
Ohne das die Seite neu geladen werden muss, kann man über JavaScript eine Suchanfrage an eine PHP-Datei senden (die dann eine DB-Tabelle ausliest) und die Ergebnisse auf der gleichen Seite ausgibt.
SQLite-Datei mit PHP und PDO erstellen
Der Vorteil von SQLite ist, das die Datenbank eine Text-Datei ist und keine Verbindung zu einem Datenbank-Server benötigt wird.
Sitemaps-Protokoll für Suchmaschinen automatisch erstellen
Sorgen Sie dafür, dass die Nutzer auf einen größeren Teil Ihrer Website aufmerksam werden mit einem „Sitemaps-Protokoll”. Dies stellt eine einfache Möglichkeit für Webmaster dar, Suchmaschinen Seiten auf Ihrer Website zu melden, die zum durchsuchen verfügbar sind.
Diese Schlagwörter könnten Sie interessieren:
Fotoalbum Sprachumschaltung Counter Marquee Floodsperre localStorage Operatoren Rahmen AJAX Blätterfunktion Wecker Datenschutz-Hinweis Responsiv RSS Feed Metadaten Formulare Zeichnen Canvas PHP-Fehlermeldungen Suchmaschine