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
<?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">
  <title>Diashow manuell</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

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

diashow.zip

Viel Spaß damit!