TagCloud will convert any ordered or unordered list to a tagcloud.
The size and color depend on the list elements value property or, if no value is set, the elements index.

You can download TagCloud at http://plugins.jquery.com/project/TagCloud since that will always have the latest release. This is also the place where you can report bugs or request new features.

The examples below should help getting you on your way.

usage

The first parse in the TagCloud function can either be nothing...

$("ul").tagcloud();

or a 'settings' object.

$("ul").tagcloud({height:300});

Change default settings globally like so:

$.tagcloud.defaults.sizemin = 8;

TagCloud has eight possible settings:

propertytypedescriptionpossible valuesdefault
height Integer The height of the tagcloud integers, null or "auto" null
type String the visual representation of the tagcloud "cloud", "list" or "sphere" "cloud"
sizemax Integer maximum font-size integers 20
sizemin Integer minimum font-size integers 10
colormax String maximum color a hexadecimal with a length of either 3 or 6 "00F"
colormin String minimum color a hexadecimal with a length of either 3 or 6. "B4D2FF"
seed Integer The randomseed that is used to calculate the positions. A null value will cause a random randomseed. Works only with type=="cloud". integer or null null
power Float The power with wich the elements radius is calculated. Works only with type=="sphere". a floating point greater than 0 .5

examples

The following examples use a list of tags taken from http://del.icio.us/tag/ (lists are set to a height and hidden overflow so not to waste space).
Using jQuery I've added a value to the list elements to create more smaller elements. If you do not provide a value for the list element the value will be its index number.
In some of these examples I've made use of the TinySort plugin.

default

If no properties are specified the tagcloud will default to a height that corresponds with the with of the list and the number of list elements.

$("#xdef").tagcloud();

list

Tagclouds can also be displayed as lists. In this example the list is sorted alfabetically after the tagcloud list is created.

$("#xlist").tagcloud({type:"list",sizemin:8}).find("li").tsort();

sphere

Clouds can be rendered spherically by means of the golden angle.

$("#xsphere>li").tsort({order:"rand"});
$("#xsphere").tagcloud({type:"sphere",sizemin:8});

power

The radius of the elements in the spherical cloud can be altered by setting the power property.

$("#xpower").tagcloud({type:"sphere",sizemin:8,sizemax:26,power:.3});

A value lower than 1 creates a sperical effect, a value higher than 1 creates a tubelike effect.

$("#xpowerbig>li").tsort({attr:"value"});
$("#xpowerbig").tagcloud({type:"sphere",sizemin:3,sizemax:26,power:1.3});

seed

The default tagcloud will position randomly. TagCloud has a build in random number generator (Park-Miller) that enables you to set the random seed. If you set the seed TagCloud will always generate the same random positions. If this sounds like gibberish to you just compare this example with the 'default' one.

$("#xseed").tagcloud({seed:23});

size and height

You can set the minimum and maximum font-size with the properties sizemin and sizemax. Different font-sizes mean different cloud sizes so there's also the possibility to set its height (simply use css to set the width).

$("#xsize").tagcloud({sizemin:1,sizemax:12,height:150});

colors

Like font-size, you can also set the minimum and maximum color using colormin and colormax. The value must be a hexadecimal value with a length of either 3 or 6.

$("#xcolor").tagcloud({colormin:"d88",colormax:"0a0"});