Tutorial für den hier verwendeten Preloader

Ladet Euch zunächst vom Autor - Niklaus Gerber - dieser Skripte die Dateien am Download Button zum besseren Verständnis herunter.

Entpackt die ZIP-Datei

  • niklausgerber-PreLoadMe-bdea81d.zip

und öffnet das entpackte Verzeichnis

  • niklausgerber-PreLoadMe-bdea81d

Kopiert mit Eurem FTP-Programm die Verzeichnisse

  • css - ich habe die in diesem Verzeichnis liegende CSS-Datei umbenannt in “preloader.css” und den z-index auf 2000 (wegen NOF-Navi) gesetzt
  • img - Verzeichnis mit Preloader-Grafik

in das Verzeichnis auf den Server, auf der sich Eure Seite befindet, auf der Ihr diesen Preloader einbauen wollt.

Öffnet die Beispiel-Datei “index.html” und guckt Euch genau an, an welchen Stellen der Seite was eingetragen werden muss. Das ist im Folgenden:

1.) Link zur CSS-Datei vom Preloader - gehört in die HTML vom Layout

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

<link rel="stylesheet" href="css/preloader.css" type="text/css" media="screen, print"/>

2.) Preloader Aufruf - gehört in die HTML vom Layout

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Beginn des Haupttextes” (<body>) einfügen

    <!-- Preloader Aufruf -->
    <div id="preloader">
    <div id="status">&nbsp;</div>
    </div>

3.) jQuery-Datei und Daten-Funktion für den Preloader - gehört in die HTML vom Layout

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Ende des Haupttextes” (</body>) einfügen

Bitte lasst die Datei jquery.min.js bei neueren NOF-Versionen weg, da NOF eine neuere jQuery-Datei verwendet und sonst die NOF-Navi nicht funktioniert.

 <!-- jQuery Plugin Preloader -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
    <!-- Preloader -->
    <script type="text/javascript">
    //<![CDATA[
            $(window).load(function() { // makes sure the whole site is loaded
            $('#status').fadeOut(); // will first fade out the loading animation
            $('#preloader').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website.
            $('body').delay(350).css({'overflow':'visible'});
        })
    //]]>
    </script>

Hier noch ein Screenshot der Layout-HTML.

Layout HTML

Tipp: hier könnt Ihr Euch jede Menge unterschiedliche Grafiken für einen Preloder erstellen - preloaders.net

Viel Spaß!

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik