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

Bei speed="4500" wird die Geschwindigkeit angepasst und bei fade="20" die Dauer des Fade-in-Effekts.

Demo

Central Park in New York

Ein weiteres Beispiel unter: Diashow automatisch mit Fade-In Effekt Spezial

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
59
60
61
<!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() {
   var 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 (var s = 0 ; s <= 100 ; s++ ) {
     window.setTimeout('setOpacity("' + (s / 10) + '")' , fade * s);
    }

    i++;
    if (i == gruppe.length) i = 0;
   }, speed);

  });

  function setOpacity(wert) {
    var opa = (wert / 10);
   document.getElementById("bild").style.opacity = opa.toString();
  }
  </script>


 </head>
<body>

<ul id="bilder" speed="4500" fade="20">
 <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>

Der Rahmen um die Diashow wurde Mithilfe von CSS3 erstellt. Siehe dazu unter: Rahmen für Bilder und Text erstellen

Weitere Diashows finden Sie unter: Diashow automatisch und Diashow manuell

Tipps

Erster Eintrag in eine MySQL-Datenbank mit PHP
Eine Anleitung wie man ein Nachrichten-System mit einer MySQL (oder MariaDB)-Datenbank über PHP realisieren kann. Komplett mit Formularen zum eintragen, anzeigen und bearbeiten der Daten.
Daten auf mehreren Seiten aufteilen / Kombinierte Formular.- und Blätterfunktion
Damit nicht alle Daten einer DB-Tabelle auf einmal auf der Seite zu sehen sind, sondern übersichtlich auf mehreren Seiten verteilt stehen, benutzt man eine Seitennavigation zum blättern (Pagination).
Lokalen Webserver einrichten und verwenden
Um PHP-Scripte auszuführen benötigt man einen Webserver. Um nun nicht jede Datei zum testen erst per FTP auf seinen Webserver zu laden ist es sinnvoll, sich lokal auf dem Rechner einen sog. lokalen Webserver zu installieren.