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"> </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.
Tipp: hier könnt Ihr Euch jede Menge unterschiedliche Grafiken für einen Preloder erstellen - preloaders.net
Viel Spaß!
