Word thumbnail

Word thumbnail is a jquery plugin to help you make word thumbnail very easily. This repo is inspired by Yahoo! comments.

Above code example title is generated by below code.

                
<div class="test" data-content="c"></div>
<div class="test" data-content="o"></div>
<div class="test" data-content="d"></div>
<div class="test" data-content="e"></div>
<div class="test" data-content="_"></div>
<div class="test" data-content="e"></div>
<div class="test" data-content="x"></div>
<div class="test" data-content="a"></div>
<div class="test" data-content="m"></div>
<div class="test" data-content="p"></div>
<div class="test" data-content="l"></div>
<div class="test" data-content="e"></div>

Include the jquey.word-thumbnail.js and word-thumbnail.css.

Choose the html class you want to use wordthumbnail.
For example:

                            <div class="init" data-content="W"></div>

Init the class

                        $(".init").wordThumbnail();

Done!

Now support three shapes, circle, square and rounded. Just set the option can get the different result.

                
    $(".circle-example").wordThumbnail({
        'shape': 'circle'
    })
    $(".square-example").wordThumbnail({
        'shape': 'square'
    })
    $(".rounded-example").wordThumbnail({
        'shape': 'rounded'
    })

The default color is from mrmrs/colors. If you don't set the color, the color would loop again and again.

It's also super easy to customize color. Just add the data-color attribute to your code.

                <div class="circle-example" data-content="C" data-color="#FF851B"></div>

Comments (similar to Yahoo!)

John

It's very easy to use!
Ashley

It's very easy to use!
Underwood

I am the president.

Now if the user doesn't have thumbnail, you don't need to use gravatar random image to be the user's thumbnail.

Simon

Feel free to send pull request. This plugin need more shapes!

Author

@ctxhou