jQCloud

No conf

Default configuration, no special parameters for words.

var words = [
  {text: "Lorem", weight: 13},
  {text: "Ipsum", weight: 10.5},
  {text: "Dolor", weight: 9.4},
  {text: "Sit", weight: 8},
  {text: "Amet", weight: 6.2},
  {text: "Consectetur", weight: 5},
  {text: "Adipiscing", weight: 5},
  /* ... */
];

$('#demo').jQCloud(words);

Links

The three biggest words have links.

var words = [
  {text: "Lorem", weight: 13, link: 'http://github.com/mistic100/jQCloud'},
  {text: "Ipsum", weight: 10.5, link: 'http://www.strangeplanet.fr'},
  {text: "Dolor", weight: 9.4, link: 'http://piwigo.org'},
  /* ... */
];

$('#demo').jQCloud(words);

Shape

This cloud is rectangular!

$('#demo').jQCloud(words, {
  shape: 'rectangular'
});

Automatic size

The container is given a width of 80% and is automatically updated when resized.

<style>
#demo {
  width:80%;
}
</style>

<script>
$('#demo').jQCloud(words, {
  autoResize: true
});
</script>

Custom colors & size via JS

A custom array of colors is given to the plugin in addition to min and max font size.

$('#demo').jQCloud(words, {
  classPattern: null,
  colors: ["#800026", "#bd0026", "#e31a1c", "#fc4e2a", "#fd8d3c", "#feb24c", "#fed976", "#ffeda0", "#ffffcc"],
  fontSize: {
    from: 0.1,
    to: 0.02
  }
});

Event handlers

A click event is attached to the first word.

var words = [
  {text: "Lorem", weight: 13, handlers: {
    click: function() {
      alert('You clicked the word !');
    }
  }},
  {text: "Ipsum", weight: 10.5},
  {text: "Dolor", weight: 9.4},
  /* ... */
];

$('#demo').jQCloud(words);

Update

Click the "Update" button to remove some words from the list, with non null delay.

$('#demo').jQCloud(words, {
  delay: 50
});
$('#update-demo').on('click', function() {
  words.splice(-5);
  $('#demo').jQCloud('update', words);
});

Examples

Basic