Tutorial 2 jQuery

Tutorials von Thomas Frei-Herrmann

Hintergrundbild Fullscreen Fader Tutorial 2

Reihenfolge jQuery-Dateien

Für mein 1. Tutorial zum Fullscreen-Skript guckt bitte zunächst hier und hier um die Animation zu stoppen.

 

Dieses Tutorial soll Euch ausschließlich zeigen, wie man die jQuery-Dateien direkt in NOF einbinden kann, da sich die jQuery-Dateien von NOF oft mit neueren jQuery-Dateien nicht vertragen und daher die Reihenfolge eine entscheidende Rolle spielt.

Diese Lösung ist etwas eleganter als die Lösung in meinem Tutorial 1 und man kann die Reihenfolge der jQuery-Dateien
in NOF bestimmen.

Ich beschreibe hier als Beispiel meine Schritte, die ich in diesem Beispiel des Fullscreen-Faders gegangen bin. Diese Prozedur kann man natürlich auch für andere Skripte anwenden.

 

CSS-Datei

Zunächst die Einbindung der CSS-Datei (hier: bgstretcher.css) für bestimmte “Master-Rahmen”. Nachdem Ihr diese CSS-Datei in der “Assets-Verwaltung” von NOF eingelesen habt, geht Ihr in die “Design-Ansicht”.

Dort findet Ihr diese Datei und klickt mit der rechten Maustaste und wählt “CSS-Datei einbinden in”. Es öffnet sich das Fenster
“CSS-Bereich”. Dort wählt Ihr “Master-Rahmen” (natürlich könnte man hier auch “Site-übergreifend” oder eben “Seitenspezifisch” wählen) und klickt auf den Button “Auswählen”. Es öffnet sich das Fenster “Master-Rahmen auswählen” und Ihr hakt die Master-Rahmen des Projektes an, auf denen diese CSS-Datei eingebunden werden soll.

... wenn Ihr anschließend diese Datei in der “Assets-Verwaltung” doppelklickt, dann könnt Ihr diese Zuordnung erkennen.

CSS-Zuordnung

jQuery-Dateien

Zum Einlesen der zu verwendenden jQuery-Dateien (hier: “jquery-1.5.2.min.js” und “bgstretcher.js”) geht Ihr folgendermaßen vor:

Diese Dateien lest Ihr dann nicht in der “Assets-Verwaltung” ein, sondern direkt im Fenster “Master-Rahmen oder Layout-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-1.5.2.min.js”).

jQuery-einlesen-001

... nun lest Ihr die nächste .js Datei ein (hier: “bgstretcher.js“). Wie Ihr im Screenshot unten erkennen könnt, habe ich die zuerst eingelesene Datei
jquery-1.5.2.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.

Bemerkung: Sollte es notwendig werden eine gleiche .js Datei, wie z.B. die Datei “jquery-1.5.2.min.js” in einem anderen Master-Rahmen erneut einzulesen, dann hat NOF diese Datei ja bereits in die “Assets-Verwaltung” integriert und da NOF nie gleiche Dateien mit dem gleichen Namen in der “Assets-Verwaltung” zulassen kann, wird NOF diese dann umbenennen in z.B. “jquery-1.5.2.min0.js

jQuery-einlesen-002

Jetzt brauche ich also nur noch diesen Teil des Fullscreen-Skriptes in den [Custom4] Bereich des Code-Editors von NOF zu kopieren, denn den hier weißen und durchgestrichenen Bereich habe ich ja bereits wie oben beschrieben eingebunden.

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

 

Animation stoppen und starten

Bei den Beispiel-Skripten werdet Ihr auch noch eine Datei “main.js” finden, in der Funktionen eingebaut sind, um die Animation über einen Link zu stoppen oder zu starten. Auf diese Datei habe ich auf meiner Seite Slider verlinkt, damit ich diese Funktion auch nutzen kann.

Nun stehen dort noch alle möglichen anderen Funktionen drin, die man - nur um die Animation zu stoppen, nicht benötigt.

Klaus2 war so nett und hat mir dieses Skript so verkürzt, dass ich nun gleich, auf meiner Seite “Fader” in den [Custom4] Bereich mit hinein kopiert habe. Dann würde das Skript so aussehen.

<!-- Beginn Fullscreen Skripte im [Custom4] Bereich von NOF -->
<script type="text/javascript">
/* <![CDATA[ */
   $(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
      });
       
        $('#toggleAnimation').html("Animation stoppen");
       
        // Play / pause button
        $('#toggleAnimation').unbind('click');
        $('#toggleAnimation').click(function(){
                if ($(this).html() == "Animation stoppen"){
                        $(this).html("Animation starten");
                        $('BODY').bgStretcher.pause();
                } else {
                        $(this).html("Animation stoppen");
                        $('BODY').bgStretcher.play();
                }
        });
   });
  
/* ]]> */
</script>
<!-- Ende Fullscreen Skripte im [Custom4] Bereich von NOF -->

Jetzt müsst Ihr nur noch einen Link mit der Anweisung “Animation stoppen”, die gleich heißen muss wie im Skript oben, in den HTML-Code Editor eines Textfeldes kopieren

<a href="javascript:;" id="toggleAnimation">Animation stoppen</a>

Viel Erfolg!

diese Seite weiter empfehlen



Counter Statistik