Tutorials von Thomas Frei-Herrmann
Hintergrundbild Fullscreen Fader Tutorial 1
Für mein 2. Tutorial mit Einbindung der jQuery- und CSS Dateien in NOF und um die Animation zu stoppen guckt bitte auch hier.
Hier erstellt mit NOF 12 (Update 3). Die HTML-Ausgabe muss für meine Anleitungen auf XHTML stehen.
Dieses Skript habe ich von der folgenden Seite:
http://www.ajaxblender.com/bgstretcher-2-jquery-stretch-background-plugin-updated.html
Bitte geht auf diese Seite und ladet Euch die Skripte herunter. Nach dem Entpacken der ZIP-Datei erhaltet Ihr den Ordner:
bgstretcher-2
... öffnet diesen Ordner. Hier findet Ihr die benötigten Dateien:
bgstretcher.css
bgstretcher.js
jquery-1.5.2.min.js
Bitte lest diese Dateien in Eure Assets-Verwalung ein. Wie man das macht erkläre ich hier. Dabei werden dann von NOF die beiden .js Dateien automatisch in den Ordner “assets” und die .css Datei in den Ordner “html” abgelegt.
> rechte Maustaste in der Assets-Verwaltung > Neue Datei > die Datei wählen > “Immer publizieren” anhaken
Nun fügt Ihr die benötigten Skripte in den Code-Editor im Bereich <!-- [Begin Custom4 ] --> von NOF ein, wie unten im Screenshot zu erkennen
(hier blau hinterlegt). Den Button für diesen Editor findet Ihr ganz unten links “<> Code”.
Da Ihr diese Skripte nun händisch hier einfügt, müsst Ihr immer auf die korrekte relative Pfadangabe zu den Dateien achten,hier von einer Unterseite, die sich im Ordner “html” von NOF befindet, daher die 2 Punkte ../ (gehe ein Verzeichnis höher). Das müsst Ihr also anpassen und auf jeder Seite einzeln in den Code-Editor einbringen.
Auf der Startseite (Home) würde es dann eben nur mit 1 Punkt ./ geschrieben (bleibe im gleichen Verzeichnis):
./assets/jquery-1.5.2.min.js
./assets/bgstretcher.js
./html/bgstretcher.css
... die Hintergrundbilder habe ich ebenfalls bereits in die “Assets-Verwaltung” eingelesen, sodass NOF diese automatisch mit in den Ordner:
assets/images/ publiziert. Auch hier müsstet Ihr im Skript den relativen Pfad für die Startseite anpassen, dann also wieder nur 1 Punkt:
./assets/images/Bild.jpg
Hier der gesamte Code (von einer Unterseite), den Ihr mit den relative Pfadangaben und Euren Bildern anpassen müsst:
<script type="text/javascript" src="../assets/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="../assets/bgstretcher.js"></script>
<link rel="stylesheet" href="../html/bgstretcher.css" />
<!-- Skript navbar.js erneut einfügen damit die NOF-Navigationsleiste funktioniert -->
<script type="text/javascript" src="../assets/navbars.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Initialize Backgound Stretcher
$('BODY').bgStretcher({
images: ['../assets/images/Meer.jpg', '../assets/images/Kueste.jpg', '../assets/images/Wasser.jpg'], imageWidth: 1280, imageHeight: 853
});
});
</script>
Zusätzliche Bemerkungen:
Oben im Code habe ich die Verlinkungen zu den Skripten dieser Anwendung fett markiert.
Der rot markierte Bereich ist die Verlinkung zu der Datei navbar.js von NOF. Diese muss unter der neuen jQuery-Datei stehen, da sonst die Naviagtionsleiste nicht mehr angezeigt würde, daher habt Ihr diese Datei dann doppelt auf den Seiten. Auch hier müsstet Ihr auf der Startseite die relative Pfadangabe in 1 Punkt ./ ändern.
Der blau markierte Bereich ist eine Funktion, die die Hintergrundbilder dann im <BODY> Eurer Seite anzeigt. Bitte tragt dort Eure Bilder mit dem richtigen relativen Pfad ein (Startseite nur 1 Punkt). Alle Bilder müssen die gleiche Größe haben, die Ihr hier auch angebt (in Pixeln).
[‘../assets/images/Meer.jpg', '../assets/images/Kueste.jpg', '../assets/images/Wasser.jpg'], imageWidth: 1280, imageHeight: 853
Guckt bitte für die Optionen dieser Anwendung auf der Originalseite. Ihr könnt z.B. auch einstellen, wie schnell die Bilder wechseln oder ob es überhaupt eine Animation geben oder der Effekt ein anderer sein soll - und vieles mehr.
Das stellt Ihr alles in der Datei bgstretcher.js ein.
Guckt Euch bitte auch mein 2. Tutorial an, dort baue ich die Skripte etwas eleganter ein und beschreibe auch, wie man die Animation stoppen und wieder starten kann.
Viel Erfolg!