Tutorials von Thomas Frei-Herrmann
Hintergrundbild Fullscreen Bild oder Fader
Als jQuery Plugin
Bitte guckt Euch für ausführliche Erklärungen und Beispiele dieses Plugins auch die Seite des Entwicklers an:
https://github.com/srobbin/jquery-backstretch
Zunächst benötigt Ihr zwei jQuery - Dateien.
- jquery.min.js
- jquery.backstretch.js - Version 2.0.1 vom 01.10.2012
Entpackt meine ZIP-Datei und kopiert diese beiden jQuery - Dateien in Eurer Verzeichnis “Assets” des Projektes.
Hier geht es zum Download dieser beiden jQuery - Dateien. Ich verwende hier die Version 2.0.1 vom 01.10.2012 der Datei jquery.backstretch.js
001-backstretch-2_0_1.zip. Downloads insgesamt seit 25.10.2012 : 1217
jQuery-Dateien
Zum Einlesen der zu verwendenden jQuery-Dateien (hier: “jquery.min.js” und “jquery.backstretch.js”) geht Ihr folgendermaßen vor:
Diese Dateien lest Ihr dann nicht in der “Assets-Verwaltung” ein, sondern direkt im Fenster “Master-Rahmen-Eigenschaften”. Dort klickt Ihr auf den mittleren Button “Reihenfolge beim Skriptimport” und anschließend auf das “+” Zeichen unten links und wählt die .js Datei aus Eurem Verzeichnis “Assets”, in das Ihr diese Datei auf Euren PC bereits kopiert hattet, aus. Die neu eingelesene Datei wird von NOF zunächst unten an die Liste der jQuery-Dateien angehängt (hier: “jquery.min.js”).
... nun lest Ihr die nächste .js Datei ein (hier: “jquery.backstretch.js“). Wie Ihr im Screenshot oben erkennen könnt, habe ich die zuerst eingelesene Datei “jquery.min.js” nun mittels der Pfeile, unten rechts im Fenster, weiter nach oben verschoben, damit die Datei “navbar.js” von NOF nun unter der neuen jQuery-Datei liegt, da sonst die Navi von NOF nicht funktionieren würde. Auf diese Art und Weise ist es also möglich diese Dateien in beliebiger Reihenfolge in NOF zu platzieren.
Nun kopiert Ihr das Skript unten in die HTML des Layouts.
> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > Skript am “Ende des Haupttextes” einfügen, vor dem schließenden </BODY>
Bitte achtet dabei wieder auf die korrekte relative Pfadangabe zum Bild, hier von einer Unterseite. Von der Startseite nur mit einem Punkt ./
Ohne Fade-Effekt
Mit Fade-Effekt
<script>
$.backstretch("../assets/images/UnterWasser-001.jpg");
</script>
<script>
$.backstretch([
"../assets/images/UnterWasser-001.jpg"
], {
fade: 750
});
</script>
Kopiert das Skript unten in die HTML des Layouts.
> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > und das Skript am “Ende des Haupttextes” einfügen (also vor dem </BODY>)
Bitte achtet dabei wieder auf die korrekte relative Pfadangabe zu den Bildern, hier von einer Unterseite. Von der Startseite nur mit einem Punkt ./
<script>
$.backstretch([
"../assets/images/UnterWasser-001.jpg",
"../assets/images/UnterWasser-002.jpg",
"../assets/images/UnterWasser-003.jpg"
], {
fade: 750,
duration: 6000
});
</script>
Natürlich müsst Ihr das Skript noch mit den Dateinamen Eurer Bilder versehen und diese entweder in der Assets-Verwaltung einbinden oder händisch mit Eurem FTP-Programm in Eurer Verzeichnis
/assets/images/
kopieren. Ihr könnt natürlich auch noch beliebig viele Bilder hinzufügen und die Zeit der Überblendung (fade) sowie die Zeit der Bildanzeige (duration) in Millisekunden ändern.
Viel Erfolg!