tx3TagCloud – very simple tag cloud jQuery plugin

If you need to add tags cloud easy, try the tx3TagCloud. It’s a small tag cloud jQuery plugin for web projects.

A small and easy to use tag cloud jQuery plugin

Yet another, very simple and small solution to creating tag clouds for web projects. This piece of code is a simple lightweight jQuery plugin, which transforms HTML unordered list into a nice looking tag cloud widget. Easy to adapt on any website or blog.

tx3TagCloud - a simple tag cloud jQuery plugin
tx3TagCloud – a simple tag cloud jQuery plugin


Include jQuery and the plugin files, and generate HTML list with tags. For example:

<ul id="tagcloud">
  <li data-weight="50"><a href="#">HTML5</a></li>
  <li data-weight="50"><a href="#">PHP</a></li>
  <li data-weight="24"><a href="#">Sharepoint</a></li>
  <li data-weight="28"><a href="#">Silverlight</a></li>
  <li data-weight="32"><a href="#">CSS3</a></li>
  <li data-weight="38"><a href="#">ASP.NET</a></li>
  <li data-weight="60"><a href="#">.NET</a></li>
  <li data-weight="38"><a href="#">C#</a></li>
  <li data-weight="27"><a href="#">VB.NET</a></li>
  <li data-weight="47"><a href="#">MySql</a></li>
  <li data-weight="30"><a href="#">SQL 2008</a> </li>
  <li data-weight="37"><a href="#">html</a></li>
  <li data-weight="60"><a href="#">jQuery</a></li>
  <li data-weight="40"><a href="#">WCF</a></li>
  <li data-weight="38"><a href="#">C#</a></li>
  <li data-weight="47"><a href="#">VB.NET</a></li>
  <li data-weight="20"><a href="#">Visual Studio</a></li>

Please pay attention on the “data-weightattribute. It defines how “heavy” the particular tag should be.

Now run the plugin with simple JS code, for example:

$(document).ready(function() {
    // default multiplier is "1"
    multiplier: 5

Done! And the appearance of the tag cloud can be easily adjusted with CSS.

License: “Beer-ware”





See also:

TagCanvas – HTML5 canvas tag cloud