Diashow aufgebohrt
Oft sind Diashows mit JavaScript sehr komplex aufgebaut, der Anwender muss im JavaScript-Code die Bilder für die Diashow eintragen oder die Geschwindigkeit etc. anpassen.
Mit dieser autom. Diashow werden Bilder und Beschreibungen aus einer HTML-Aufzählungsliste (<ul>) über JavaScript ausgelesen und angezeigt. Der Vorteil, wenn man weitere Bilder hinzufügt ist, das nur die Aufzählungsliste erweitert werden muss.
Ein Beispiel:
<ul id="bilder" speed="4500" fade="15"> <li data-src="02.jpg" data-sub-html="<p>Beschreibung Bild 2</p>"></li> <li data-src="01.jpg" data-sub-html="<p>Beschreibung Bild 1</p>"></li> <li data-src="03.jpg" data-sub-html="<p>Beschreibung Bild 3</p>"></li> <li data-src="04.jpg" data-sub-html="<p>Beschreibung Bild 4</p>"></li> <li data-src="05.jpg" data-sub-html="<p>Beschreibung Bild 5</p>"></li> </ul>
Einfach die Position der Listenelemente ändern um die Reihenfolge der Bilder anzupassen.
Bei speed="4500" wird die Geschwindigkeit angepasst und bei
fade="15" die Dauer des Fade-in-Effekts.
Demo
Central Park in New York
Je nachdem welche Hintergrundfarbe auf der Seite vorhanden ist, sieht der Fade-In Effekt anders aus.
Man kann die Hintergrundfarbe anpassen, entweder mit background-color: …; oder mit
background: repeating-linear-gradient(…);
(Beispiel)
oder wie im oberen Beispiel einen Bilderrahmen
um die Diashow setzen.
Quelltext Ausblenden ❘ Kopieren ❘ 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
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Diashow</title>
<style>
ul#bilder {
display: None;
}
img#bild {
border: Solid 3px #FFD700;
}
</style>
<script>
// Script nach dem laden der Seite starten
window.addEventListener("load", function() {
// Auf das HTML-Attribut id="bilder" zugreifen
let bilder = document.getElementById("bilder");
// Alle HTML-Tags: '<li>' in einem Array speichern
var gruppe = bilder.getElementsByTagName("li");
// Die Attribute: 'speed' und 'fade' auslesen und in Variablen speichern
var speed = bilder.getAttribute("speed");
var fade = bilder.getAttribute("fade");
// Zähler auf 1 setzen
var i = 1;
// Führt eine Funktion in einem festgelegten Rhythmus immer wieder aus,
setInterval(function () {
// Hier bekommt das Bild die Adresse (src) aus der 'gruppe'.
document.getElementById("bild").src = gruppe[i].dataset.src;
// Hier wird ein Text aus der 'gruppe' eingefügt.
document.getElementById("text").innerHTML = gruppe[i].dataset.subHtml;
// Die Opazität (Deckkraft, opacity) des Bildes auf: '0.0' setzen
document.getElementById("bild").style.opacity = "0.0";
// Fade-in Effekt
// Eine for-Schleife die von 0 bis 100 zählt
for (let s = 0 ; s <= 100 ; s++ ) {
const opa = s / 100;
// Führt eine Funktion nach einer bestimmten Verzögerungszeit aus.
window.setTimeout(function () {
// Die Opazität (Deckkraft, opacity) des Bildes setzen
document.getElementById("bild").style.opacity = opa.toString();
} , fade * s); // Hier wird die Verzögerungszeit festgelegt.
}
i++; // Zähler erhöhen
// Zähler zurücksetzen wenn dieser die Anzahl vom Array: 'gruppe' erreicht hat.
if (i == gruppe.length) i = 0;
}, speed); // Hier wird der Rhythmus der Funktion festgelegt.
});
</script>
</head>
<body>
<ul id="bilder" speed="4500" fade="15">
<li data-src="01.jpg" data-sub-html="<p>Beschreibung Bild 1</p>"></li>
<li data-src="02.jpg" data-sub-html="<p>Beschreibung Bild 2</p>"></li>
<li data-src="03.jpg" data-sub-html="<p>Beschreibung Bild 3</p>"></li>
</ul>
<figure>
<img src="01.jpg" id="bild">
<figcaption id="text"> <p>Beschreibung Bild 1</p> </figcaption>
</figure>
</body>
</html>
Infos über die Verwendung von Datenattributen:
Using data attributes
Weitere Diashows finden Sie unter: Diashow automatisch und Diashow manuell
Tipps
- Bilder mit Wasserzeichen markieren
- JPEG-Bilder (oder andere Grafikformate) können mit einem transparenten Wasserzeichen markiert werden; Mit Hilfe eines kleinen PHP-Scripts.
- Mit PHP schreiben und lesen
- Hier möchte ich an Beispielen zeigen, wie eine .txt-Datei mit PHP erstellt wird und wie diese ausgelesen werden kann.
- Sitemaps-Protokoll für Suchmaschinen automatisch erstellen
- Sorgen Sie dafür, dass die Nutzer auf einen größeren Teil Ihrer Website aufmerksam werden mit einem „Sitemaps-Protokoll”. Dies stellt eine einfache Möglichkeit für Webmaster dar, Suchmaschinen Seiten auf Ihrer Website zu melden, die zum durchsuchen verfügbar sind.