Clone wiki

jquery.tagsphere / Home

3D Tag Sphere 0.4.3

Author: Ian George
Website: http://www.iangeorge.net

Tested on: IE6, IE7, IE8, Firefox 3.6 Linux, Firefox 3.5 Windows, Chrome Linux / Windows
Requirements: Optional jquery.mousewheel for zooming

Options

zoom: 90 Initial zoom level
min_zoom: 25
max_zoom: 120
zoom_factor: 2 - Speed of zoom by the mouse wheel
rotate_factor: -0.45 - Amount that the sphere rotates when the mouse moves. Positive 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
foreground_colour: #fff - Accepted colour formats are #333 #0A0A0A and rgb(n,n,n)
background_colour: rgb(0,0,0) - Named colours may not work

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>

Updated