Hello,

I want to use image resize and add to it facebox image viewer.

Image view in facebox is working great in IE.
In firefox sometimes it desplay the image url in the window.
In Google Chrome it is not working at all.

I tried it locally and in the localhost and online. Same thing.

HTML 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>
<script src="facebox/jquery.js" type="text/javascript"></script>
<link href="facebox/facebox.css" media="screen" rel="stylesheet" type="text/css" />
<script src="facebox/facebox.js" type="text/javascript"></script>
<script type="text/javascript">
    jQuery(document).ready(function($) {
      $('a[rel*=facebox]').facebox() 
    })
</script>
<script type="text/javascript" language="javascript" src="facebox/resize_images.js"></script>
</head>
<body onload="resizeImages();" >
<img src="image1.jpg">
<img src="image2.jpg">
</body>
</html>

resize_images.js

Code:
function resizeImages() 
{ 
          if (document.images.length > 0)          //Has images, validate sizes 
          { 
// edit this variable to set the max width
// of images
		var maxWidth = 80;
               	var imgHeight; 
               	var imgWidth; 
               	for (var loop = 0; loop < document.images.length; loop++) 
               { 
                         imgWidth = document.images[loop].width; 
                         imgHeight = document.images[loop].height; 
				image = new Image();
                              	image = document.images[loop]; 
				newImage = image.cloneNode( true )	;
				// store the origninal height and width 
                              	newImage.origHeight = image.height;
                            	newImage.origWidth = image.width
                             	newImage.width = maxWidth ; 
                              //Proportionalize Height 
                              	imgHeight = imgHeight / (imgWidth/ maxWidth ); 
                              	newImage.height = imgHeight; 

				if( image.outerHTML )
				{ 
				} else {
                	              	newImage.onclick = function () { 
					}; 
				}

				// get parent node
				// insert this in a table witha message to click to resize
				if( parentNode = image.parentNode )
				{
					elem = document.createElement("td");
					elem.setAttribute( "align", "center");
					elem.style.backgroundColor = '#ffffe7';
					elem.style.color = 'blue';
					elem.style.fontWeight = '900';
					elem.style.fontSize = '8pt';
					var newDiv = null;
					newDiv = document.createElement("div");
					newDiv.innerHTML = "<a href='"+image.src+"' rel='facebox'>enlarge<\/a>";
					elem.appendChild(newDiv);	
					elem.appendChild( document.createElement("br"));
					elem.appendChild( newImage );	
					tableRow = document.createElement("tr");
					tableRow.appendChild(elem);
					TableElem = document.createElement("table");
					TableElem.setAttribute( "border", "1");
					TableElem.appendChild( tableRow );
					frag = document.createElement("div");
					frag.appendChild( TableElem );
					if( image.outerHTML )
					{
						image.outerHTML = frag.innerHTML;
					} else {
						parentNode.replaceChild( TableElem, image );
					}
				}
               } 
          } 
     }
Why this line don't call facebox?

Code:
newDiv.innerHTML = "<a href='"+image.src+"' rel='facebox'>enlarge<\/a>";
Regards,