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

GitHub

View Github