Diashow manuell / automatisch
Die Diashow liest Bilder aus einem Verzeichnis aus (mit PHP), und zeigt diese mit Hilfe von JavaScript an.
Demo
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"><</span>
<span id="number">1</span>
<span id="next" title="Weiter">></span>
</figcaption>
</figure>
</body>
</html>
Die gezeigten Diashows (14 Beispiele) gibt es hier zum herunterladen: diashow.zip
Viel Spaß damit!
Tipps
- 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).
- Audio-Player
- Mit diesem Audio-Player kann man Audio-Dateien über JavaScript steuern.
- Lokalen Webserver einrichten und verwenden
- Um PHP-Scripte auszuführen benötigt man einen Webserver. Um nun nicht jede Datei zum testen erst per FTP auf seinen Webserver zu laden ist es sinnvoll, sich lokal auf dem Rechner einen sog. lokalen Webserver zu installieren.
Diese Schlagwörter könnten Sie interessieren:
MySQL Bausteine Berechnungen Floodsperre Audiodatei RegEx Rahmen AES Sicherheit Sprachumschaltung RSS Feed Eselsohren Affenformular Absolute URL Farbschema Animation Canvas Responsiv CSS-Counter Zeit-Differenz Mehrfachauswahl Webseitenschutz PHPMailer Fotoalbum Mimetypen
MySQL Bausteine Berechnungen Floodsperre Audiodatei RegEx Rahmen AES Sicherheit Sprachumschaltung RSS Feed Eselsohren Affenformular Absolute URL Farbschema Animation Canvas Responsiv CSS-Counter Zeit-Differenz Mehrfachauswahl Webseitenschutz PHPMailer Fotoalbum Mimetypen