Use gravatar to create your own Dynamic Photo logon box

Gravatar is the largest personalized image library in the world. His applications have been used by millions of websites. Currently, gravatar is most commonly used to display comments. But today, I use gravatar to create my logon profile and enter an email address each time I log on, if it is correct, display your dynamic profile picture. Is the effect great? In this way, the website will be greatly increased.

I will write a simple user logon box email/password. After you enter the correct email address, the system displays any display associated with the account and gravatar image effects through Ajax requests. To verify the Avatar, use the md5.php file ,. If you are a beginner, the php code below is marked with comments, which is easy to understand.

• Demo
• Download Files

 

1. Create HTML

The form of the div at the top of the profile picture is divided into horizontal segments. By default, the general Gravatar icon is displayed when you enter this page without entering an email. After you enter a valid Email address, the icon is replaced with your own

 1 <div id="container"> 2     <form id="login" name="login" autocomplete="off" method="POST" action="index.html"> 3         <div id="avatar-box"> 4              5         </div> 6              7         <div class="input-field"> 8             <label for="email">e-mail</label> 9             <input type="email" name="email" id="email" class="basic">10         </div>11     12         <div class="input-field">13             <label for="password">password</label>14             <input type="password" name="password" id="password" class="basic">15         </div>16             17         <input type="submit" id="formsub" value="Login!">18     </form>19 </div>

I will enter the field ID attribute for E-mail and check the validity using jquery. The display style is defined in the css table.

Layout format

In the style sheet file, use duplicate background images to tile

 1 form input.basic {  2 width: 320px;  3 outline: none; 4 margin-bottom: 10px;  5 border: 1px solid #d2dadd; 6 -moz-box-shadow: 0px 1px 1px #f3f4f6 inset; 7 -webkit-box-shadow: 0px 1px 1px #f3f4f6 inset; 8 box-shadow: 0px 1px 1px #f3f4f6 inset; 9 font-size: 13px;10 color: #3a3a3a;11 padding: 8px 7px;12 -moz-border-radius: 3px;13 -webkit-border-radius: 3px;14 border-radius: 3px 3px 3px 3px;15 outline-color: #e2eaed;16 background: #f8f8f8; 17 }

In the following two form fields, I also used a set of CSS gradient design buttons. Hovering and positive events trigger reversing. Text shadow

 1 #formsub {  2 position: relative; 3 left: 330px; 4 padding: 9px 22px; 5 font-size: 1.4em; 6 cursor: pointer; 7 border: 1px solid #dedede; 8 -webkit-border-radius: 3px; 9 -moz-border-radius: 3px;10 border-radius: 3px 3px 3px 3px;11 color: #3d5086;12 background: #829bf7;13 background: -moz-linear-gradient(top, #829bf7 0%, #5f84da 100%);14 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#829bf7), color-stop(100%,#5f84da));15 background: -webkit-linear-gradient(top, #829bf7 0%,#5f84da 100%);16 background: -o-linear-gradient(top, #829bf7 0%,#5f84da 100%);17 background: -ms-linear-gradient(top, #829bf7 0%,#5f84da 100%);18 background: linear-gradient(top, #829bf7 0%,#5f84da 100%);19 border-color: #6f8cdf #5f82da #5066d5;20 text-shadow: 0 1px 0 #9caff8;21 -webkit-box-shadow: 0 1px 1px #c1c1c1, inset 0 1px 0 #a1baf9;22 -moz-box-shadow: 0 1px 1px #c1c1c1, inset 0 1px 0 #a1baf9;23 box-shadow: 0 1px 1px #c1c1c1, inset 0 1px 0 #a1baf9;24 }25 #formsub:hover {26 background: #5f84da;27 background: -moz-linear-gradient(top, #5f84da 0%, #829bf7 100%);28 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5f84da), color-stop(100%,#829bf7));29 background: -webkit-linear-gradient(top, #5f84da 0%,#829bf7 100%);30 background: -o-linear-gradient(top, #5f84da 0%,#829bf7 100%);31 background: -ms-linear-gradient(top, #5f84da 0%,#829bf7 100%);32 background: linear-gradient(top, #5f84da 0%,#829bf7 100%);33 border-color: #6083c3 #567ac2 #4e71c1;34 text-shadow: 0 1px 0 #9caff8;35 color: #2e4073;36 -webkit-box-shadow: 0 1px 1px #c3c3c3, inset 0 1px 0 #a1baf9;37 -moz-box-shadow: 0 1px 1px #c3c3c3, inset 0 1px 0 #a1baf9;38 box-shadow: 0 1px 1px #c3c3c3, inset 0 1px 0 #a1baf9; 39 }40 #formsub:active {41 background: #5f84da;42 -webkit-box-shadow: 0 1px 1px #fff, inset 0 1px 0 #a1baf9;43 -moz-box-shadow: 0 1px 1px #fff, inset 0 1px 0 #a1baf9;44 box-shadow: 0 1px 1px #fff, inset 0 1px 0 #a1baf9;  45 }

Many of the above attributes can be updated or changed to adapt to your website. Color Scheme and Design Style

Email Verification

In the email field, each time you enter an email address, the system uses regular expression matching for verification.

1 $(document).ready(function(){2     3     $("#email").keyup(function(){4         var addr  = $(this).val();5         var regex = /(.+)@(.+){2,}\.(.+){2,}/;

If the input is incorrect, the system prompts you to enter the correct email.

 

DOM loading is complete. We need to check that onlyEmailInput. But before this event handler, I have compiled a variable for a regular expression and I will test the input value for the user. After the keyup event, we can set another variable to save the current text# Email.

Gravatar, a simple URL hacker, can display images by creating an MD5 hash of the e-mail address. This will open up what looks likeHttp://www.gravatar.com/avatar/MD5HASH. If you need the image return value, you may append it.JPGFile extension. But in this example, I set a specific size value, so we get the 120x120 image.

Call an Ajax request

We need some logic to check that each time a user enters an address, if their current email is valid. If so, we need to pass the data to PHP, so we can get an MD5 hash to display a new gravatar image. Here is the rest of my jQuery code

 1 if(regex.test(addr)) { 2             $.ajax({ 3                 type: "POST", 4                 url: "md5.php", 5                 data: "email="+addr, 6                 success: function(html){ 7                     var newimg = "http://www.gravatar.com/avatar/"+html+"?s=120"; 8                     $("#userimg").attr("src", newimg) 9                 }10             });11         }12     });13 });

Remember,Regular ExpressionIt refers to the variable I set. This includes a series of complex code syntax to determine, this function will only return true if the e-mail address is correctly matched. If it is true, then a script connection is called.Md5.phpA new Ajax method. We use a new variable that contains the e-mail text entered by the current user. Return to the function, append it to the gravatar URL of the new MD5 hash, and dynamically update the src attribute of the top gravatar image.

Md5.PHP

The preceding front-end code has been written. Let's take a look at how the background program handles it. What md5.PHP does is get the user's e-mail, create an MD5 hash string, and return the returned value to jQuery. The Code is as follows:

1 <?php2 $email = trim(strtolower($_POST['email']));3 4 $md5 = md5($email);5 echo $md5;6 ?>

If I enter the emaili address, your gravatar account image will be displayed.

This is a new application. You can use it on any website. Every time you log on, gravatar images with cool effects are displayed.

 

• Demo
• Download Files