Tag Cloud Plugin For jQuery Shows Larger Tags

Tag cloud plugin for jQuery shows larger tags in the middle. tagcloud.js is a flexible, customizable, SEO-friendly cloud builder that dynamically determines the corresponding text size for each tag based on priority.

word cloud codepen, word cloud generator, interactive word cloud javascript, bootstrap tag cloud, jquery awesome cloud, tag cloud plugin jquery

More advantages:

Tag styles are configurable.
Semantic coding. Based on an unordered HTML list.
Apply random colors to the background of your signs.
Automatically set tag color based on the background color.

How to make use of it:

1. To get began, embrace the tagcloud.js jQuery plugin’s information on the web page.

<link rel="stylesheet" href="/path/to/jquery.tagcloud.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.tagcloud.js"></script>

2. Generate a tag cloud from a traditional HTML listing. The data-weight attribute.

<ul id="myTagCloud">
  <li data-weight="60"><a href="#">HTML</a></li>
  <li data-weight="35"><a href="#">CSS3</a></li>
  <li data-weight="85"><a href="#">JavaScript</a></li>
  <li data-weight="100"><a href="#">jQuery</a></li>
  <li data-weight="78"><a href="#">React.js</a></li>
  <li data-weight="62"><a href="#">Angular</a></li>
  <li data-weight="53"><a href="#">Vue.js</a></li>
  ...
</ul>

$('#myTagCloud').tagCloud({
  // configs here
});

3. You’re additionally allowed to outline the tag list in JavaScript as follows:

<div id="anotherTagCloud"></div>

const myTagList = [
      { 
        tag: 'HTML5',         
        link: '#', 
        weight: 90, 
        tooltip: 'Optional' 
      },
      { 
        tag: 'CSS3',
        link: '#', 
        weight: 35 
      },
      { 
        tag: 'JavaScript',    
        link: '#', 
        weight: 85 
      },
      // more tags here
  ]

$('#anotherTagCloud').tagCloud({
  data: myTagList
});

4. Customize the tag cloud with the following configs.

$('Selector').tagCloud({

  // tag cloud container options
  container: {
    width: 500,
    height: 'auto',
    backgroundColor: '#f0f0f0',
    color: '#666666',
    padding: '10px 5px',
    fontFamily: '"Helvetica Neue",Helvetica,Arial,sans-serif'
  },

  // tag options
  tag: {
    // min font size
    minFontSize: 10,     
    // max font size
    maxFontSize: 40,  
    // black for light background, white for dark background
    color: 'auto',
    // enable text shadow
    textShadow: false,
  },

  // an array pre-defined background colors
  backgroundColors: [
    '#db843d', '#92a8cd', '#a47d7c', '#058dc7', '#50b432', '#ed561b', '#24cbe5', '#64e572',
    '#ff9655', '#d6cb54', '#6af9c4', '#b5ca92', '#2f7ed8', '#5c40de', '#8bbc21', '#910000',
    '#1aadce', '#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a', '#db843d', '#92a8cd',
    '#a47d7c', '#058dc7', '#50b432', '#ed561b', '#24cbe5', '#64e572', '#ff9655', '#d6cb54',
    '#6af9c4', '#b5ca92', '#2f7ed8', '#5c40de', '#8bbc21', '#910000', '#1aadce', '#492970',
    '#f28f43', '#77a1e5', '#c42525', '#a6c96a', '#db843d', '#92a8cd', '#a47d7c', '#058dc7',
    '#50b432', '#ed561b', '#24cbe5', '#64e572', '#ff9655', '#d6cb54', '#6af9c4', '#b5ca92',
    '#2f7ed8', '#5c40de', '#8bbc21', '#910000', '#1aadce', '#492970', '#f28f43', '#77a1e5'
  ],

  // black or white, based on background color
  defaultTagColor: 'auto',   

  // default background color
  defaultTagBackgroundColor:  '#ff9655',
  
});

Dynamic SEO-Friendly Tag Cloud Generator, Tag cloud plugin/Github