Category: Coding

Coding

Visual Image loader using jQuery

There is a excellent jQuery script which creates visual image loading effect, while the image actually loads. When the page is initialized, an animated preloader will take it’s place creating the “image loading” effect. Once the image is ready to be displayed, a script will kick in and image loads with a fade effect.

Step 1. Create a visual image loader image. I prefer www.ajaxLoad.info, once created name it as ‘loader.gif’

Step 2. Create a Div area for the image

  <div id="showloader"
       style="background: transparent url(loader.gif) no-repeat center  center;
              width: 500px;
              height: 500px;
              overflow: hidden;">
  </div>

Step 3. Create an image loading kick-in function.

  function putLoading(imageLink)
  {
     var img = new Image();
     $(img).load(function ()
     {
         $(this).css('display', 'none');
         $(this).hide();
         $('#showloader').removeClass('showloading').append(this);
         $(this).fadeIn();
     }).error(function ()
     {
         // some error message
     }).attr('src', imageLink);
  }

Step 4: Now just call the function putLoading() with Image path.

Full Code:

  <div id="showloader"
       style="background: transparent url(loader.gif) no-repeat center  center;
              width: 500px;
              height: 500px;
              overflow: hidden;">
  </div>
  <script src="js/jquery.js" type="text/javascript"></script>
  <script type="text/javascript">
  function putLoading(imageLink)
  {
    var img = new Image();
    $(img).load(function ()
    {
       $(this).css('display', 'none');
       $(this).hide();
       $('#showloader').removeClass('showloading').append(this);
       $(this).fadeIn();
    }).error(function ()
    {
       // some error message
    }).attr('src', imageLink);
  }
  </script>
  <script type="text/javascript">
     putLoading('http://farm1.static.flickr.com/3167/5796343598_3e94a146cc.jpg');
  </script>

Demo: http://worldofmagicians.com/photogallery/photogallery.php?user=MagicianPhilip


 

Add Gravatar to your web sites using PHP & C#

Gravatar (an abbreviation for globally recognized avatar) is a service for providing globally unique avatars which was created by Tom Preston-Werner. On Gravatar, users can register an account based on their email address, and upload an avatar to be associated with the account. Gravatar plugins are available for popular blogging software; when the user posts a comment on such a blog that requires an e-mail address, the blogging software checks whether that e-mail address has an associated avatar at Gravatar.

PHP:


function GetAvatar($email)
{
   $emailMD5 = md5($email);
   $gravatarURL = "http://www.gravatar.com/avatar/" . $emailMD5 . ".jpg";
   $html="<img src='$gravatarURL' />"; return $html;
}

C#:


public string GetAvatar(string Email)
{
   string emailMd5 = Utilities.Encryption.MD5.ComputeHash(Email.Trim().ToLower()).ToLower();
   string gravatarURL = "http://www.gravatar.com/avatar/" + emailMD5 + ".jpg";
   string html = "<img src='" + $gravatarURL + "' />"; return html;
}