Seiteninhalt

• Fader mit jQuery (JS)
• Beipiel
• Integration in die Seite
• JavaScript anpassen (qp_fader.js)
• Browserkompatibilität
• Anregungen und Verbesserungsvorschläge

Fader mit jQuery (JS)

Es wird ein Fader vorgestellt, der zwei Bilder ineinander einblendet. Um das zu realisieren, wurde das JS-Framework jQuery (Version 1.3.1) verwendet.

• Fader-Script

Beispiel

Distel (1)

Gegenlicht (2)

Blaue Blume (3)

Erdbeeren (4)

1 2 3 4

startFader stopFader

Integration in die Seite

Zunächst müssen die benötigten JavaScripts im head-Bereich des Dokuments als externe JS eingebunden werden.

<script src="jquery-1.3.1.js" type="text/javascript"></script>
<script src="qp_fader.js" type="text/javascript"></script>

Inline-JavaScript

Um das Fade-Objekt nutzen zu können, muss es nach dem Laden des Dokuments initialisiert werden. Hierfür stellt jQuery den Event ready zur Verfügung.

In einem Script-Bereich, der im Dokument nach den extern eingebundenen JS stehen muss, wird folgendes notiert:

<script type="text/javascript">
  $(document).ready(function(){
    qpFade.initFader();
  });
</script>

Faderelement erstellen

Im HTML-Bereich wird ein Element erstellt, welches die Elemente aufnimmt, die später gefadet werden sollen. Dieses Element wird mit einer ID ausgezeichnet, die später im Fadeobjekt eingetragen werden muss.

<div id="fadeHolder_id">
  <div><img src="distel.jpg"><br />Distel</div>
  <div><img src="gegenlicht.jpg"><br />Gegenlicht</div>
  <div><img src="blaueblume.jpg"><br />Blaue Blume</div>
  <div><img src="erdbeeren.jpg"><br />Erdbeeren</div>
</div>
          

Es gilt zu beachten, dass das Element im Script mit der CSS-Eigenschaft position: relative ausgezeichnet wird!

CSS

Der Vollständigkeit wegen wird hier auch die CSS-Regeln angezeigt, die zur Auszeichnung für das obige Beispiel verwendet wurden.

#fadeHolder{ width: 450px;
             height: 240px;
             border: 0px solid #aaa;
             overflow: hidden;
             background: #fff url(beispiele/fader/fader_bg.jpg) 0 100% no-repeat;}
#fadeHolder div{ font-family: Arial, sans-serif;
                 font-size: 0.8em;
                 text-align: center;}
#fadeHolder p{ position: absolute;
               left: -140px;
               top: 0;
               width: 120px;
               height: 170px;
               color: #fff;}

.btnHolder{ position: relative;
            top: -50px;
            left: 12px;}
.btnHolder button{ background: #9D9063;
                   border: 1px solid #333;
                   color: #fff;
                   width: 30px;
                   margin: 0 0 !important;
                   margin: 0 2px;}

JavaScript anpassen (qp_fader.js)

Im JavaScript qp_fader.js können/müssen einige Einstellungen vorgenommen werden.

Diese Manipulationen finden am Anfang des Objektes statt. Der Bereich, ab dem nichts mehr verändert werden muss, ist entsprechend gekennzeichnet.

Die Eigenschaften, die geändert werden können/müssen, sind im einzelnen:

• id
  ID des Fadeholders (fadeHolder_id im Beispiel)
• delay
  Zeitdauer in Sekunden, um zwei Bilder ineinander zu überführen
• wait
  Zeitdauer in Sekunden, die zwischen zwei Überblendungen gewartet werden soll

Browserkompatibilität

Das Script wurde in folgenden Browsern erfolgreich getestet.

• IE 5.5, 6 und 7
• Firefox 1.5 und 2
• Opera 7.54, 8.5 und 9.01
• Netscape 7.01
• Mozilla 1.5

Anregungen und Verbesserungsvorschläge

Anregungen und Verbeserungsvorschläge können gerne hier gepostet werden. Selbstverständlich steht dafür auch das Kontaktformular zur Verfügung.

Foto: aboutpixel.de | Benzo