In usability we trust

UX and all things web

Tinyrotator – a tiny image rotator plugin for jQuery

For a project I worked on recently I created a small and simple image rotator plugin for jQuery. It’s dead easy to embed in your own page and to style the way you want using regular CSS.

The plugin is released under both MIT and GPL licenses so you can use it any way you want in both personal and commercial projects.

How to use it

First of all you need to include the tinyrotator.css and jquery.tinyrotator.js files in your document. The stylesheet will give you a standard design but you can easily change it by altering the CSS file. Since it’s a jQuery plugin you will of course also have to include the jQuery library.

The base of the plugin is an unordered list of images with links to bigger images. The list should have the class="tinyrotator" to get the correct style from the stylesheet. You can of course use a different class (or id) if you create your own custom CSS.

<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>
</ul>

The plugin is then activated by calling the tinyrotator method on the list like this:

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

This will produce a standard image rotator with the images from your list. The plugin will show the bigger versions of the images above the thumbnails and automatically cycle through them. If the user clicks a thumbnail, that image will be shown and the plugin will stop rotating.

A standard version of Tinyrotator

Graceful degradation

If for some reason the plugin won’t initialize (user has JavaScript turned of, jQuery din’t load, etc.) a clickable list of the images will still be visible and the user will be able to click them to watch their bigger counterparts. They will however be opened on a blank page.

Tinyrotator with JavaScript turned off

Options

The plugin has two options with which you can set the time each image should be visible and how fast the transition (a fade) between two images should be.

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’

Here’s an example where both the interval and the fade speed has a faster pace.

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

Be sure to check out the demo to see the plugin in action. Also check out the source of the demo page to see how to use it.

Feedback

I hope you’ll find the plugin useful. If you have any suggestions on how the plugin could be improved, please let me know in the comments. Also if you use it on a project it’s always fun if you let me know.

4 Comments

  1. Hello. Thanks for this nice and compact plugin, I used it on http://www.surimmo.fr (it’s a french real estate crawler).

  2. Hello. Sorry, the “View Demo” Link runs into a dead end info -> “This page is missing”

Leave a Reply

Your email address will not be published.

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>