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.
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 !!
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