Diashow manuell / automatisch

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

< 1 >

Diashow manuell mit Bildbeschreibung

Diashow manuell mit Bildbeschreibung und Link

Diashow manuell mit Zoom-Funktion oder Fade-In Effekt

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

Quelltext  Kopieren ❘ Ausblenden ❘ Zeilen

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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<?php
// Diashow manuell

$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 manuell</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <script>
  // Diashow manuell

  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 len = obj.length;
     document.getElementById("dummy").src = obj[0].names;
     document.getElementById("number").innerHTML = 1;
    }
    document.getElementById("prev").addEventListener("click", function(){blaettern(-1, obj, len)});
    document.getElementById("next").addEventListener("click", function(){blaettern(1, obj, len)});
    document.getElementById("dummy").addEventListener("click", function(){blaettern(1, obj, len)});
   }
  });

  // Blättern
  var aktuell = 0;
  function blaettern(richtung, obj, len) {
   if (aktuell+richtung >= 0 && aktuell+richtung < len) {
    aktuell += richtung;
    document.getElementById("dummy").src = obj[aktuell].names;
   }
   else if (aktuell+richtung >= len) {
    aktuell = 0;
    document.getElementById("dummy").src = obj[aktuell].names;
   }
   else if (aktuell+richtung < 0) {
    aktuell = obj.length-1;
    document.getElementById("dummy").src = obj[aktuell].names;
   }
   document.getElementById("number").innerText = aktuell+1;
  }
  </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;
  }

  span#prev, span#next {
   font-size: 1.2rem;
   font-weight: Bold;
   color: #000000;
   background-color: #FFFFFF;
   padding: 5px 10px 5px 10px;
   border: Solid 1px #000000;
   border-radius: 20px;
   box-shadow: 1px 1px 4px 0px #777777;
   cursor: Pointer;
  }

  span#prev:hover, span#next:hover {
   color: #FFFFFF;
   background-color: #777777;
   border: Solid 1px #FFFFFF;
  }

  span#number {
   display: Inline-Block;
   width: 2rem;
   text-shadow: 1px 1px 4px #777777;
  }

  figcaption#navigation {
   text-align: Center;
  }
  </style>

 </head>
<body>

<h2>Diashow manuell</h2>

<figure>
 <img src="" id="dummy">
 <figcaption id="navigation">
  <span id="prev" title="Zurück">&lt;</span>
  <span id="number">1</span>
  <span id="next" title="Weiter">&gt;</span>
 </figcaption>
</figure>

</body>
</html>

Die gezeigten Diashows (14 Beispiele) gibt es hier zum herunterladen: diashow.zip

Viel Spaß damit!

Diashow automatisch ▶

Tipps

Berechnungen mit dem Datum
Feiertage, Mondphase, Wochentag, Sonnenaufgang und Sonnenuntergang, Julianisches Datum, Sternzeichen, ...
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).
10 Regeln zu Dateinamen
Die Entscheidung, wie Sie die Dateien und Verzeichnisse (Ordner) auf Ihrer Website benennen ist nicht ganz Ihnen überlassen. Es gibt einiges, worauf Sie bei dieser Wahl achten müssen.
Diese Schlagwörter könnten Sie interessieren:
CSRF-Token Audiodatei AJAX Backdrop-Filter localStorage Formulare Floodsperre Fotoalbum Textgestaltung Lokaler Webserver Canvas Diashow Zebra-Tabelle Dynamische Seiten Favicon Zoom-Funktion RSS Feed Veranstaltungsliste Key Codes Marquee Zeitansage Audio-Player Eselsohren Gästebuch Datenschutz-Hinweis