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

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.
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.
Mit JSON Daten zwischen JavaScript und PHP austauschen
JSON, ist ein kompaktes Datenformat in einer einfach lesbaren Textform zum Zweck des Datenaustauschs zwischen Anwendungen.
Diese Schlagwörter könnten Sie interessieren:
Diashow Zeichenkodierung Dynamische Seiten Kommentar-Box Floodsperre localStorage Mehrfachauswahl Blätterfunktion Seitenformatierung Suchmaschine Textgestaltung Wecker Zeichnen Formulare Mimetypen Quelltext Datenschutz-Hinweis Zeitfunktionen Audio-Player Metadaten