Loading Gravatar image from email using JQuery
In this post we will give you information about Loading Gravatar image from email using JQuery. Hear we will give you detail about Loading Gravatar image from email using JQueryAnd how to use it also give you demo for it if it is necessary.
In this post, I will let you know how to get Gravatar image from email using jQuery.
This is useful when you are developing a forum where people can post his comment by verifying their email.
You can get gravatar image of the users when users will have account on gravatar.
This is going very popular to load image of users from gravatar in the websites and gravatar service was created by Tom Preston-Werner.
By default a Gravatar image is displayed at 80 by 80 pixels by default.
You will get Gravatar images from Gravatar web-server using a URL containing an MD5 hash of the registered email address.
So I need to have jQuery MD5 plugin in this example to get hash string from email address because jQuery does not have a method to provide the MD5 of a string.
Example
- <!DOCTYPEhtml>
- <html>
- <head>
- <title>Loading gravatar image from email using Jquery</title>
- <linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
- <scripttype="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
- <scripttype="text/javascript"src="//public/js/jquery.md5.js"></script>
- </head>
- <body>
- <divclass="container">
- <h2>Loading gravatar image from email using Jquery</h2>
- <form>
- <divclass="form-group">
- <label>Email:</label>
- <inputtype="email"name="email"class="form-control email">
- </div>
- <divclass="form-group">
- <imgsrc=""class="img">
- </div>
- <divclass="form-group">
- <buttonclass="btn btn-info gravtar">Load Gravatar</button>
- </div>
- </form>
- </div>
- <scripttype="text/javascript">
- $(".gravtar").click(function(e){
- e.preventDefault();
- var email = $(".email").val();
- if(email.length > 0){
- var md5 = $.md5(email);
- var gravatar = 'https://gravatar.com/avatar/'+md5+'?&d=404';
- $.ajax({
- url:gravatar,
- type:"HEAD",
- crossDomain:true,
- error:function(){
- $(".img").attr("src","load default image here");
- },
- success:function(){
- $(".img").attr("src",gravatar);
- }
- });
- }else{
- alert('Please enter email.');
- }
- });
- </script>
- </body>
- </html>
<!DOCTYPE html>
<html>
<head>
<title>Loading gravatar image from email using 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="//public/js/jquery.md5.js"></script>
</head>
<body>
<div >
<h2>Loading gravatar image from email using Jquery</h2>
<form>
<div >
<label>Email:</label>
<input type="email" name="email" >
</div>
<div >
<img src="" >
</div>
<div >
<button >Load Gravatar</button>
</div>
</form>
</div>
<script type="text/javascript">
$(".gravtar").click(function(e){
e.preventDefault();
var email = $(".email").val();
if(email.length > 0){
var md5 = $.md5(email);
var gravatar = 'https://gravatar.com/avatar/'+md5+'?&d=404';
$.ajax({
url:gravatar,
type:"HEAD",
crossDomain:true,
error:function(){
$(".img").attr("src","load default image here");
},
success:function(){
$(".img").attr("src",gravatar);
}
});
}else{
alert('Please enter email.');
}
});
</script>
</body>
</html>Hope this code and post will helped you for implement Loading 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