jQuery Plugin To Generate Text Avatars - Name Badges

A lightweight jQuery plugin which allows you to generate customizable round name badges (text avatars) with random background colors for profile images.

How to use it:

1. Load the jQuery Name Badges plugin after jQuery library.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jquery.nameBadges.js"></script>

2. Wrap the user names into DIV elements.

<div class="name">Bill Gates</div>
<div class="name">Jquery Script</div>
<div class="name">Jquery Plugin</div><br>
<div class="name">Jquery UI</div>
<div class="name">Jquery Mobile</div>
<div class="name">JavaScript Library</div>

3. Call the plugin to make text avatars from the user names.

$(document).ready(function(){
  $('.name').nameBadge();
});

4. Customize the text avatars.

$('.name').nameBadge({

// boder options
border: {
  color: '#ddd',
  width: 3
},

// an array of background colors.
colors: ['#a3a948', '#edb92e', '#f85931', '#ce1836', '#009989'],

// text color
text: '#fff',

// avatar size
size: 72,

// avatar margin
margin: 5,

// disable middle name 
middlename: true,

// force uppercase
uppercase: false

});

Change log:

2015-01-15

• Updated initialLetters middlename setting

2015-01-14

• Added options to remove middlename and force uppercase

---

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