How to get gravatar image from email using Jquery?
In this post we will give you information about How to get gravatar image from email using Jquery?. Hear we will give you detail about How to get gravatar image from email using Jquery?And how to use it also give you demo for it if it is necessary.
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.onlinecode/plugin/jquery.md5.js"></script>
<style type="text/css">
.img{
width: 100px;
}
</style>
</head>
<body>
<div >
<h2>Get gravatar image from email jquery</h2>
<form>
<div >
<label>Email:</label>
<input type="email" name="email" required>
</div>
<div >
<img src="" >
</div>
<div >
<button >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","https://onlinecode.org/frontTheme/images/logo.png");
},
success:function(){
$(".img").attr("src",imgUrl);
}
});
}else{
alert('Please enter email.');
}
});
</script>
</body>
</html>
I hope it can help you…
Hope this code and post will helped you for implement How to get gravatar image from email using Jquery?. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs