Diashow manuell / automatisch

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

Demo

< 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:  AusblendenKopierenLinkZeilen

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
126
127
128
129
130
131
132
133
134
<?php
// Diashow manuell

$verzeichnis "bilder/"// Bilderverzeichnis

if (isset($_GET["show"])) {
  foreach (
array_slice(scanDir($verzeichnis), 2) as $datei) {
    
$extension substr($datei, -4);
    if (
in_array($extension, [".png"".jpg"".gif"])) {
      
$arr[] = ['names' => $verzeichnis $datei];
    }
  }

  echo 
json_encode($arr);
  exit;
}
?>
<!DOCTYPE html>
<html lang="de">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Diashow manuell</title>

  <script>
    // Diashow manuell

    window.addEventListener("DOMContentLoaded", function () {
      const 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").innerText = 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;
      }
      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;
      user-select: None;
    }

    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 (insgesamt 18 verschiedene Beispiele) gibt es hier zum herunterladen:

diashow.zip

Viel Spaß damit!

Tipps

Bilder bewerten - Einfaches Bewertungssystem für Bilder - Der Benutzer kann (pro Browser-Sitzung) nur einmal das gleiche Bild bewerten. Bei einem Klick auf das Bild wird dieses in der Originalgröße (Modal-Effekt) angezeigt.