Fred LeBlancs jQuery-Plugin Roundabout bringt in seiner Grundkonfiguration die aus iTunes bekannte Coverflow-Optik, auch Turntable genannt, in jedes simple UL-Element. Es kann mit Textinhalten ebenso gut umgehen wie mit Bildern und bietet fortgeschrittenen Verwendern eine Fülle weiterer Optionen über eine komplette API. Zudem steht das Komplementär-Plugin Roundabout Shapes zur Verfügung, mit der der Turntable-Effekt um weitere Effekte ergänzt werden kann.

Roundabout: Schöner Effekt bei wenig Codeaufwand

Fred LeBlancs Roundabout-Plugin ist kostenlos unter BSD-Lizenz sowohl privat, wie auch kommerziell nutzbar und steht auf GitHub zum freien Download zur Verfügung. Es setzt jQuery ab Version 1.2 voraus und wurde positiv auf Kompatibilität zur aktuellsten Version getestet.

Die Verwendung ist in der Standardeinstellung sehr simpel. Lediglich folgende Snippets sind erforderlich.

Zunächst muss jQuery samt Script eingebunden werden:

1
2

<script src="jquery.js"></script>
<script src="jquery.roundabout.js"></script>

Dann benötigt man ein UL-Element:

1
2
3
4
5

<ul>
   <li></li>
   <li></li>
   <li></li>
</ul>

Zu guter Letzt wird Roundabout auf dieses UL-Element gerichtet:

<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
      $('ul').roundabout();
   });
// ]]></script>

Fertig! Die unsortierte Liste wird jetzt mit dem Turntable-Effekt versehen. Bindet man zusätzlich das Plugin Roundabout Shapes ein, stehen eine ganze Reihe weiterer Effekte zur Verfügung. Auch die Verwendung dieser Effekte ist extrem simpel. Der Funktionsaufruf wird nur um den gewünschten Shape erweitert:

<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
      $('ul').roundabout({
         shape: 'waterWheel'
      });
   });
// ]]></script>

Fred LeBlanc liefert seine PLugins mit einer fantastischen Dokumentation und vielen ansprechenden Demos, etwa dieser via CSS gestylten 3D-Turntable, aus. Wer sich mit Roundabout beschäftigen will, findet auf Freds Website sowohl einen einfachen Einstieg, wie auch exzellente Vertiefungen für anspruchsvollere Einsatzgebiete.

Kurz: Roundabout gehört in die Toolbox eines jeden jQuery-Enthusiasten.

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit fast 30 Jahren in der IT daheim. Seit 2008 schreibt er für Dr. Web, seit 2012 ist er Chefredakteur des Magazins. Man findet ihn auch auf Twitter und Facebook, aktiver ist er allerdings auf Google+.

• Web
|
• Twitter
|
• Facebook
|
• Google+
|
• More Posts (448)