Skip to content

Latest commit

 

History

History
103 lines (98 loc) · 3.98 KB

README.md

File metadata and controls

103 lines (98 loc) · 3.98 KB

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