Tinyrotator v0.3

This is a demo page. Home page.

Tinyrotator is a compact image rotator that's dead easy to embed in your own page and to style the way you want.

It was built using the jQuery library and is licensed under both MIT and GPL licenses.

The HTML

To create a tinyrotator, the base is some simple HTML. A unordered list of links with images. The list need to have the class "tinyrotator". The images are thumbnails and the links lead to a larger image.

<ul class="tinyrotator">
  <li>
    <a href="image1.jpg">
      <img src="thumbnail1.jpg" alt="" />
    </a>
  </li>
  <li>
    <a href="image1.jpg">
      <img src="thumbnail2.jpg" alt="" />
    </a>
  </li>
  <li>
    <a href="image3.jpg">
      <img src="thumbnail3.jpg" alt="" />
    </a>
  </li>
</ul>

Basic usage

Here's how to initialize the plugin without passing any options.

$(document).ready(function() {
  $('.tinyrotator').tinyrotator();
});

Example with options

You can change how fast the images rotates and the speed of the fade effect by using the options interval and fade.

Options

interval: The time in millisecond that each image will be displayed Default value is 5000.
fade: The speed of the fade, possible values are: 'fast', 'slow', 'medium', 'none' or the time in milliseconds Default value is 'medium'

The code snippet below show how to set the tinyrotator to change image every 2 seconds and to do a 'fast' fade.

$(document).ready(function() {
  $('.tinyrotator').tinyrotator({
	interval: 2000,
	fade: 'fast'
  });
});

Tinyrotator is created by Gabriel Svennerberg at In usability we trust.

Image Credit: IstockPhoto