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 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
<!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>
window.addEventListener("load", function() {
let bilder = document.getElementById("bilder");
var gruppe = bilder.getElementsByTagName("li");
var speed = document.getElementById("bilder").getAttribute("speed");
var fade = document.getElementById("bilder").getAttribute("fade");
var i = 1;
setInterval(function () {
document.getElementById("bild").src = gruppe[i].dataset.src;
document.getElementById("text").innerHTML = gruppe[i].dataset.subHtml;
document.getElementById("bild").style.opacity = "0.0";
for (let s = 0 ; s <= 100 ; s++ ) {
const opa = s / 100;
window.setTimeout(function () {
document.getElementById("bild").style.opacity = opa.toString();
} , fade * s);
}
i++;
if (i == gruppe.length) i = 0;
}, speed);
});
</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
- Floodsperre
- Um das Flooden (= Zumüllen mit großen Mengen meist sinnlosen Inhalts) von Foren und
Gästebüchern etc. zu erschweren oder um zu verhindern das nach dem absenden des Formulars und drücken der
F5-Taste (Seite neu laden) die Daten nochmals eingetragen werden, kann die hier vorgestellte Floodsperre einen Schutz bieten.
- Fehler 404 mit .htaccess abfangen
- Eine Website wird öfters umgebaut, Seiten kommen hinzu, andere Seiten werden entfernt oder bekommen eine neue Adresse. Eine selbst gestaltete Fehler-Weiterleitungsseite, leitet den Besucher sicher zum Angebot der Webseite.
- 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.
PHP-Fehlermeldungen Lokaler Webserver PHPMailer Canvas Zeichnen Mehrfachauswahl Dateibrowser Gästebuch Suchmaschine Blätterfunktion Favicon Sicherheit JSON Silbentrennung Sitemaps-Protokoll Mimetypen Event-Kalender ASCII Zeitfunktionen Wasserzeichen