The best place to find jQuery plugins !

Welcome on myjqueryplugins,

the best jquery plugins library !

Add your jQuery plugin.

Connect it with GitHub and create your plugin Homepage.

Make known your plugin to the community or link it to your own website !

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

Plugin rate :

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.

Implementation: 

1. FIRST, INCLUDE THE CSS & JQUERY FILES

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!-- 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 !

1
2
3
4
5
6
7
8
<!-- A simple unordered list -->
<ul class="roudabout">
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
</ul>

3. NOW, CALL THE SELECTYZE PLUGIN

1
2
3
4
5
6
7
8
9
10
11
12
13
<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 : 0.0 - The starting direction in which Roundabout should face relative to the 'focusBearing' option.
tilt
Float
Default : 0.0 - 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 a 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.4 - 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 : 1.0 - The greatest opacity that will be assigned to a moving element. This occurs when the moving element is at the same bearing as the 'focusBearing' option.
minScale
Float
Default : 0.4 - 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 : 1.0 - The greatest size (relative to its starting size) that will be assigned to a 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 : null - A jQuery 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 : null - A jQuery selector of page elements that, when clicked, will trigger the Roundabout to animate to the previous moving element.
btnPrevCallback
Function
A function that will be called once the animation triggered by a btnPrev-releated click has finished.
btnToggleAutoplay
String
Default : null - A jQuery selector of page elements that, when clicked, will toggle the Roundabout’s autoplay state (either starting or stopping).
btnStartAutoplay
String
Default : null - A jQuery selector of page elements that, when clicked, will start the Roundabout’s autoplay feature (if it’s currently stopped).
btnStopAutoplay
String
Default : null - 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 : 0.0 - 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 : li - 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 : li - 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.
floatComparisonThreshold
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 : false - When true, Roundabout will automatically advance the moving elements to the next child at a 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.”
dropAnimateTo
String
Default : nearest - 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 : x - The axis along which drag events are measured. Valid values are x and y.
dragFactor
Integer
Default : 4 - 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 it 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 : false - When true, attaches a resize event onto the window and will automatically relayout Roundabout’s child elements as the holder element changes size.
Screenshots
  • Rounabout plugin Homepage

  • 3D Effect !

  • Move Things Around Other Things

  • Roudabout used for clock !

Comments

Buen día.

Compañero mucho gusto, mi nombre es Jose David Nieto y me gustaria que me colaboras con el Html completo de Roudabout, x q con las indicaciones quedas en el inbox no me quiere dar...

Excelente Roudabout muy buena forma de slider....

Add new comment

To prevent automated spam submissions leave this field empty.

Plain text

  • Lines and paragraphs break automatically.
  • Allowed HTML tags: <p> <br> <br />

Informations

jQuery
>= 1.3
Current version
2.4.2
Browsers compatibility
Google ChromeIE 7IE 8IE 9Mozilla FirefoxOperaSafari
Fork it on github Comments [1]