Durch Apple ist der CoverFlow-Effekt bekannt geworden. Inzwischen gibt es etliche praktische JavaScript-Plugins, mit denen du den schicken Slide-Effekt für eine Bildergalerie recht leicht erzeugen kannst. Ich habe einen Demo-Slider mit dem ContentFlow jQuery-Plugin erstellt, und dabei etliche Features und nützliche Addons des Silder-Plugins getestet.

1. Demo-Version des ContentFlow-Sliders

ContentFlow JavaScript Slider
Schau dir den Slider live bei Elmastudio an.

2. Verschiedene Möglichkeiten des Plugins

Mit ContentFlow kannst du die unterschiedlichsten Varianten des CoverFlow-Effekts erzeugen. Mit Hilfe von vorbereiteten Addons kannst du deine Bilder z.B. horizontal oder vertikal sliden, in einem Kreis anordnen, Bilder von einer hinteren Reihe nach vorne sliden lassen und vieles mehr. Eine ganze Demo-Seite mit allen Varianten findest du auf den Addon-Seite des Plugins.

ContentFlow JavaScript Slider

Neben Bildern gibt es auch die Möglichkeit Texte und Links anzuzeigen, oder zwischen einer dunklen und einer hellen Style-Variante des Sliders wählen. Auf der Plugin-Webseite findest du auch eine hilfreiche Liste der Browser-Kompatibilität des Slider-Effekts.

3. Das ContentFlow-Plugin im Einsatz

Die Verwendung des Plugins ist auf der Webseite ausführlich in der »Documentation« beschrieben. Da es aber jede Menge Optionen und Varianten des Plugins gibt, möchte ich kurz die wichtigsten Funktionen vorstellen und zeigen, wie du den CoverFlow-Effekt in WordPress verwenden kannst.

4. ContentFlow in WordPress einbinden

Das Standard-Style des Plugins ist auf einem dunklen Hintergrund zu sehen. Dieser Style hat daher eine helle Schrift und Scrollbar. Nachdem du dir das Plugin auf der Webseite heruntergeladen hast, legst du dir am besten innerhalb deines Theme-Ordners einen »ContentFlow«-Ordner an. Hier fügst du die contentflow.js, die contentflow.css Datei und den Ordner »img« aus dem Download-Ordner ein. Dann fügst du in die header.php folgenden Code ein.

[php]<script language="JavaScript" type="text/javascript" src="<?php bloginfo(‘url’); ?>/DEINPFAD/ContentFlow/contentflow.js"></script>[/php]

Für »DEINPFAD« musst du eventuell noch den Pfad der Ordner angeben, in der dein ContentFlow-Ordner eingefügt hast.

Als nächstes kannst du den HTML-Code für deinen ContentFlow-Slider anlegen. Die einfachste Variante ist folgender Code-Schnipsel.

[php]<div class="ContentFlow">
<div class="loadIndicator"><div class="indicator"></div></div>
<div class="flow">
<img class="item" src="someImageFile.jpg" title="Your_Image_Title"/>
<!– Add as many items as you like. –>
</div>
<div class="globalCaption"></div>
<div class="scrollbar"><div class="slider"><div class="position"></div></div></div>
</div>[/php]

In meinem Demo-Slider habe ich noch eine Unterüberschrift (Caption) unter jedes Bild eingefügt. Dazu kannst du deine Bilder in folgenden Code einfügen.

[php]<div class="item">
<img class="content" src="https://www.elmastudio.de/wp-content/uploads/2010/09/ContentFlow/pics/coverflow-01.png"/><div class="caption">Music Tweetie<br/><a href="http://goo.gl/sKfm">by Elmastudio</a></div>
</div>[/php]

Möchtest du jetzt noch den Style des Sliders anpassen (z.B. Farbe und Schriftart der Caption) kannst du die contentflow.css im ContentFlow-Ordner anpassen.

5. ContentFlow auf einem hellen Hintergrund nutzen

ContentFlow JavaScript Slider

Um den ContentFlow-Slider auch auf einem hellen Hintergrund zu nutzen, kannst du das praktische White-Addon nutzen. Hierzu lädst du dir das Addon auf der Webseite (ganz unten auf der Seite) herunter.

Die ContentFlowAddOn_white.js und die ContentFlowAddOn_white.css Datei fügst du jetzt in den ContentFlow-Ordner deines Themes ein. Auch die Bilder in »img« des Download-Ordners fügst du in den img-Ordner von ContentFlow ein. Jetzt öffnest du noch einmal die header.php Datei deines Themes, und erweiterst den Aufruf der JavaScript-Datei durch das »load white«-Attribut.

[php]<script language="JavaScript" type="text/javascript" src="ContentFlow/contentflow.js" load="white"></script>[/php]

6. Weitere Anpassungen von ContentFlow

Jede Menge weitere Anpassungen, z.B. die Geschwindigkeit des Bild-Wechsels, die Reflexion, die maximale Größe der Bilder, oder die Anzahl der rechts und links angezeigten Bild-Vorschauen kannst du anpassen, indem du ein neues ContentFlow-Objekt in der header.php deines Themes anlegst. Dazu fügst du z.B. folgenden Code-Schnipsel ein.

[php]<script tyle="text/javascript">
var myNewFlow = new ContentFlow(‘contentFlow’, { reflectionHeight: 0 } ) ;
</script>[/php]

Indem du den Wert »reflectionHeight« auf 0 setzt, werden die Bilder ohne Reflexion dargestellt.

Gibst du deinem neuen Element, wie hier im Code-Beispiel den neuen Namen »contentFlow«, musst du jetzt noch deinem CoverFLow HTML-Element mit der css-Klasse »ContentFlow« die ID id=”contentFlow” geben.

ContentFlow JavaScript Slider
Die Slider-Bilder der Demo werden so ohne den Reflexions-Effekt angezeigt.

Du kannst jede Menge weitere Optionen (mit Komma und Leerzeichen getrennt) hinzufügen. Eine Liste möglicher Konfigurationen mit Beschreibungen kannst du dir in der ContentFlowAddon_DEFAULT.js Datei des Plugin Download-Ordners anschauen.

Ich hoffe dich hat diese kleine JavaScript-Plugin Beschreibung inspiriert, und der Beitrag hilft dir bei deiner eigenen Arbeit mit dem ContentFlow-Plugin weiter. Über dein Feedback und deine Tipps zum CoverFlow-Effekt allgemein, und dem ContentFlow-Plugin freue ich mich sehr!