JavaScript-Slider mit einem CoverFlow-Effekt erstellen

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.

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

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.

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

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.

<div class="item">
<img class="content" src="http://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>

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.

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

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.

<script tyle="text/javascript">
            var myNewFlow = new ContentFlow('contentFlow', { reflectionHeight: 0 } ) ;
</script>

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!

14 Kommentare

  1. Der Artikel ist klasse! Ich werde den Slider selbst zwar nicht benutzen, aber ich weiß genau etliche werden es – nach dem Lesen dieses Artikels … ohne ein Kommentar mit Danke etc. zu setzen – Für diese Leute danke ich nun stellvertretend und besuche auch morgen wieder (wie jeden Tag ^^ ) Eure Seite!!! Weiter so :D

    • Hallo Olaf,

      vielen herzlichen Dank für dein tolles Feedback :-) Es freut uns riesig, dass dir die Blog-Artikel so gut gefallen und du immer gerne vorbei schaust :-)

      Beste Grüße und einen schönen Abend,
      Ellen

  2. Hallo Ellen,

    das sieht ja echt super aus. Gefällt mir gut.

    Ich werde mir bald mal die zeit nehmen und das ausprobieren.

    Vielen Dank für Tipp
    Tina

    • Hallo Tina,

      vielen Dank für dein Feedback! Es freut mich, dass dir der Slider gefällt. Ja, ich finde für bestimmte Inhalte passt dieser Effekt wirklich super und auch sieht schick aus :-)

      Beste Grüße,
      Ellen

  3. Herzlichen Dank für die Vorstellung der Sliders. Ich überlege gerade, ob ich ihn für ein aktuelles Foto-Projekt einsetze.

    • Hallo Jan,

      vielen Dank für dein Feedback, freut mich, dass dir der das vorgestellte Slider-Plugin gefällt :-) Ich habe den Slider selbst neulich für ein Kundenprojekt eingesetzt :-)

      Viele Grüße,
      Ellen

  4. genau danach habe ich gesucht, ich werde mich die tage dran setzen und das ganze in meinem onlineshop einbauen.super erklärung, danke ! ! !
    werd nun auch oft vorbei schauen :-)

    • Hallo Ronny,

      vielen Dank für dein tolles Feedback, es freut mich, dass du den Plugin-Tipp so gut nutzen kannst. Und wenn du öfters mal hier vorbeischauen möchtest, freuen wir uns natürlich auch sehr :-)

      Viele Grüße,
      Ellen

  5. Hi Ellen!

    1000Dank für die tolle Beschreibung. Habe es probiert und es funktioniert prima. Daher Danke für´s “VORMACHEN”:-) Könnte ich evtl. noch eine kleine Frage loswerden?!
    Nutze ein WordPress Theme twentyeleven und würde gern den Slider nicht in den header bauen sondern eine Seite später (nennt sich selections).Wohin muß ich den Code dann schreiben?(inkl. javascript tag) Hast DU ein theme in dem sich so ein slider bereits befindet und/oder gut administrierbar ist. Würde nämlich gern den visuellen Content smart verwalten können und nicht immer in den Code “reinfummeln”. Das wird so unübersichtlich finde ich auf die Dauer.
    Naja, wäre klasse wenn Du noch ein Feedback dazu hättest, ansonsten weiter so. Ich mag Euer Design sehr, gerade da es so übersichtlich & ästhetisch ist. Well done!
    Ciao & liebe Grüße Yvonne

  6. Vielen Dank für die tolle Hilfestellung.

    Auch wenn der Beitrag schon nen bischen angestaubt ist, es funktioniert immer noch!
    Hab mehrere Stunden gesucht, bis ich ne vernünftige Lösung hatte. Das WordPress-Plugin kostet jedoch 39 $ und bringt vermutlich kaum größere Funktionalität als das vorgstellte Code-Snippet.

    • Was mir gerade noch auffällt, unter punkt 6 hat sich nen Fehler im Quelltext eingeschlichen, in Zeile 1 steht tyle, statt type, sofern das noch 5 Jahren noch ausgebessert werden sollte ;)

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *