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.

About MapTooltip

In a project I’m working on there’s a need to have tooltips on polylines. I have tried to find simple ways of doing this but haven’t been able to find any. After researching this and eventually coming up with a solution I decided to package it into a small library so that I could share it with fellow Google Maps developers.

Reference

The constructor creates an object of the type MapTooltip. It takes two required arguments and one optional.

MapTooltip(reference:object, tooltip:string, opts?:object)

reference

The first argument, reference, is a reference to the overlay that you will attach the tooltip to, for example a GPolyline.

tooltip

The second argument, tooltip, is a string containing what will appear inside of the tooltip. You can either provide just a plain text string or some HTML.

opts

The third argument which is optional, opts, is an object literal that contains all options on how the tooltip will look and behave. It can have the following settings:

• width
  The width of the tooltip, ex: “100px”
• padding
  The padding around the content of the tooltip
  For a 3px padding: “3px”
  For a 2px top/bottom padding and a 5px left/right padding: “2px 5px”
• backgroundColor
  Backgroundcolor of the tooltip, ex: “#ff9″
• color
  The color of the text inside the tooltip, ex: “#000″
• border
  The styling of the border of the tooltip, ex: “1px solid green”
• fontSize
  The size of the text inside the tooltip, ex: “1em”
• offsetX
  The horizontal distance in pixels from the pointer to the tooltip, ex “10″
• offsetY
  The vertical distance in pixels from the pointer to the tooltip, ex: “10″

It might for example look like this:

var options = {
    'width': '250px',
    'border': '3px dotted #00f'
}

Using MapTooltip

To use MapTooltip is pretty easy. First add a Google Map as you normally would. Then follow the steps below to attach a tooltip to an object in the map.

1. Load the library

Import the library to the web page with the script tag.

<script src="http://maptooltip.googlecode.com/files/mapTooltip.js" type="text/javascript"></script>

2. Attach appropriate events

Add a mouseover event to the object on your map that you wish to have a tooltip. You will also have to add a mouseout event that removes the tooltip.

// Attach mouseover event to a polyline that will trigger the tooltip
GEvent.addListener(polyline, 'mouseover', function() {
	this.overlay = new MapTooltip(this, 'This is a polyline');
	map.addOverlay(this.overlay);
	// Attach mousout event to the polyline that will delete the tooltip
	GEvent.addListener(polyline, 'mouseout', function() {
		map.removeOverlay(this.overlay);
	});
});

That’s it. Be sure to check out the live demo to see it in action. The demo includes tooltips attached to markers, polylines and polygons. One of the tooltip is styled in a different way using the opts parameter.

Check out the live demo

Copyright

MapTooltip is released under the MIT License and is free for any use.

Downloads

mapTooltip.js

Acknowledgments

MapTooltip is heavily influenced by the article Custom Info Window / Popup for Google Maps, or Loving the GOverlay.

Known bugs

If you import the Google Maps API with ver=2.x it’s not going to work as expected since it seems that it doesn’t handle mouseover events on GMap2 when the pointer is over an GOverlay quite the same way as in previous versions. I don’t know if this is a temporary glitch or if it’s supposed to work this way in the future.

Update [2009-04-11]: In the latest release of the Google Maps API the above mentioned problems currently occur. I will try to find a way around, but until then you can stick to version 2.151 to make it work correctly.

For ideas on this or for other bugs you might encounter, please contact me either in the comments or through the Contact page.