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

PHP mit Sicherheit
Sicheres Programmieren – Traue niemals den Eingaben des Benutzers! Speichern Sie fremde Benutzereingaben nie ohne eine Überprüfung in einer Datenbank oder in einer Datei ab.
RSS-Feed selbst erstellen
Ein RSS-Feed lässt sich, mit wenigen Codezeilen, einfach selbst erstellen. Diese stellen in erster Linie ein vorzügliches Instrument dar, den Bekanntheitsgrad einer Website zu steigern.
Zeitbalken
Dieses Script zeigt die vergangene Zeit mit einem farbigen Fortschrittsbalken an. Mit JavaScript oder PHP kann man die vergangene Zeit berechnen lassen und mit CSS wird dann der Fortschrittsbalken farbig angezeigt.
Diese Schlagwörter könnten Sie interessieren:
Fotoalbum localStorage Rahmen Mauszeiger Hover-Effekt PHPMailer SQLite Key Codes Diashow Responsiv Counter Sitemaps-Protokoll JSON Veranstaltungsliste MySQL Zebra-Tabelle CSS-Counter Marquee Zeitfunktionen Formulare