rotator

View a demo here

'rotator' is a cleverly named jQuery plugin that .... rotates stuff. It's a very simple way to rotate information on a page. It requires that you include jQuery and the rotator.js file.

Usage

In order to use rotator you will need a parent element that acts as a wrapper for the content that you want to rotate. Within the wrapper you will place the content within elements sharing a common class. You can specify the selector for the wrapper as well as the selectors for the child elements.

Options

Speed

The speed option is the frequency at which the rotator will run measured in milliseconds.

options.speed = 3000; // New content will be rotated every 3 seconds

Transition Speed

The transition speed is rate at which the content will fade in and out.

options.transition_speed = 500; // Content will fade in and fade out for the duration of .5 seconds

Sub Selector

The sub selector is the selector you'd like to use for the child elements containing your rotate content.

options.sub_selector = ".mydiv"

Example

HTML

<div id="rotate">
  <div class="rotate"><h1>div.rotate 1</h1></div>
  <div class="rotate"><h1>div.rotate 2</h1></div>
  <div class="rotate"><h1>div.rotate 3</h1></div>
  <div class="rotate"><h1>div.rotate 4</h1></div>
</div>

Javascript

Be sure to include jQuery and rotator.js

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="rotator.js"></script>

Now you can call rotator on the parent element of your choice. In this case the parent element has an "id=rotate".

Basic Usage (no options)

<script type="text/javascript">
$(document).ready(function(){
  $("#rotate").rotator();
});
</script>

Usage with options

<script type="text/javascript">
$(document).ready(function(){
  options = {
    "speed" : 3000, // Rotate every 3 seconds
    "transition_speed" : 500, // Fade in/out has a .5 second duration
    "sub_selector" : ".rotate"
  };
  $("#rotate").rotator(options);
});
</script>