Download Now!

A tiny, feature-rich, jQuery tag cloud plugin

Super Small

— Entire plugin is minified into a <1.5kb file

Plenty of Feature Combinations

— Features include, but are not limited to custom colors, sizes, and styles

— Allows you to give more important tags/words their own custom colors and font-sizes

— You still have the ability to style everything with your own custom CSS

— Accepts links/text, images, and more

— Can handle multiple instances of the plugin to create an infinite number of tag clouds

How to use

1.

Add the following inside your <head> tag:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.cloudly.min.js"></script>

2.

Create a <div> with a class of "cloudly-tags" inside of a wrapper div

<div id="my-tag-cloud">
    <div class="cloudly-tags">
    </div>
</div>

3.

Inside the "cloudly-tags" <div> list your links and/or images wrapped in <a> tags like so:
*To classify a tag as important add the class "cloudly-important" to it

<div class="cloudly-tags">
    <a href="/cool.html">cool</a>
    <a href="derekhilldesign.com" class="cloudly-important">tag</a>
    <a href="link here"><img src="/images/supercoolimage.jpg" alt=""/></a>
    <a href="link here">this</a>
    <a href="#" class="cloudly-important">is</a>
    <a href="link here">awesome</a>
</div>

4.

Trigger the cloudly plugin on your wrapper <div> with .cloudly();

$(function(){
    $("#my-tag-cloud").cloudly();
})

Options

tagMin: Defines the minimum font size for tags

tagMax: Defines the maximum font size for tags

impMin: If set, defines the minimum font size for a tag classed with "cloudly-important", otherwise inherits tagMin value

impMax: If set, defines the maximum font size for a tag classed with "cloudly-important", otherwise inherits tagMax value

tagColor: Defines an array of colors to be used for tags

impColor: If set, defines an array of colors to be used for tags classed with "cloudly-important", otherwise inherits tagColor value(s)

underline: Determines whether or not the tags are underlined

linked: Determines whether or not to treat the tags as links

Possible Values

tagMin: (number) ex. 12

tagMax: (number) ex. 36

impMin: (number) ex. 24

impMax: (number) ex. 44

tagColor: (string/array) ex. "#ff78e9" or "#ff78e9, #997898, #333, #909090" or "red, green, purple" or "rainbow"

impColor: (string/array) ex. "#ff78e9" or "#ff78e9, #997898, #333, #909090" or "red, green, purple" or "rainbow"

underline: true or false

linked: true or false

Examples

HTML

<div id="my-tag-cloud">
    <div class="cloudly-tags">
        <a href="#">cool</a>
        <a href="#" class="cloudly-important">tag</a>
        <a href="#">cloud</a>
        <a href="#">this</a>
        <a href="#" class="cloudly-important">is</a>
        <a href="#">awesome</a>
        <a href="#">bunches</a>
        <a href="#">tags</a>
        . . .
    </div>
</div>

JS

Default

$("#my-tag-cloud").cloudly();
$("#my-tag-cloud").cloudly({
    tagMin: 12,
    tagMax: 21,
    impMin: "",
    impMax: "",
    tagColor: 'blue',
    impColor: 'blue',
    underline: false,
    linked: true
 });

Result


$("#my-tag-cloud").cloudly({
    impMin: 24,
    impMax: 42,
    impColor: 'red'
});
$("#my-tag-cloud").cloudly({
    tagColor: "rainbow",
    underline: true
});
$("#my-tag-cloud").cloudly({
    tagColor: '#3498DB, #2C3E50, #336E7B',
    impColor: 'purple'
});

You can download Cloudly here:

Download Now!

Like this plugin? Please consider donating.