[Latest News][6]

B.Sc.CSIT
Blogs
Laravel
Learn
News
Rentonnepal
Technology
A Complete Online Magazine

AddThis

How to get gravatar image from email using 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.
Image result for jquery image
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 we  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>

Good Luck !!

No comments:

Post a Comment

Start typing and press Enter to search