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.
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:
property | type | description | possible values | default |
---|---|---|---|---|
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 |
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.
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();
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();
Clouds can be rendered spherically by means of the golden angle.
$("#xsphere>li").tsort({order:"rand"}); $("#xsphere").tagcloud({type:"sphere",sizemin:8});
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});
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});
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});
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"});