Press "Enter" to skip to content

Create Colorful Text And Image Avatar Generator | JQuery Gravatar Plugin

Gravatar is a small jQuery avatar generator that helps create round or circular avatars with user initials or from any images you provide. It will automatically detect the image source and revert to the text avatar when the image is broken.

svg avatars generator jquery integration script, jquery letter avatar, upload profile picture html code, jquery text avatar, jquery avatar plugin, letter avatar javascript

How to make use of it:

1. Include jQuery library and the Gravatar plugin’s information on the web 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 outline the username within 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 a picture avatar, simply place the picture supply within 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 round avatar, simply 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>

Easy Text & Image Avatar Generator, Gravatar Plugin/Github, avatar maker javascript, html5 character creator


See Demo And Download

Official Website(sachingvit): Click Here

This superior jQuery/javascript plugin is developed by sachingvit. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *