Demo of jQuery Tag Cloud
jquery.tagcloud
Tag cloud plugin for jQuery, showing bigger tags in the center.
Example 1: Use
li
HTML tags to define the tag cloud, and options for custom colors
Tag Cloud
HTML
JavaScript
HTML
HTML5
CSS
CSS3
JavaScript
jQuery
React.js
Angular
Express
Sharepoint
ASP.NET
Vue.js
Spring
Django
Flask
<ul id="demoCloud1"> <li data-weight="60"><a href="#">HTML</a></li> <li data-weight="20><a" href="#">HTML5</a></li> <li data-weight="65">CSS</li> <!-- no link --> <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="82"><a href="#">Express</a></li> <li data-weight="10"><a href="#">Sharepoint</a></li> <li data-weight="15"><a href="#">ASP.NET</a></li> <!-- etc... --> </ul>
$(document).ready(function() { $('#demoCloud1').tagCloud({ tag: { color: '#444444', backgroundColor: '#f8f8cc' } }); });
Example 2: Use an empty
div
HTML tag, and options to define the tag cloud
Tag Cloud
HTML
JavaScript
<div id="demoCloud2"> </div>
$(document).ready(function() { let options = { container: { width: 630, backgroundColor: '#fafaf8', //fontFamily: '"Times New Roman", Times, serif', }, tag: { format: '<a href="{tag.link}">{tag.name}</a>: {tag.weight}', maxFontSize: 41, // max font size in pixels minFontSize: 8, // min font size in pixels textShadow: true // enable text shadow }, data: [ { name: 'HTML', link: '#', weight: 60 }, { name: 'HTML5', link: '#', weight: 90, tooltip: 'Sample "tooltip" message' }, { name: 'CSS', link: '#', weight: 65 }, { name: 'CSS3', link: '#', weight: 35 }, { name: 'JavaScript', link: '#', weight: 85 }, { name: 'jQuery', link: '#', weight: 100 }, // etc... ] } $('#demoCloud2').tagCloud(options); });