JQuery Tag Cloud

JQuery Tag Cloud with event handlers and links

by oktaviardi pratama

HTML

<link rel="stylesheet" href="https://mistic100.github.io/jQCloud/dist/jqcloud2/dist/jqcloud.min.css">
<script src="https://mistic100.github.io/jQCloud/dist/jqcloud2/dist/jqcloud.js"></script>
    
<div id="demo" style="width: 550px; height: 350px; position: relative;"></div>

CSS

#demo {
  width:80%;
}

JavaScript

var words = [{
    text: "Lorem",
    weight: Math.floor(Math.random()*14),
    link: 'http://github.com/mistic100/jQCloud'
  },
  {
    text: "Ipsum",
    weight: Math.floor(Math.random()*14),
    link: 'http://www.strangeplanet.fr'
  },
  {
    text: "Dolor",
    weight:Math.floor(Math.random()*14),
    link: 'http://piwigo.org'
  },
  {
    text: "Lorem",
    weight: Math.floor(Math.random()*14)
  },
  {
    text: "Ipsum",
    weight: Math.floor(Math.random()*14)
  },
  {
    text: "Dolor",
    weight:Math.floor(Math.random()*14)
  },
  {
    text: "Sit",
    weight: Math.floor(Math.random()*14)
  },
  {
    text: "Amet",
    weight:Math.floor(Math.random()*14)
  },
  {
    text: "Consectetur",
    weight: Math.floor(Math.random()*14)
  },
];

$("#demo").jQCloud(words, {
classPattern: null,
delay: 50,
  colors: ["#51BDE9", "#FF8888", "#F6C83C",
            "#FF8624", "#C888FF", "#FFB5B5",
            "#34903A", "#FF0000", "#1E8AB6",
            "#CC5555", "#C4A030", "#67C36D"],
  fontSize: {
    from: 0.1,
    to: 0.01
  },
autoResize: true
});