SimpleFader ist eine klassisches Newsfader Script für die grafische Präsentation von grafischen News oder Produkten. SimpleFader basiert auf jQuery und ist sehr einfach zu konfigurieren. Auch inhatlich gibt es keine Restriktionen, man sollte lediglich dafür sorgen, dass der gesamte Viewport vollständig ausgefüllt wird.
Features
- Automatische Erzeugung von Blätter-Buttons in Abhängigkeit von der Anzahl inkludierter News-Screens
- Erweiterung von Screens ohne Probleme möglich, da hierzu keine Script Anpassung notwendig ist
- Automatische Slideshow mit konfigurierbaren Timer
- Start/Pause Funktion bei Slide Show
- Einfach Installation und Konfiguration
Verwendung
Für die Verwendung muss die jQuery Bibliothek, die SimpleFader Bibliothek und das SimpleFader Stylesheet im Header der HTML Datei integriert werden.
<link rel="stylesheet" type="text/css" href="style.css"> <script src="jquery-1.4.3.min.js" type="text/javascript"> <script src="simplefader-1.0.0.min.js" type="text/javascript">
Alle darzustellenden Screens müssen dann in einen DIV block eingebunden werden mit der ID simplefader (ID, kann manuell geändert werden beim Initialisieren).
<div id="simplefader">
<!-- All Screens must have class "screen" //-->
<div id="screen1" style="background-image: url('demo1.jpg');">
</div>
<div id="screen2" style="background-image: url('demo2.jpg');">
</div>
<div id="screen3" style="background-image: url('demo3.jpg');">
</div>
<!-- Empty div for controls must be "simplefadercontrols" //-->
<div id="simplefadercontrols"></div>
</div>Zusätzlich muss in diesem Container noch ein weiterer DIV Block mit der ID simplefadercontrols eingefügt werden, möchte man die Blätter und Start/Stop-Funktion aktivieren.
Ist dies mal getan, muss SimpleFader nur noch initialisiert werden.
<script type="text/javascript">
jQuery(document).ready(function() {
simplefader.intervall = 3000;
simplefader.fadeintervall = 1000;
simplefader.screenchooser = true;
simplefader.playresume = true;
simplefader.init();
});
</script>In diesem Fall wird nur der Intervall auf 3000 Millisekunden (also 3 Sekunen gesetzt, der Übergang dauert eine Sekunde und es werden die Buttons für das blättern (screenchooser) und die Start/Pause-Buttons (playresume) angezeigt. Mit dem Aufruf der Init() Methode wird SimpleFader gestartet.
History
1.0.0
- Initialversion