Yahoo! Comments Inspired Word Thumbnail Plugin with jQuery

A lightweight jQuery plugin used to create text avatars / word thumbnail with random background colors, inspired by Google Gmail's avatars and Yahoo! comments.

How to use it:

1. Load the word-thumbnail.css in the head section, and the jquery.word-thumbnail.js in the footer but after jQuery library.

<link href="word-thumbnail.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="jquery.word-thumbnail.js"></script>

2. Use data-content attribute to specify the text displayed in the word thumbnail.

<div class="test" data-content="j"></div>
<div class="test" data-content="Q"></div>
<div class="test" data-content="u"></div>
<div class="test" data-content="e"></div>
<div class="test" data-content="r"></div>
<div class="test" data-content="y"></div>
<div class="test" data-content="S"></div>
<div class="test" data-content="c"></div>
<div class="test" data-content="r"></div>
<div class="test" data-content="i"></div>
<div class="test" data-content="p"></div>
<div class="test" data-content="t"></div>

3. Call the plugin.

$(".test").wordThumbnail();

4. By default the plugin will generate random background colors from an array of predefined colors. You can use data-color attribute to override the background colors for each word.

<div class="test" data-content="j" data-color="#E74C3C"></div>
<div class="test" data-content="Q" data-color="#E74C3C"></div>
<div class="test" data-content="u" data-color="#E74C3C"></div>
<div class="test" data-content="e" data-color="#E74C3C"></div>
<div class="test" data-content="r" data-color="#E74C3C"></div>
<div class="test" data-content="y" data-color="#E74C3C"></div>
<div class="test" data-content="S" data-color="#E74C3C"></div>
<div class="test" data-content="c" data-color="#E74C3C"></div>
<div class="test" data-content="r" data-color="#E74C3C"></div>
<div class="test" data-content="i" data-color="#E74C3C"></div>
<div class="test" data-content="p" data-color="#E74C3C"></div>
<div class="test" data-content="t" data-color="#E74C3C"></div>

5. Default options.

$(".test").wordThumbnail({

// background color
'bkg_color': colors,

// font size
'font_size': '40px',

// width of the text avatar/word thumbnail
'width': '80px',

// rounded, circle or square
'shape': 'rounded'

});

---

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