How to Get Gravatar Image from Email using JQuery?

By Hardik Savani June 17, 2023 Category : 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 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:

Read Also: Laravel JQuery Ajax Loading Spinner 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>

I hope it can help you...

Tags :
Previous

Laravel Implement Flash Messages Example
Next

AngularJS Nl2br Filter for Textarea Content Example

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares