Slideshow (JS)

Hier wird der Ansatz einer Slideshow vorgestellt. Die Bilder beginnen sich zu bewegen, wenn der Mauszeiger über das Slideelement geführt wird. Befindet er sich auf der rechten Seite der Mitte, bewegen sich die Bilder auf den Anfang zu. Auf der linken Seite entsprechend dem Ende entgegen.

Weiterhin passt sich die Geschwindigkeit an die Position des Mauszeigers gemessen an der Mitte des Slideelements an. Je näher sich der Cursor an den Rändern befindet, desto schneller bewegen sich die Slideshow.

Ebenso können Bilder individuell verlinkt werden. Dazu werden die benötigten Parameter bequem beim Erstellen des Objekts übergeben.

• JavaScript im onload-Event
• JavaScript im body-Bereich

Beispiel

Integration in die Seite

Zunächst muss im head-Bereich des Dokuments das JavaScript eingebunden werden.

<script src="slideshow.js" type="text/javascript"></script>

Slide-Objekt erstellen

Im onload-Event des Dokuments wird ein Slide-Objekt erstellt. Das kann im externen JS-File geschehen oder im Dokument selbst. Zu beachten ist hierbei lediglich, dass relative Pfade immer an den Speicherort angepasst werden müssen. D.h. immer ausgehend von der Datei, in die das Script eingebunden wird (JavaScript im onload-Event).

Es gibt aber auch die Möglichkeit, dass Slideobjekt nicht im onload-Event zu instanziieren (JavaScript im Body). Stattdessen wird das Script im body-Bereich des Dokumentes mit Hilfe des script-Tags eingebunden (siehe oben). Hierbei ist zu beachten, die Reihenfolge einzuhalten:

1. erst das HTML-Element (Slideholder)
2. anschliessend das Script einbinden.

Das Erstellen eins Slide-Objektes folgt immer folgender Syntax:

objSlider = new qpSlider(string strID, boolean blnHREF, object objClasses, array arrBilder);

In diesem Dokument wurde die Variante gewählt, das Objekt zu instanziieren, nachdem das HTML-Element eingebunden wurde.

objSlider = new qpSlider( "slideHolder",                                    //  ID für Sliderholder
                           true,                                            //  true - Bilder verlinken, false - nur Bilder
                           {classImg: "slideImg", classHref: "slideLink"},  //  CSS-Klassennamen (Bilder, Links)
                           //  Bilder- u. Linkarray
                           [["blume_start.jpg", {}],
                            ["blume_01.jpg", {url: "http:// www.quaese.de", text: "Quaese"}],
                            ["blume_02.jpg", {url: "http:// www.tutorials.de", text: "tutorials.de", target: "_blank"}],
                            ["blume_ende.jpg", {}]
                           ]
                         );

Im Folgenden werden die Parameter näher erklärt.

1. Parameter: HTML-Element

Der erste Parameter erwartet einen String, der die ID des Elements enthält, welches die Slideshow aufnehmen soll (Slideholder). Dieses Element muss eine Breite besitzen. Dabei ist es unerheblich, ob es sich um eine feste (px) oder dynamische (%, em) Grössenangabe handelt.

Über diese ID kann auch ein CSS-Selektor erstellt werden, der dann zum Formatieren des Slideholders dient.

<div id="slideHolder"></div>
          

2. Parameter: Bildverlinkung

Der zweite Parameter erwartet einen Wahrheitswert (true/false). Dieser gibt an, ob die Bilder mit Links versehen werden sollen (true) oder nicht (false).

3. Parameter: CSS-Klassen

Das dritte Argument erwartet ein Objekt. Falls gewünscht, werden dort die CSS-Klassennamen für die Bildobjekte und die Links innerhalb des Slideobjekts angegeben. Damit können eigene Formatierungen und damit individuelle Effekte eingestellt werden.
Soll keine Klasse zugewiesen werden, wird der Klassenstring einfach leer gelassen. Damit werden die Standardformatierungen übernommen.

4. Parameter: Bildarray und Linkobjekte

Der vierte und letzte Parameter ist ein mehrdimensionales Array, das die Bildquellen (mit Pfad) sowie die zugehörigen Linkobjekte aufnimmt.
Jede Komponente repräsentiert dabei ein Bild. Auf dem Platz mit dem Index 1 befindet sich die Bildquelle inkl. Pfad, auf Index 2 das Linkobjekt zum Bild. Das Objekt kennt drei Eigenschaften:
- url: nimmt die URL des Links auf
- text: Linktext
- target: Zielfenster (leer = gleiches Fenster)

Weiterführende Konfiguration

Versierte Anwender haben die Möglichkeit, das Slide-Element noch individueller anzupassen. Grundkenntnisse in JavaScript und CSS sind dabei von Vorteil.

Die folgenden Einstellungen werden direkt im Slideobjekt vorgenommen. Dieses befindet sich am Anfang der JS-Datei (slideshow.js) und sieht wie folgt aus:

function qpSlider(strID, blnHref, objClasses, arrBilder){
  //  ... Code ...
}

Innenabstände zum Slideholder

Über die Eigenschaft this.SliderPadding können die Abstände des Slideholders zum Slideelement eingestellt werden. Die Wertzuweisung folgt dabei der CSS-Syntax.

Geschwindigkeit der Slideshow

Um die Geschwindigkeit des der Slideshow zu beeinflussen, existieren unterschiedliche Möglichkeiten.

• this.intStepWidth
  Schrittweite beim Verschieben des Slideelements verändern (grösser = schneller)
• this.intMilliSecs
  Verzögerungszeit beim Verschieben verändern (kleiner = schneller)

Um die beste Einstellung zu erreichen, empfielt es sich, etwas zu Experimentieren.

Rastereinstellung

Über die Rastereinstellung (this.intRaster) kann die Anzahl der Bereiche, in denen sich die Geschwindigkeit ändert eingestellt werden. Eine Erhöhung dieses Wertes hat zum einen eine feinere Unterteilung zur Folge, zum anderen erhöht sich die Geschwindigkeit. Das liegt darin begründet, dass sich die Geschwindigkeit linear mit der Anzahl der Teilraster erhöht.

Verwendete CSS-Klassen

Der Vollständigkeit wegen, werden hier noch die CSS-Klassen gezeigt, die im obigen Beispiel verwendet wurden.

#slideHolder{ width: 400px;
              padding: 10px 0;
              border: 1px solid #ccc;
              background: #efefe0;}

img.slideImg{ border: 1px solid #ccc;
              padding: 3px 3px;
              margin: 0 0;
              background: #fff;}
a.slideLink{ border: 0px solid #f00;
             padding: 0 3px;}

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

Kommentare

Kommentar von Quaese

Kommentar von Marion