Minimal jQuery Based 3D Ball Tag Cloud - cloudTag.js

File Size: 9.01 KB
Views Total: 10154
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Minimal jQuery Based 3D Ball Tag Cloud - cloudTag.js

Yet another jQuery plugin that enables you to converts text links into a 3D ball style rotating tag cloud based on mousemove event listener.

See also:

How to use it:

1. Load the latest jQuery library and jQuery cloudTag.js script in the html document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/cloudTag.js"></script>

2. Wrap the text links with CSS class of 'tag' in a tag cloud container.

<div class="tagBall">
    <a class="tag" target="_blank" href="#">item1</a>
    <a class="tag" target="_blank" href="#">item2</a>
    <a class="tag" target="_blank" href="#">item1</a>
    <a class="tag" target="_blank" href="#">item2</a>
    <a class="tag" target="_blank" href="#">item1</a>
    <a class="tag" target="_blank" href="#">item2</a>
    <a class="tag" target="_blank" href="#">item1</a>
    <a class="tag" target="_blank" href="#">item2</a>
    <a class="tag" target="_blank" href="#">item1</a>
    <a class="tag" target="_blank" href="#">item2</a>
    <a class="tag" target="_blank" href="#">item1</a>
    <a class="tag" target="_blank" href="#">item2</a>
</div>

3. Call the plugin on the container. That's it.

<script type="text/javascript">
$(document).ready(function(){
$('.tagBall').cloudTag({
ballSize:100 // the size of the tag cloud ball
});
});
</script>

This awesome jQuery plugin is developed by keith990. For more Advanced Usages, please check the demo page or visit the official website.