Diashow manuell / automatisch

Die 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).

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

$verzeichnis "bilder/"// Bilderverzeichnis

if (isset($_GET["show"])) {
 foreach (
array_slice(scanDir($verzeichnis), 2) as $datei) {
  
$path pathinfo($datei);
  if (
in_array(strtolower($path["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 () {
   var 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 (14 Beispiele) gibt es hier zum herunterladen: diashow.zip

Viel Spaß damit!

Tipps

Mit JSON Daten zwischen JavaScript und PHP austauschen
JSON, ist ein kompaktes Datenformat in einer einfach lesbaren Textform zum Zweck des Datenaustauschs zwischen Anwendungen.
Audio-Player
Mit diesem Audio-Player kann man Audio-Dateien über JavaScript steuern.
Umstellung von der PHP-Funktion mysql() zu mysqli()
Zur Zeit stellen viele Provider auf PHP 7 um, mit dieser neuen PHP-Version werden viele "alte" Scripte nicht mehr laufen die auf eine Datenbank zugegriffen haben.