Fork me on GitHub

initial.js

Simple jQuery plugin to make Gmail like text avatars for profile pictures. These avatars can be scaled up to any size as they are SVG based.

Download

Demo

  • Prescott Mendoza

    pretium@egestasSed.org
  • Brennan Evans

    tellus@Nullamenim.edu
  • Hall Reeves

    est@utnulla.com
  • Lucas Conway

    nec.orci@orci.org
  • Murphy Doyle

    porttitor.eros@sociosqu.com
  • Richard Osborn

    Donec@nullaDonecnon.net
  • Caldwell Aguirre

    arcu@ridiculus.org
  • Seth Sykes

    enim.mi.tempor@placerat.ca
  • Emerson Galloway

    lacus.Etiam@Nullamsuscipit.org
  • Anthony Clements

    nonummy.Fusce.fermentum@Uttincidunt.com

Features

Browser compatibility

Usage

Markup

 <img data-name="Steve" 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 Value Usage
name data-name Name of the user which the profile picture should be generated Name
$('.initial').initial({name:"Steve"});
height data-heightHeight of the picture 100
$('.initial').initial({height:64});
width data-width Width of the picture 100
$('.initial').initial({width:64});
charCount data-char-count Number of characherts to be shown in the picture. 1
$('.initial').initial({charCount:2});
textColor data-text-color Color of the text #ffffff
$('.initial').initial({textColor:"#fff"});
fontSize data-font-size Font size of the character(s) 60
$('.initial').initial({fontSize:16});
fontWeight data-font-weight Font weight of the character(s) 400
$('.initial').initial({fontWeight:700});

comments powered by Disqus