jDoeCloud

jDoeCloud a center weighted jQuery tag cloud plugin.


So why make another tag cloud?
I was looking for a good looking tag/word cloud plugin and noticed that all the plugins basically looks the same with just a list of the words line by line. What I wanted was a center weighted word/tag cloud that's a little bit more fancy looking.

This is the result:

The code to generate the cloud is pretty simple. Consider this list:
<ul class="mycloud">
    <li title="10">large tag</li>
    <li title="7">avarage</li>
    <li title="3">small</li>
</ul>

As you can see, in this example I use the "title"-attribute as the "score" (default). The list should always be sorted by the largest score first.

We generate the wordcloud by running the following code.
$(function(){
    $('.mycloud').doecloud();
});

There is also a bunch of settings:

  • itemSelector: What items should be selected. Default " > li".
  • valueAttribute: Attribute that represent the "score". Default "title".
  • width: Width of cloud in pixels. Default "0" meaning "automatic".
  • height: Height of cloud in pixels. Default "0" meaning "automatic".
  • maxFontSize: Font size of largest tag.
  • minFontSize: Font size of smallest tag.
  • maxCount: Maximum number of tags shown. Default 100. Warning; increasing this value can cause the cloud to become very slow to generate.
  • promote: Default value "true". (not used yet)
  • spacing: spacing in pixels between items. 
Download
jDoeCloud.v1.0.zip 2012-01-24


3 comments:

  1. Wow.
    This is EXACTLY what I was trying to write myself, but could not get to work.
    Thank you very much.

    ReplyDelete
  2. Just picked this one up, unfortunately it does not behave the way it should in my case. I have anchor links being styled via CSS (through classes like .tag-weight-5, .tag-weight-10 etc.), and about 10 Tags, and it is far from looking like a cloud plus your script calculates the height too small and sets the first tags beginning at about top:100px, leaving a gap at the top, so half the tags get cut off. However, this might just be an old script not working well with today’s CSS? Thanks anyway for your approach, there is none that simple and with the same functionality ;).

    ReplyDelete
  3. Tag cloud) I wonder if Instagram could be called a tag cloud))
    And here's a real cool cloud server data room services

    ReplyDelete