Loading Gravatar image from email using JQuery

Loading Gravatar image from email using JQuery

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.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Loading gravatar image from email using Jquery</title>
  5.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  6.     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  7.     <script type="text/javascript" src="http://demo.expertphp.in/public/js/jquery.md5.js"></script>
  8. </head>
  9. <body>
  10. <div class="container">
  11.     <h2>Loading gravatar image from email using Jquery</h2>
  12.     <form>
  13.         <div class="form-group">
  14.             <label>Email:</label>
  15.             <input type="email" name="email" class="form-control email">
  16.         </div>
  17.         <div class="form-group">
  18.             <img src="" class="img" >
  19.         </div>
  20.         <div class="form-group">
  21.             <button class="btn btn-info gravtar">Load Gravatar</button>
  22.         </div>
  23.     </form>
  24. </div>
  25. <script type="text/javascript">
  26.     $(".gravtar").click(function(e){
  27.         e.preventDefault();
  28.         var email = $(".email").val();
  29.         if(email.length > 0){
  30.             var md5 = $.md5(email);
  31.             var gravatar = 'https://gravatar.com/avatar/'+md5+'?&d=404';
  32.          $.ajax({
  33.          url:gravatar,
  34.          type:"HEAD",
  35.          crossDomain:true,
  36.          error:function(){
  37.              $(".img").attr("src","load default image here");
  38.          },
  39.          success:function(){
  40.              $(".img").attr("src",gravatar);
  41.          }
  42.          });
  43.         }else{
  44.             alert('Please enter email.');
  45.         }
  46.     });
  47. </script>
  48. </body>
  49. </html>

Phone: (+91) 8800417876
Noida, 201301
sakarya escort sakarya escort sakarya escort sakarya escort serdivan escort izmir escort eporner
akyazı escort sakarya escort ferizli escort sakarya escort geyve escort sakarya escort hendek escort sakarya escort karasu escort sakarya escort sapanca escort serdivan escort webmaster forum ankara travesti