Simple Tag Cloud In JavaScript - jQuery Tagcloud.js

Simple Tag Cloud In JavaScript - jQuery Tagcloud.js

Tagcloud.js is a small and simple JavaScript library for jQuery that generates a customizable tag cloud (word cloud, phrase cloud) from a group of text with different priorities, gradient colors and font sizes.

1. Insert your tag (word, phrase) links to the tagcloud container and specify the priority using the rel attribute as these:

<div id="tagcloud">
  <a href="#" rel='4'><span>C++<sup>4</sup></span></a>
  <a href="#" rel='2'><span>Java<sup>2</sup></span></a>
  <a href="#" rel='5'><span>Python<sup>5</sup></span></a>
  <a href="#" rel='5'><span>javascript<sup>5</sup></span></a>
  <a href="#" rel='4'><span>react<sup>4</sup></span></a>
  ...
</div>

3. Generate a default tag cloud on the webpage.

$(function () {
  $('#tagcloud a').tagcloud();
});

4. Change the default min/max font sizes.

$(function () {
  $('#tagcloud a').tagcloud({
    size: {
      start: 20,
      end: 30,
      unit: "px"
    },
  });
});

5. Change the default range of position-dependent colors for the color gradient.

$(function () {
  $('#tagcloud a').tagcloud({
    color: {
      start: '#1c5866',
      end: '#661c49'
    }
  });
});

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

  • Publication date: 25.04.2018
  • Source