Diashow manuell / automatisch

Diese Diashow liest Bilder aus einem Verzeichnis aus (mit PHP), und zeigt diese mit Hilfe von JavaScript an.

Demo


Diashow autom. mit Fade-In Effekt, ScaleX Effekt, Zoom-Out Effekt oder Rotation Effekt

Diashow autom. mit Bildbeschreibung

Diashow autom. mit Bildbeschreibung und Link

Bei den Bildern sollten Sie auf eine einheitliche Größe achten. Sortiert können die Bilder werden, indem diese eine fortlaufende Nummer (001.jpg, 002.jpg, 003.jpg, …) erhalten.

Im JavaScript-Teil können Sie die Geschwindigkeit anpassen (Zeile: 41).

QuelltextAusblendenKopierenZeilen

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<?php
// Diashow automatisch

$verzeichnis "bilder/"// Bilderverzeichnis

if (isset($_GET["show"])) {
 foreach (
array_slice(scanDir($verzeichnis), 2) as $datei) {
  
$extension substr($datei, -4);
  if (
in_array(strtolower($extension), [".png"".jpg"".gif"])) {
   
$arr[] = ['names'=>$verzeichnis $datei];
  }
 }

 echo 
json_encode($arr);
 exit;
}
?>
<!DOCTYPE html>
<html lang="de">
 <head>
  <meta charset="UTF-8">
  <title>Diashow automatisch</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <script>
  // Diashow automatisch

  window.addEventListener("load", function () {
   const xhr = new XMLHttpRequest();
   xhr.open("GET", document.URL+"?show");
   xhr.send(null);
   xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 &&
        xhr.status == 200) {
     var obj = JSON.parse(xhr.responseText);
     var i = 1;
     document.getElementById("dummy").src = obj[0].names;
     setInterval(function () {
      if (i == obj.length) i = 0;
      document.getElementById("dummy").src = obj[i].names;
      i++;
     }, 5000); // Geschwindigkeit - Angabe in Millisekunden
    }
   }
  });
  </script>


  <style>
  body {
   font-family: Verdana, Arial, Sans-Serif;
  }

  h2 {
   font-weight: Normal;
  }

  figure img#dummy {
   max-width: 100%;
   height: Auto;
   display: Block;
   margin: 1rem Auto 1rem Auto;
   box-shadow: 1px 1px 5px #888888;
   border: Solid 1px #000000;
  }
  </style>


 </head>
<body>

<h2>Diashow automatisch</h2>

<figure>
 <img src="" id="dummy">
</figure>

</body>
</html>

Die gezeigten Diashows (insgesamt 17 verschiedene Beispiele) gibt es hier zum herunterladen: diashow.zip

Viel Spaß damit!

Tipps

Berechnungen mit dem Datum
Feiertage, Mondphase, Wochentag, Sonnenaufgang und Sonnenuntergang, Julianisches Datum, Sternzeichen, ...
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.
Checkbox (Mehrfachauswahl) und DB-Ausgabe
Mit den Checkboxen lassen sich mehrere Einträge von der DB-Tabelle auswählen, auswerten und ausgeben.