How to get gravatar image from email using Jquery?

By Hardik Savani | October 28, 2016 | | 36882 Viewer | Category : Javascript Bootstrap HTML jQuery


Sometimes, we require to get gravatar image from email address in jquery. So, today i am going to share with you how to get gravatar image from email.

Gravatar is a service for providing globally unique avatars. We can simply create our account and set avatar image that we want. There are several developer and users are using this service. So, that way any of site we can simply get avatar image from email address from Gravatar account.

Today, in this example i also checked everything, If email does not registered then we can Set default image if user doesn't have Gravatar. So let's follow bellow example.

In this example i include following js and css.

1)bootstrap.min.css

2)jquery.min.js

3)jquery.md5.js

Ok, so you can also simple follow bellow full email Or also you can check demo.

Example:

<!DOCTYPE html>

<html>

<head>

<title>Get gravatar image from email Jquery</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script type="text/javascript" src="http://demo.itsolutionstuff.com/plugin/jquery.md5.js"></script>

<style type="text/css">

.img{

width: 100px;

}

</style>

</head>

<body>


<div class="container">

<h2>Get gravatar image from email jquery</h2>

<form>

<div class="form-group">

<label>Email:</label>

<input type="email" name="email" class="form-control email" required>

</div>

<div class="form-group">

<img src="" class="img" >

</div>

<div class="form-group">

<button class="btn btn-success set-gravtar">Get Gravatar!</button>

</div>

</form>

</div>


<script type="text/javascript">

$(".set-gravtar").click(function(e){

e.preventDefault();

var email = $(".email").val();


if(email != ''){

var md5 = $.md5(email);

var imgUrl = 'https://gravatar.com/avatar/'+md5+'?&d=404';

$.ajax({

url:imgUrl,

type:"HEAD",

crossDomain:true,

error:function(){

$(".img").attr("src","http://itsolutionstuff.com/frontTheme/images/logo.png");

},

success:function(){

$(".img").attr("src",imgUrl);

}

});

}else{

alert('Please enter email.');

}


});

</script>


</body>

</html>

I hope it can help you...



Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.


We are Recommending you: