Diashow manuell / automatisch

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


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($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!

• Dieses Diashow Paket zeigt Bilder aus selbst definierten Alben an. Die Art der (autom.) Diashow kann vom Benutzer frei gewählt werden. In der Verwaltung können die Alben geändert werden. diashow_paket.zip

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.
Zeitbalken
Dieses Script zeigt die vergangene Zeit mit einem farbigen Fortschrittsbalken an. Mit JavaScript oder PHP kann man die vergangene Zeit berechnen lassen und mit CSS wird dann der Fortschrittsbalken farbig angezeigt.
Artikel über Checkboxen auswählen
Hier können Artikel (Bilder) ausgewählt werden die bestimmte Kriterien der Checkboxen erfüllen. Die Daten werden in einer CSV-Datei gespeichert und können individuell angepasst werden.