initial.js

Simple jQuery plugin to make Gmail like text avatars for profile pictures.

Demo

Browser compatibility

• Chrome
• Firefox
• Opera 9+
• Safari 3.2+
• iOS Safari 3.2+
• Android Browser 3+

Usage

Markup

<img data-name="Steve" data-color="#85e0ce" class="profile"/>

jQuery code

$('.profile').initial();

Options

Below options can be overridden with data-attributes inside the image element. Refer to the "data-attribute" column for related data-attribute for each option

| Option | data-attribute | Description | Default | |-------------|------------------|----------------------------------------------------------------|----------------------------------------------------------------------------------------------------| | name | data-name | Name of the user which the profile picture should be generated | Name | | height | data-height | Height of the picture | 100 | | width | data-width | Width of the picture | 100 | | charCount | data-char-count | Number of characherts to be shown in the picture. | 1 | | textColor | data-text-color | Color of the text | #ffffff | | fontSize | data-font-size | Font size of the character(s) | 60 | | fontWeight | data-font-weight | Font weight of the character(s) | 400 | | radius | data-radius | Rounded corners | 0 | | seed | data-seed | Number to randomize the background color | 0 | | color | data-color | Background color of the profile picture that should be generated | null |