Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

jQuery tag cloud plugin

jQuery Tag Cloud looking like a 3d sphere. 3d animated tag cloud generated from an array. you can easily customize it by tweaking the params. You can also find this plugin available at https://plugins.jquery.com/tagcloud/

Quick start

Here is an example for you. You can also view this demo here.

<!doctype html public "lice">
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <title>jQuery tagcloud</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="https://rawgithub.com/dynamicguy/tagcloud/master/src/tagcloud.jquery.js"></script>
    <style>
        /* Brute force CSS reset... */
        * {
            resize: none;
            border: none;
            outline: none;
            text-decoration: none;
            padding: 0px;
            margin: 0px;
            list-style-type: none;
        }
    </style>
  <script type="text/javascript">
      var settings = {
          //height of sphere container
          height: 400,
          //width of sphere container
          width: 400,
          //radius of sphere
          radius: 150,
          //rotation speed
          speed: 3,
          //sphere rotations slower
          slower: 0.9,
          //delay between update position
          timer: 5,
          //dependence of a font size on axis Z
          fontMultiplier: 15,
          //tag css stylies on mouse over
          hoverStyle: {
              border: 'none',
              color: '#0b2e6f'
          },
          //tag css stylies on mouse out
          mouseOutStyle: {
              border: '',
              color: ''
          }
      };
      $(document).ready(function(){
          $('#tagcloud').tagoSphere(settings);
      });
  </script>
</head>
<body>
    <!-- Prompt IE 6 users to install Chrome Frame. Remove this if you support IE 6.
     chromium.org/developers/how-tos/chrome-frame-getting-started -->
    <!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
    <div id="tagcloud">
        <ul>
            <li><a href="#">dazzlingly</a></li>
            <li><a href="#">natatory</a></li>
            <li><a href="#">automa</a></li>
            <li><a href="#">vinologist</a></li>
            <li><a href="#">castrate</a></li>
            <li><a href="#">airfoil</a></li>
            <li><a href="#">unpaintedly</a></li>
            <li><a href="#">caffetannic</a></li>
            <li><a href="#">fissirostrate</a></li>
            <li><a href="#">gingivectomy</a></li>
            <li><a href="#">pinprick</a></li>
            <li><a href="#">forecount</a></li>
            <li><a href="#">anorthophyre</a></li>
            <li><a href="#">tram</a></li>
            <li><a href="#">democratian</a></li>
            <li><a href="#">ungovernedness</a></li>
            <li><a href="#">anaesthesia</a></li>
            <li><a href="#">Eutychian</a></li>
            <li><a href="#">insalutary</a></li>
            <li><a href="#">amphilogism</a></li>
            <li><a href="#">reshunt</a></li>
            <li><a href="#">wende</a></li>
            <li><a href="#">ope</a></li>
            <li><a href="#">Bomarea</a></li>
        </ul>
    </div>
</body>
</html>

demo

demo