Diashow aus Bildern eines Verzeichnisses automatisch erstellen

von: Werner-Zenk.de - Version vom 17.08.2016. Guckt Euch auch die automatische Diashow beim Werner an.

Kann nicht in alten Browsern wie dem IE8 dargestellt werden

< 1 >

Bilder von: bilder.n3po.com

Für den Einbau in NOF geht Ihr wie folgt vor:

Stellt die Seite, auf der Ihr das PHP-Skript einbaut, auf die Dateierweiterung .php und den Zeichensatz “UTF-8”.

> Menü oben > Bearbeiten > Benutzerdefinierte Namen > Dateierweiterung > .php wählen

Kopiert dieses PHP-Skript an den Beginn Eurer Seite.

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Beginn der Seite” (keine Leerzeile oben lassen)

Tragt das Verzeichnis der Bilder ein - hier “panorama”, welches sich bei mir im gleichen Verzeichnis wie die Seite, auf der ich das Skript eingebaut habe, befindet.

<?php

// Bilderverzeichnis
// Werner-Zenk.de
// Version vom 17.08.2016

// Verzeichnispfad eventuell anpassen
$verzeichnis = "panorama/";

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;
}
?>

Fügt das JavaScript unten ebenfalls in das Layout Eurer Seite “Zwischen Head Tags” ein.

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Zwischen Head Tags

<script>
  // Eventhandler setzen
  window.addEventListener("load", function () {
   document.getElementById("prev").addEventListener("click", function(){blaettern(-1)});
   document.getElementById("next").addEventListener("click", function(){blaettern(1)});
   document.getElementById("dummy").addEventListener("click", function(){blaettern(1)});
   show();
  });

  // Diashow
  var bild = new Array();
  function show() {
   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);
     for (var counter = 0; counter < obj.length; counter++) {
      bild[counter] = obj[counter].names;
     }
     // Erstes Bild
     document.getElementById("dummy").src = bild[0];
     document.getElementById("number").innerHTML = 1;
    }
   }
  }

  // Blaettern
  var aktuell = 0;
  function blaettern(richtung) {
  var ende = bild.length;
   if (aktuell+richtung >= 0 && aktuell+richtung < ende) {
    aktuell += richtung;
    document.getElementById("dummy").src = bild[aktuell];
   }
   else if (aktuell+richtung >= ende) {
    aktuell = 0;
    document.getElementById("dummy").src = bild[aktuell];
   }
   document.getElementById("number").innerHTML = aktuell+1;
  }
</script>

Weiterhin müsst Ihr dem Skript eine CSS geben, die Ihr natürlich beliebig anpassen könnt.

Fügt diese CSS ebenso “Zwischen Head Tags” des Layouts ein.

<style>
  img#dummy {
   display: Block;
   margin: 1rem Auto 1rem Auto;
   border: Solid Thin Black;
   box-shadow: 1px 1px 10px 0px #777777;
  }

  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;
  }

  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 {
   text-align: Center;
  }
</style>

Für die Anzeige der Diashow fügt Ihr den Code unten in den HTML-Code Editor  eines Textfeldes ein.

> Textfeld doppelklicken (Cursor blinkt) > Fenster “Text-Eigenschaften” > mittlere Button oben “Textfeld” > Button “HTML” > Code einfügen

            <figure>
             <img src="" id="dummy">
             <figcaption>
              <span id="prev" title="Zurück">&lt;</span>
              <span id="number">1</span>
              <span id="next" title="Weiter">&gt;</span>
             </figcaption>
            </figure>

Viel Spaß!

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik