Roundabout: Coverflow, entertaining, interactive, turntable-like areas.

Roundabout is a jQuery plugin that easily converts unordered lists & other nested HTML structures into entertaining, interactive, turntable-like areas.

It’s ready-to-go straight out of the box, but if you want to get crazy, Roundabout is highly-customizable with an extensive API that allows for some pretty amazing results.

Roundabout requires jQuery (at least version 1.2, successfully tested through version 1.7.2). It works in all major modern browsers and even some of the older, not-so-modern ones.

It’s open source and released under the BSD license, meaning that it’s free to use in your personal or commercial projects.

For a more granular change-log, please follow along on GitHub.

Download: https://github.com/fredleblanc/roundabout

Demonstration:

Plugin homepage: https://github.com/fredleblanc/roundabout

Implementation:

1. FIRST, INCLUDE THE CSS & JQUERY FILES

<!-- CSS -->
<style type="text/css">
   .roundabout-holder {
      list-style: none;
      padding: 0;
      margin: 0;
      height: 5em;
      width: 5em;
   }
   .roundabout-moveable-item {
      height: 4em;
      width: 4em;
      cursor: pointer;
      background-color: #ccc;
      border: 1px solid #999;
   }
   .roundabout-in-focus {
      cursor: auto;
   }
</style>
 
<!-- jQuery files -->
<script src="jquery.js"></script>
<script src="jquery.roundabout.js"></script>

2. ADD YOUR HTML

<!-- A simple unordered list -->
<ul class="roudabout">
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
</ul>

3. NOW, CALL THE SELECTYZE PLUGIN

<script type="text/javascript">
    $(document).ready(function(){
      // Simple call
      $('.roundabout').roundabout();
 
      // Call with options
      $('.roundabout').roundabout({
         btnNext: ".next",
         duration: 2000,
         reflect: true
      });
    });
</script>

Options:

bearing	Float	Default The starting direction in which Roundabout should face relative to the ‘focusBearing’ option.
tilt	Float	Default Slightly alters the calculations of moving elements. In the default “shape” option, it adjusts the apparent tilt. Other shapes will differ.
minZ	Integer	Default 100 The lowest z-index that will be assigned to moving element. This occurs when the moving element is opposite of (that is, 180° away from) the ‘focusBearing’ option.
maxZ	Integer	Default 280 The greatest z-index that will be assigned to a moving element. This occurs when the moving element is at the same bearing as the ‘focusBearing’ option.
minOpacity	Float	Default 0. The lowest opacity that will be assigned to a moving element This occurs when the moving element is opposite of (that is, 180° away from) the “focusBearing” option.
maxOpacity	Float	Default The greatest opacity that will be assigned to moving element. This occurs when the moving element is at the same bearing as the ‘focusBearing’ option.
minScale	Float	Default The lowest size (relative to its starting size) that will be assigned to a moving element This occurs when the moving element is opposite of (that is, 180° away from) the ‘focusBearing’ option.
maxScale	Float	Default The greatest size (relative to its starting size) that will be assigned to moving element. This occurs when the moving element is at the same bearing as the ‘focusBearing’ option
duration	Integer	Default 600 The length of time Roundabout will take to move from one child element being in focus to another (when an animation is triggered). This value acts as the default for Roundabout, but each animation action can be given a custom duration for that animation.
btnNext	String	Default nul AjQuery selector of page elements that, when clicked, will trigger the Roundabout to animate to the next moving element
btnNextCallback	Function	A function that will be called once the animation triggered by a btnNext-related click has finished.
btnPrev	String	Default nul AjQuery selector of page elements that, when clicked, will trigger the Roundabout to animate to the previous moving element.
btnPreyCallback	Function	A function that will be called once the animation triggered by a btnPrev-releated click has finished.
btn ToggleAutoplay	String	Default nul A jQuery selector of page elements that, when clicked, will toggle the Roundabout’s autoplay state (either starting or stopping).
btn StartAutoplay	String	Default nul AQQUERY selector of page elements that, when clicked, will start the Roundabout’s autoplay feature (if it’s currently stopped).
btn StopAutoplay	String	Default nul A jQuery selector of page elements that, when clicked, will stop the Roundabout’s autoplay feature (if it’s current playing)
easing	String	Default swing The easing function to use when animating Roundabout.
clickToFocus	Boolean	Default true When true, Roundabout will bring non-focused moving elements into focus when they’re clicked Otherwise, click events won’t be captured and will be passed through to the moving child elements
clickToFocusCallback	Function	A function that will be called once the clickToFocus animation has completed.
focusBearing	Float	Default The bearing that Roundabout will use as the focus point. All animations that move Roundabout between children will animate the given child element to this bearing.
shape	String	Default : The path that moving elements follow. By default, Roundabout comes with one shape, which is lazySusan. When using Roundabout with the Roundabout Shapes plugin, there are many other shapes available
debug	Boolean	Default false When true, Roundabout will replace the contents of moving elements with information about the moving elements themselves
childSelector	String	Default i- A jQuery selector of child elements within the elements Roundabout is called upon that will become the moving elements within Roundabout By default, Roundabout works on unordered lists, but it can be changed to work with any nested set of child elements.
startingChild	Integer	Default 0 – The child element that will start at the Roundabout’s focusBearing on load. This is a zero-based counter based on the order of markup.
reflect	Boolean	Default false When true, reverses the direction in which Roundabout will operate. By default, next animations will rotate moving elements in a clockwise direction and previous animations will be counterclockwise Using reflect will flip the two.
floatComparisonThréshold	Float	Default 0.001 The maximum distance two values can be from one another to still be considered equal by Roundabout’s standards This prevents JavaScript rounding errors.
autoplay	Boolean	Default When true, Roundabout will automatically advance the moving elements to the next child at regular interval (settable as autoplayDuration).
autoplayInitialDelay	Integer	Default 1000 The length of time (in milliseconds) between animation triggers when a Roundabout’s autoplay is playing.
autoplayDuration	Integer	Default 1000 The length of time (in milliseconds) between animation triggers when a Roundabout’s autoplay is playing.
autoplayPauseOnHover	Boolean	Default false When true, Roundabout will pause autoplay when the user moves the cursor over the Roundabout container.
enableDrag	Boolean	Default false Requires event.drag and event.drop plugins by ThreeDubMedia Allows a user to rotate Roundabout be clicking and dragging the Roundabout area itself.
dropDuration	Integer	Default 600 The length of time (in milliseconds) the animation will take to animate Roundabout to the appropriate child when the Roundabout is “dropped.”
dropEasing	String	Default swing The easing function to use when animating Roundabout after it has been “dropped.”
dropAnimate To	String	Default neares The animation method to use when a dragged Roundabout is “dropped.” Valid values are next, previous, or nearest.
dropCallback	Function	A function that will be called once the dropped animation has completed.
dragAxis	String	Default The axis along which drag events are measured. Valid values are X and y.
dragFactor	Integer	Default Alters the rate at which dragging moves the Roundabout’s moving elements. Higher numbers will cause the moving elements to move less
triggerFocusEvents	Boolean	Default true When true, a focus event will be triggered on the child element that moves into focus when does so.
triggerBlurEvents	Boolean	Default true When true, a blur event will be triggered on the child element that moves out of the focused position when it does so.
responsive	Boolean	Default : When true, attaches a resize event onto the window and will automatically relayout Roundabout’s child elements as the holder element changes size.

Screenshots:

Roundabout: Coverflow, entertaining, interactive, turntable-like areas.

About me