How to get gravatar image from email using Jquery?

Today now in this post i will show you How to get gravatar image from email using Jquery? Sometimes, we may need to get the gravatar image from the email address by using jquery. So, now i am going to share with you an example of how we can get the gravatar image from the email.

Gravatar is a service for the providing globally unique avatars. Now we can simply create this from our account and set this avatar image that we are wanted. So there are the several developer and users are using this service. Now, on that way any of website you can simply get the avatar image from any email address by using Gravatar account.

Today, in this example i will also checked the everything, If email is does not registered then we will Set a default image or if any user doesn’t have any Gravatar.

So let’s start and follow the bellow example.

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://codingspoint.com/frontTheme/images/logo.png");
		        },
		        success:function(){
		        	$(".img").attr("src",imgUrl);
		        }
		    });
		}else{
			alert('Please enter email.');
		}


	});
</script>


</body>
</html>

Read Also: How to implement infinite ajax scroll pagination in Laravel?

Thanks for read. I hope it help you. For more you can follow us on facebook

close

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →