Google like Instant Preview using jQuery & base64 Image Encoding in PHP ~ Web Speaks

This time I have tried to create Google like instant preview feature using jQuery. All of you guys have already seen the instant preview service on Google search page. Here assume that we already have the preview images of all pages. We will load these images dynamically on JavaScript hover function to show as preview. The main feature of the code is base64 encoding of images. All the preview images are encoded using base64 encoding before being transferred to the client. Although not very useful here, but base64 encoding saves your page loading time because the number of http requests is reduced as each image makes separate http request to the server. But the encoded image is a string so it is loaded with the page code without making any separate http request to the server.

To use the instant preview feature user has to turn the feature on by clicking on the ‘magnifying glass’ button. Although this script does not implement the exact instant preview feature but it will give you an idea of how to go ahead on this path to make it full fledged service. I know you want to see how it looks actually. Click here to see it working…

Live Demo Download Script

Html Markup

<html>
<head>
<title>Webspeaks.in</title>
</head>

<body>
<?php
$img_src = "lookup.gif";
$imgbinary = fread(fopen($img_src, "r"), filesize($img_src));
$lookup_img_str = base64_encode($imgbinary);
?>
<div id="loading"></div>

<div id="main">

 <ul class="gallery">
  <li id='1'>
   <h2><a href="http://www.webspeaks.in/2011/01/bubbly-image-gallery-with-jquery.html">Stylish Bubbly Image Gallery with jQuery</a> <?php echo '<img class="preview" src="data:image/jpg;base64,'.$lookup_img_str.'" />' ?> </h2>
   <span class="text">In this post I have extended the image zoom effect to create an awesome image gallery. This gallery picks a random image from the list and applies zoom effect to it. The result is a beautiful effect like bubbles of water. Like to see it???</span>
  </li>
  <li id='2'>
   <h2><a href="http://www.webspeaks.in/2011/01/here-is-simple-script-showing-image.html">Image Zoom Effect with jQuery</a> <?php echo '<img class="preview" src="data:image/jpg;base64,'.$lookup_img_str.'" />' ?> </h2>
   <span class="text">Here is a simple script showing image zoom effect on mouseover. The zoom effect is simply a trick to animate the image to a larger size. But it needs to be controlled by tricky CSS implementation. So CSS+jQuery are enough to beautify your web page with this simple zoom effect.</span>
  </li>
  <li id='3'>
   <h2><a href="http://www.webspeaks.in/2011/01/cool-floating-image-galley-with-jquery.html">Cool Floating Image Gallery with jQuery</a> <?php echo '<img class="preview" src="data:image/jpg;base64,'.$lookup_img_str.'" />' ?> </h2>
   <span class="text">Huh! Fed up with the Magento giant. This time lets play with my all time favourite jQuery. Here I am presenting a beautiful image gallery, no a picture frame with floating images. It contains many images with random floating effect, beautiful enough to be used in your web app.</span>
  </li>
  <li id='4'>
   <h2><a href="http://www.webspeaks.in/2010/12/orkut-like-showhide-scraps-with-jquery.html">Orkut like show/hide scraps with jQuery</a> <?php echo '<img class="preview" src="data:image/jpg;base64,'.$lookup_img_str.'" />' ?> </h2>
   <span class="text">It will be fun to collapse and expand images on your web pages just like Orkut.com. Believe me its very easy task with help of jQuery. You have to dirty your hands with a bit CSS, but thats tolerable.</span>
  </li>
  <li id='5'>
   <h2><a href="http://www.webspeaks.in/2010/09/simple-password-strength-meter-with.html">Simple Password Strength Meter with jQuery</a> <?php echo '<img class="preview" src="data:image/jpg;base64,'.$lookup_img_str.'" />' ?> </h2>
   <span class="text">People generally do not realise the power of regular expressions. If utilised at right places, regular expressions can be very helpful. In this post I will show you how to use regular expressions in JavaScript to measure the password strength. Client side password meter can be very helpful for interactive web applications.</span>
  </li>
  <li id='6'>
   <h2><a href="http://www.webspeaks.in/2010/09/simplest-table-sorter-with-jquery.html">Simplest Table Sorter with jQuery</a> <?php echo '<img class="preview" src="data:image/jpg;base64,'.$lookup_img_str.'" />' ?> </h2>
   <span class="text">Table sorting can be done in two ways: using AJAX call or using simple client side javascript. The first method lacks performance as every time sorting is done, it makes a hit on server and returns the sorted resultset. So it is not recommended in most of the situations. The second method(that I would always recommend) is the intelligent one. It performs the sorting on client side without making any request to the server. So it is fast as well performance oriented.</span>
  </li>
 </ul>
 <span style="font-weight:bold">Click on the 'magnifying glass' to enable instant preview.</span>
</div>
</body>
</html>

jQuery Code

<script type="text/javascript">
$(function()
{
 var running = 0;
 var flag = 0;

 $('.preview').css({ opacity: 0.4 });
 $('ul.gallery li img.preview').click(function(event)
 {
  flag = 1; /*Turn on the instant preview feature*/
  $('.preview').css({ opacity: 1.0 });
 });

 $('ul.gallery li').hover(function(event)
 {
  $(this).find('img').css({ opacity: 1.0 });
  if(flag == 1) /*If instant preview is on, show the image*/
  {
    $parent = $(this);
    var parentId = $parent.attr('id');

    var htm;

    $('div.preview_pane').remove();

    /* Get cursor positions */
      var tPosX = 100;
      var tPosY = event.pageY - 50;
      
    var dataString = 'id='+ parentId ;  

   if(running == 0)
   {
    $('div#loading').html('Please wait while instant preview loads...').slideDown();
    $.ajax({  
     type: "POST",  
     url: "image.php",  
     data: dataString,  
     cache: true,  
     success: function(base64)  
     {  
      $('div#loading').slideUp();
      htm = base64;
      $parent.append('<div class="preview_pane">'+htm+'</div>');
      $('div.preview_pane').css({top: tPosY, right: tPosX});
     }, 
     error: function(data)  
     {  
      $('div#loading').slideUp();
      htm = 'Error loading preview';
      $parent.append('<div class="preview_pane">'+htm+'</div>');
      $('div.preview_pane').css({top: tPosY, right: tPosX});
     }  
    }); 
   }
  }

  }, function() {
   if(flag != 1)
   {
    $(this).find('img').css({ opacity: 0.4 });
   }
    $('.preview_pane').hide();
  });
});
</script>

PHP Code (image.php)

<?php
$id = $_REQUEST['id'];

if(isset($id) && $id != '')
{
 echo getImgString($id);
}

function getImgString($id)
{
 switch(intval($id))
 {
  case 1: $img_src = 'bubblyGallery.PNG';
   break;
  case 2: $img_src = 'imgZoom.PNG';
   break;
  case 3: $img_src = 'picframe.PNG';
   break;
  case 4: $img_src = 'scrap.PNG';
   break;
  case 5: $img_src = 'pwd.PNG';
   break;
  case 6: $img_src = 'sorter.PNG';
   break;
 }

 $imgbinary = fread(fopen($img_src, "r"), filesize($img_src));
 $lookup_img_str = base64_encode($imgbinary);
 return '<img src="data:image/png;base64,'.$lookup_img_str.'" />';
}
?>

CSS Code

<style>
body{font-family:arial,sans-serif; font-size:small;}
#main{margin:auto; width:910px;}
ul.gallery{list-style: none; margin:20px 100px; border:1px solid black;}
ul.gallery li{padding:4px;}
ul.gallery li:hover{background:none repeat scroll 0 0 #EBF2FC;}
ul.gallery li h2{font-weight:bold; text-decoration:none; color:#2200C1; margin-bottom:0px;}
ul.gallery li h2 a{font-weight:bold; text-decoration:none; color:#2200C1;}
div#loading{margin: auto; position:fixed; bottom:0px; background:none repeat scroll 0 0 #000000; color:#ffffff; padding:5px; height:25px; display:none; font-weight:bold;}
.preview {
    border: 0 none;
    cursor: pointer;
 height: 20px;
 width: 20px;
    margin: 0px 0px 0px 10px;
    vertical-align: 0px;
}
ul.gallery li span.text {font-size:12px; font-weight:500; width:500px;}

div.preview_pane{
 padding:10px; height:auto; width:auto; position:absolute; float:right; overflow:hidden; z-index: 110;
 -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    background-color: #FFFFFF;
    border: 1px solid #999999;
}
div.preview_pane img{
 border: medium none;
    display: block;
}
</style>