TalkPHP - Ajax & Creating Thumbnail

Well i haven't done a tutorial in awhile, but i am back now to write again :-D

This time i want to write a tutorial using Ajax & Creating Thumbnails.

Basically i want to be able to change details on a certain thumbnail like size and zoom and the image will update instantly.

DEMO: HERE

This will allow you to create thumbnails of any image that you link to and you can change it by changing the values. You can use your own images :-D

First of all you need to set up a page where the image will be displayed and where the Ajax will be. Also contains the boxes where you can change the values.

You can use the code below if you like or use your own.

PHP Code:


		
			
<html>

<head>



</head>

<body>

<form id="form1" name="form1" method="post" action="">

  <table width="600" border="0" align="center" cellpadding="5" cellspacing="0">

    <tr>

      <td width="394" valign="top"><div class="displayImage" id="displayImage">Your image will be displayed here </div></td>

      <td width="186"><label><strong>Image Source: <br />

        <input name="src" type="text" id="src" onBlur="getData('process_thumb.php');" size="40" />

      </strong></label>

        <strong><br />

        <label>Zoom:

        <br />

        <select name="zoom" id="zoom" onchange="getData('process_thumb.php');">

          <option value="0.1">10%</option>

          <option value="0.2">20%</option>

          <option value="0.3">30%</option>

          <option value="0.4">40%</option>

          <option value="0.5">50%</option>

          <option value="0.6">60%</option>

          <option value="0.7">70%</option>

          <option value="0.8">80%</option>

          <option value="0.9">90%</option>

          <option value="1">100%</option>

          </select>

        <br />

        <br />

      Size </label>

        </strong>

        <label><br />

      <input name="size" type="text" id="size" value="250" onBlur="getData('process_thumb.php');"/>

      <br />

      <br />

      <strong>Example:</strong><br />

        This will create a 250 x 250 Square </label></td>

    </tr>

    <tr>

      <td valign="top">Please right click on the image and Save As to save to your computer </td>

      <td>&nbsp;</td>

    </tr>

  </table>

</form>

</body>

</html>

This will create all the forms and place all the functions in the boxes when the user changed.

Now we need to place the Ajax in the header. So start with with the script tags.

PHP Code:


		
			
<script type="text/javascript">

//<![CDATA[





//]]>

</script>

Now we need to set up a variable for the request and set it to false.

PHP Code:


		
			
var request = false;

Now we want to actually run an ajax request by actually seeing if the user is using Internet Explorer or Firefox.

PHP Code:


		
			
if(window.XMLHttpRequest){

  request = new XMLHttpRequest(); //Firefox

}else if(window.ActiveXObject){

  request = new ActiveXObject("Microsoft.XMLHTTP"); //Internet Explorer

}

Now we can create a function that will be called when the user has changed a value in the boxes of select field.

PHP Code:


		
			
function getData(source){

  

}

The source we are passing into the function is the location of the file where we shall process the image.

Now we can fill the function

PHP Code:


		
			
if(request){



    var per = document.getElementById("zoom").value; //get zoom value

    var size = document.getElementById("size").value; //get size value

    var src = document.getElementById("src").value; //get src

    

    var newsource = source + "?per=" + per + "&size=" + size +"&src=" + src + ""; //set up the link and place variables in the url

    request.open("GET",newsource); // open a request to that page using the get rather then post

    request.onreadystatechange = function(){ 

      

           if(request.readyState < 4){// check if the server has done the process if not show message "updating.."



//If readyState is under 4 means it hasnt yet finished loading

              document.getElementById("displayImage").innerHTML = "Updating....";

         }

         else if(request.readyState==4){//Process has finished

             document.getElementById("displayImage").innerHTML = request.responseText; // Show the response information from the source page and put it in the div displayImage

          }

          

    }

    request.send(null);

  }

Ok now we have finished with the Ajax part of this. Now we need to create a new page that will have set as the source. In this case process_thumb.php

In that page is very simple bit of code.

PHP Code:


		
			
<?php

$size = $_GET["size"];

$per = $_GET["per"];

$src = $_GET["src"];



    echo "<img src=thumbcreate.php?src=$src&per=$per&size=$size>";



?>

This will link to a file that contains a class to create the thumbnail.

You can see how that class is done in my other tutorial HERE

Full Code for First Page:

PHP Code:


		
			
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

<script type="text/javascript">

//<![CDATA[

var request = false;



if(window.XMLHttpRequest){

  request = new XMLHttpRequest();

}else if(window.ActiveXObject){

  request = new ActiveXObject("Microsoft.XMLHTTP");

}



function getData(source){

  if(request){



    var per = document.getElementById("zoom").value;

    var size = document.getElementById("size").value;

    var src = document.getElementById("src").value;

    

    var newsource = source + "?per=" + per + "&size=" + size +"&src=" + src + "";

    request.open("GET",newsource);

    request.onreadystatechange = function(){

      

           if(request.readyState < 4){

              document.getElementById("displayImage").innerHTML = "Updating....";

         }

         else if(request.readyState==4){

             document.getElementById("displayImage").innerHTML = request.responseText;

          }

          

    }

    request.send(null);

  }

}



//]]>

</script>

</head>



<body>

<form id="form1" name="form1" method="post" action="">

  <table width="600" border="0" align="center" cellpadding="5" cellspacing="0">

    <tr>

      <td width="394" valign="top"><div class="displayImage" id="displayImage">Your image will be displayed here </div></td>

      <td width="186"><label><strong>Image Source: <br />

        <input name="src" type="text" id="src" onBlur="getData('process_thumb.php');" size="40" />

      </strong></label>

        <strong><br />

        <label>Zoom:

        <br />

        <select name="zoom" id="zoom" onchange="getData('process_thumb.php');">

          <option value="0.1">10%</option>

          <option value="0.2">20%</option>

          <option value="0.3">30%</option>

          <option value="0.4">40%</option>

          <option value="0.5">50%</option>

          <option value="0.6">60%</option>

          <option value="0.7">70%</option>

          <option value="0.8">80%</option>

          <option value="0.9">90%</option>

          <option value="1">100%</option>

          </select>

        <br />

        <br />

      Size </label>

        </strong>

        <label><br />

      <input name="size" type="text" id="size" value="250" onBlur="getData('process_thumb.php');"/>

      <br />

      <br />

      <strong>Example:</strong><br />

        This will create a 250 x 250 Square </label></td>

    </tr>

    <tr>

      <td valign="top">Please right click on the image and Save As to save to your computer </td>

      <td>&nbsp;</td>

    </tr>

  </table>

</form>

</body>

</html>