Ajax script to scale images

What we want is to present a gallery of images or just thumbnails, and when the mouse passes over an image, the image appears in full size. The advantage of using Ajax is in asynchronous mode unique to the XMLHttpRequest object, which we will allow loading images when the page is already loaded, and while the user reads the page, without any delay at loading of the page, or at display of the image...

function createXHR() 
{
  var request = false;
  try { request = new ActiveXObject('Msxml2.XMLHTTP'); }
  catch (err2) { 
    try { request = new ActiveXObject('Microsoft.XMLHTTP'); }
    catch (err3) {
    try { request = new XMLHttpRequest(); }
    catch (err1) {
      request = false;
   }
  }
 }
 return request;
}

function preloading(url)
{
  var xhr=createXHR();   
  xhr.onreadystatechange=function()
  { 
    if(xhr.readyState == 4)
    {
      var content = xhr.responseText;
      var i = new Image();
      i.src = content;
    } 
  }; 
  xhr.open("GET", url , true);
  xhr.send(null); 
} 

The demo

In this demo, we put a gallery of thumbnails on the left, in a div whose ID is "leftview" and at the center of the page a field is ready to display the full image, with the name "bigview."

At each thumbnail is associated a "onmouseover" HTML method, which triggers an event when the mouse passes over the small image. If one prefers to view the image only when the user clicks on the thumbnail, "onclick" may be used instead.
The associated value is "enlarge (this)" that calls the JavaScript "enlarge" function with the parameter "this", which represents the current img tag.
The function enlarge builds an img tag to be placed in the central display space. It assumes that the labels have the prefix "thumb-" and the images in full size the prefix "big-". Simply change the prefix to have the name of the image for each thumbnail.

function enlarge(element)
{
  var name = element.src;
	
  name = localFilename(name);       // remove the path
  name = name.slice(6);           // remove the "thumb-" part
  name = "images/big-" + name;    // restore the path and adds "big-" prefix
		
  // building a string to display the image
	
   var str = " < img='" + name + "'>";
   document.getElementById("bigview").innerHTML = str;
}

Compatibility: Firefox, Chrome, IE9.

HTML code

<div id="views">
<div id="leftview">
  <p><img src="images/thumb-girl.gif" width="199" height="152" onmouseover="enlarge(this)"> </p>
  <p><img src="images/thumb-thinking.gif" width="198" height="173" onmouseover="enlarge(this)"></p>
  <p><img src="images/thumb-sand.gif" width="200" height="196" onmouseover="enlarge(this)"></p>
  <p><img src="images/thumb-sea.gif" width="200" height="348" onmouseover="enlarge(this)"></p>
  </div>
<div id="bigview" onclick="alert(this);">
</div>
</div>

CSS code

#views
{
  position:relative;
  height:932px;
  min-heigth:932px;
  margin:16px;
  overflow:auto;
}

#leftview
{
  position:absolute;
  top:0px;
}

#bigview
{
  position:absolute;
  top:0px;
  left: 300px;	
  background-color:while;
  width:400px;
  height:400px;
  min-height:400px;	
}

Full JavaScript code

Preloading:

<script src="ajax.js" type="text/javascript"></script>
<script src="gallery.js" type="text/javascript"></script>
<script language="JavaScript">
preloading("images/big-girl.gif");
preloading("images/big-thinking.gif");
preloading("images/big-sea.gif");
preloading("images/big-sand.gif");
</script>

Displaying:

<script>
function localFilename(url)    // removing path
{
  var x = url.lastIndexOf("/");
  url = url.slice(x + 1);
  return url;		
}

// images are loaded asynchronously with no delay

function preloading(url)
{
  var xhr=createXHR();   
  xhr.onreadystatechange=function()
  { 
    if(xhr.readyState == 4)
    {
      var content = xhr.responseText;
      var i = new Image();
      i.src = content;
    } 
  }; 

  xhr.open("GET", url , true);
  xhr.send(null); 
} 

function enlarge(element)
{
  var name = element.src;
	
  name = localFilename(name);
  name = name.slice(6);   // remove the "thumb-" part
  name = "images/big-" + name;  // restore path and add the new "big-" prefix
		
  // building a string to display the image
	
  var str = "<img src='" + name + "' >";
  document.getElementById("bigview").innerHTML = str;
}
</script>

Download the demo