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

Usage

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

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() {
  $("#tagcloud").tx3TagCloud({
    // default multiplier is "1"
    multiplier: 5
  });
});

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

License: “Beer-ware”

Demo:

http://tuxes3.github.io/tx3TagCloud

GitHub:

https://github.com/Tuxes3/tx3TagCloud

See also:

TagCanvas – HTML5 canvas tag cloud

Enjoy!

Share:Share on Facebook2Share on Google+0Tweet about this on TwitterShare on LinkedIn2Pin on Pinterest2