Dynamic AJAX-enabled Tag Cloud Plugin - jquery.tagcloud.js

A lightweight, dynamic, AJAX-enabled jQuery tag cloud plugin that provides a great way to display a list of keywords and topics related to your website. 

With this plugin, you can add a tag cloud to any web page easily and quickly by embedding some simple mark-up into the desired location within the HTML code. 

How to use it:

1. Create an empty container for the tag cloud.

<div id="tagcloud">
  
</div>

2. Download the plugin and load the jquery.tagcloud.js after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.tagcloud.js"></script>

3. Define your tag list in an array of objects as follows.

var tags = [
    {
      tag: "jQuery",
      count: 56
    },{
      tag: "mobile",
      count :12
    },{
      tag: "JavaScript",
      count :24
    },{
      tag: "CSS",
      count :38
    },{
      tag: "HTML",
      count :44
    },{
      tag: "Ruby",
      count :9
    },{
      tag: "Python",
      count :23
    },{
      tag: "Com",
      count :12
    }
];

4. Initialize the plugin to generate a default tag cloud.

$("#tagcloud").tagCloud(tags,{
  // options here
});

5. Apply your own CSS styles to the tag links.

.tagcloudlink {
  /* ... */
}

6. Fetch your tag list via AJAX requests.

$.ajax('/path/to/tag/list/').done(function(response)) {
  $("#tagcloud").tagCloud(response.tags, {
    // options here
  });
});

7. Handle click event.

$("#tagcloud").tagCloud(tags,{
  click: function(tag) {
    // do something
  },
});

8. Customize the tag sort function.

$("#tagcloud").tagCloud(tags,{
  sort: function (a, b) {return a.tag < b.tag ? -1 : (a.tag == b.tag ? 0 : 1)},
});

9. Override the default tag template. Default: false.

$("#tagcloud").tagCloud(tags,{
  template: '<a href="{href}" class="tagcloudlink" style="font-size: {size}em">{tag}<\/a>'
});

10. Set the max font size (em). Default: 4em.

$("#tagcloud").tagCloud(tags,{
  maxFontSize: 2,
});

11. Set the min/max count values.

$("#tagcloud").tagCloud(tags,{
  min: -1,
  max: -1,
});

---

This awesome jQuery plugin is developed by timgws. For more Advanced Usages, please check the demo page or visit the official website.