Lightweight jQuery Tag Cloud Plugin - Hotag

File Size: 128 KB
Views Total: 2709
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Lightweight jQuery Tag Cloud Plugin - Hotag

Hotag is a simple lightweight jQuery plugin that generate a tag cloud from an array of tags for presenting your popular posts. More popular tags would be bigger than less popular ones.

How to use it:

1. Load the jQuery hotag plugin after jQuery library as usual.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="src/hotag.js"></script>

2. Create a container for the tag cloud.

<div id="demo" class="container">
</div>

3. Create an array of tags with counts, URLs and names,

var tags = [
{
  "counts":1,
  "tag":"balabala",
  "href":"https://www.jqueryscript.net"
},

{
  "counts":1,
  "tag":"liber"
},

{
  "counts":1,
  "tag":"ranking"
},

{
  "counts":2,
  "tag":"slash"
},

{
  "counts":2,
  "tag":"slide"
},

{
  "counts":1,
  "tag":"tag"
},

{
   ...
}

];

4. Initialize the plugin to generate a tag cloud.

$("#demo").hotag({
tags: tags
});

5. All the default settings.

$("#demo").hotag({
tags: [],
keyOfName: 'tag',
keyOfCounts: 'counts',
keyOfHref: 'href',
containerClass: 'hotag-container',
minFontByPercent: 100,
maxFontByPercent: 230
});

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