Submit your widget

jquery rotating 3d tag cloud

Created 14 years ago   Views 36748   downloads 5498    Author iangeorge
jquery rotating 3d tag cloud
View DemoDownload
123
Share |

TODO

Performance is horrible when more than one instance is present in the page
Would be much quicker if instead of recalculating all values on mouse move a global phi/theta value pair is stored and the values calculated on-the-fly in Draw()

Options

zoom: 75 Initial zoom level
min_zoom: 0
max_zoom: 100
zoom_factor: 2 - Speed of zoom by the mouse wheel
rotate_by: -1.75 - In degrees, the amount that the sphere rotates. Negative values reverse the direction.
fps: 10 - Defines the (target) number of times the animation will be updated per second
centrex: 250 - Horizontal rotation centre in the container <div>
centrey: 250 Vertical rotation centre in the container <div>
min_font_size: 12
max_font_size: 32
font_units: 'px'
random_points: 50 - Adds some random points on to the sphere to enhance the effect

Usage

Vanilla

$('.tags').tagcloud();

 

 

Centred in a 200 x 200 container:

$('.tags').tagcloud({centrex:100,centrey:100});

 

 

With a different update speed

$('.selector').tagcloud({fps:24});

 

 

Markup

Must be an unordered list in a div with links in the list items.
rel="[number]" is optional but necessary for ranking by font-size.

 

<div class="tags">
 <ul>
   <li><a href="#" rel="20">link 1</a></li>
   <li><a href="#" rel="20">link 2</a></li>
   <li><a href="#" rel="20">link 3</a></li>
   <li><a href="#" rel="20">link 4</a></li>
   <li><a href="#" rel="20">link 5</a></li>
 </ul>