NOF-Forum | Referenzen | Kontakt | Impressum | Sitemap
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
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"><</span>
<span id="number">1</span>
<span id="next" title="Weiter">></span>
</figcaption>
</figure>
Viel Spaß!