Easy Text & Image Avatar Generator In jQuery - Gravatar

Gravatar is a fast and tiny jQuery avatar generator that helps generate rounded (or circular) avatars with user initials or from any images you provide.

It will automatically detect the image source and fall back to the text avatar when the image is broken.

How to use it:

1. Include jQuery library and the Gravatar plugin's files on the page.

<link rel="stylesheet" href="/path/to/css/gravatar.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/js/gravatar.js"></script>

2. Add the CSS class avatarBlock to the avatar container and define the username in the data-avatar attribute.

<div data-avatar="jQuery Script" 
     class="avatarBlock">
</div>

3. Initialize the plugin to generate a rounded text avatar.

$(function() {
  $('.avatarBlock').avatar();
});

4. To create an image avatar, just place the image source in the data-image-src attribute as follows.

<div data-avatar="jQuery Script" 
     data-image-src="/path/to/img/"
     class="avatarBlock">
</div>

5. To create a circular avatar, just add the CSS class box to the avatar container as follows.

<div data-avatar="jQuery Script" 
     data-image-src="/path/to/img/"
     class="avatarBlock box">
</div>

---

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