Need help?

I'm available for remote short term contracting or consultancy work. Please check out my LinkedIn profile for more details on my experience.

Please feel free to use the form below to contact me.




jQuery Tag Cloud Example

This article will take you through the process of creating a simple tag cloud using a jquery plugin, which was written by Adam Groves (https://github.com/addywaddy/jquery.tagcloud.js) - thanks Adam!

Why even bother with a tag cloud? Well, it looks pretty cool if positioned properly, and it's something that people are used to seeing.

The first thing we'll need to start this is the actual plugin file - you can download it here: http://github.com/addywaddy/jquery.tagcloud.js/zipball/master

Once you have that and it's unzipped, you can stick the jquery.tagcloud.js file in your /js folder or where ever you store your JavaScript files, as long as you have access to them.

Alright, we can now include the plugin (note that you will also need the jquery library for this to work).


<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.tagcloud.js" type="text/javascript" charset="utf-8"></script>

Now that that's done, we can start writing some code. This next bit actually initialises the tagcloud plugin and tells it where it should look - in this case it's for the ID 'tagcloud' and all anchor tags under that. It also specifies the size range and the unit type (pixel) - I set it from 10px to 25px so that it's clearly visible.

You can also set the color range, so it's easier to see/read - that's up to you though.


$(document).ready(function() {

  $("#tagcloud a").tagcloud({
     size: {
       start: 10,
       end: 25,
       unit: 'px'
     },
     color: {
       start: "#CDE",
       end: "#FS2"
     }
  });

	
});

That was pretty easy, no? Well, that's probably the hardest part - the next bit is just the tagcloud ID and the anchor tags, which is all html - simples.

The amount of occurrences is specified in the rel tag, which helps it determine how big the text should be.


<div id="tagcloud">
  <a href="#" rel="5">jquery</a>
  <a href="#" rel="15">tag</a>
  <a href="#" rel="2">cloud</a>
</div>

And that's it - it should generate a tag cloud for you. If you have anymore questions, please feel free to add comments and I'll try to answer them ASAP.


jon | April 26, 2011 | Comments (7)

Comments

Demo would be great! I don't see it anywhere on this page
Comment by USA - November 29, 2014 @ 5:35 am
Perhaps the simplest yet very powerful JQuery plugin for Tag Cloud.
Comment by Pravin - June 10, 2014 @ 7:12 am
a problem
Comment by Lily - December 22, 2013 @ 8:05 am
How would i implement this, for example though a text file turned .html, i don't know jquery so if you could show me that would be great :D
Comment by Pomster - May 14, 2012 @ 6:07 am
Thank you for that wonderful script! it perfectly fits to my needs!
Comment by Simon - February 10, 2012 @ 8:22 am
Nice example, thanks for sharing :)
Comment by croatia istria - June 01, 2011 @ 4:09 pm
AFAIC that's the best anwesr so far!
Comment by Liberty - May 06, 2011 @ 1:58 pm

Name (required)
Email (will not be published) (required)
Website

captcha