Loading Gravatar image from email using JQuery

Posted 7 years ago By Ajay Gupta 12854

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

<!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="http://demo.expertphp.in/public/js/jquery.md5.js"></script>
</head>
<body>
<div class="container">
    <h2>Loading gravatar image from email using Jquery</h2>
    <form>
        <div class="form-group">
            <label>Email:</label>
            <input type="email" name="email" class="form-control email">
        </div>
        <div class="form-group">
            <img src="" class="img" >
        </div>
        <div class="form-group">
            <button class="btn btn-info gravtar">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>

<!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="http://demo.expertphp.in/public/js/jquery.md5.js"></script>
</head>
<body>

<div class="container">
	<h2>Loading gravatar image from email using Jquery</h2>
	<form>
		<div class="form-group">
			<label>Email:</label>
			<input type="email" name="email" class="form-control email">
		</div>
		<div class="form-group">
			<img src="" class="img" >
		</div>
		<div class="form-group">
			<button class="btn btn-info gravtar">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>

Show Demo

Loading Gravatar image from email using JQuery

Loading Gravatar image from email using JQuery

Tags :

Related Posts

How to validate form in jQuery using jQuery Form Validator

Powerful jQuery Bootstrap Form Validation with Example

jQuery Select box search option with Chosen and Bootstrap Plugins example

Validate multiple email addresses in single input text example

How to create divided multi-scrolling pages using jQuery Plugins

jQuery How To Fix the “$ is not a function” Error Using noConflict

Add Remove input fields dynamically using jQuery

Auto Load More Data on Page Scroll with jQuery and PHP Laravel

jQuery making custom right-click context menu example

jQuery - disable context menu right click, cut, copy and paste

jQuery remove query string parameter from url

Check and Uncheck all checkbox using jQuery Example

How to hide, show, or toggle your div with jQuery

How to select only one checkbox at a time in jquery example

How to get current url with or without query string example jQuery

Submit PHP Bootstrap Form without Page Refresh using jQuery, Ajax

Upload Multiple Images With Image Preview Using jQuery,Ajax And PHP

How to add or update query string parameter to current url in Javascript

Jquery Bootstrap Table Row Draggable Sortable and Resizable with Example

Bootstrap datepicker example text input with specifying date format

jQuery - set am/pm format using jQuery timepicker Plugin with example

Bootstrap year picker example using datepicker js plugin

How to get client ip address in javascript of jquery?

How to count number of characters limit in textarea Javascript

jQuery Fullcalendar Integration with example

Laravel 5 - Autocomplete Mutiple Fields Using jQuery, Ajax and MySQL

Ajax Image Upload using PHP and jQuery Example Without Page Refresh with Validation

How to get local time from UTC using Moment.JS with example