Create Gmail Like Text Avatars with jQuery SVG initial js - Download Create Gmail Like Text Avatars with jQuery and SVG - initial.js

Download Create Gmail Like Text Avatars with jQuery and SVG – initial.js

By Posted on

This time I will share jQuery Plugin and tutorial about Create Gmail Like Text Avatars with jQuery and SVG – initial.js, hope it will help you in programming stack.

Create Gmail Like Text Avatars with jQuery SVG initial js - Download Create Gmail Like Text Avatars with jQuery and SVG - initial.js
File Size: 6.38 KB
Views Total: 8790
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

initial.js is a lightweight jQuery plugin used to generate a SVG based user profile picture from the data-name attribute of your IMG tag, just like the text avatars as you see on Gmail.

How to use it:

1. Include the jQuery javascript and initial.js in the html document.

view source
1 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
2 <script src="initial.js"></script>

2. Create an image in your document and use data-name attribute to specify the name of the user which the profile picture should be generated.

view source
1 <img data-name="jQuery" class="demo" />

3. Initialize the plugin with default options.

view source
1 <script type="text/javascript">
2 $(document).ready(function(){
3 $('.demo').initial({width:80,height:80});
4 })
5 </script>

4. Style the user profile picture in the CSS as you wish.

view source
1 .demo{
2 ...
3 }

5. Available options to customize the profile picture (text avatar).

view source
01 <script type="text/javascript">
02 $(document).ready(function(){
03 $('.demo').initial({
04 name: 'Name', // Name of the user
05 charCount: 1, // Number of characherts to be shown in the picture.
06 textColor: '#ffffff', // Color of the text
07 seed: 0, // randomize background color
08 height: 100,
09 width: 100,
10 fontSize: 60,
11 fontWeight: 400,
12 fontFamily: 'HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica, Arial,Lucida Grande, sans-serif',
13 radius: 0
14 });
15 })
16 </script>

Change logs:

2016-09-20

  • allows using unicode in initial.js

2015-08-25

  • adds seed setting to randomize background color

2015-08-13

  • added option for rounded corners

2014-11-26

  • Corrected color selection by replacing DIV with MOD.

2014-06-04

  • fix bug for IE

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

source : jqueryscript.net

Related posts: