PDA

View Full Version : Please help Facebox and Image resize.



emovip
11-29-2010, 05:34 PM
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.


<!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



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?


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

Regards,