I'm writing a web-based application for a large wholesale company and I'm working with about 8000 pictures of various dimensions. I need to be able to open them up in a popup that is resized automatically to fit the picture. I have tried using PERL/PerlMagick to get the image dimensions, but it isn't working. So I tried doing it with javascript. Here is my code:
<script>
// Set the horizontal and vertical position for the popup
PositionX = 400;
PositionY = 400;
// Set these value approximately 20 pixels greater than the
// size of the largest image to be used (needed for Netscape)
defaultWidth = 1000;
defaultHeight = 1000;
// Set autoclose true to have the window close automatically
// Set autoclose false to allow multiple popup windows
var AutoClose = true;
if (parseInt(navigator.appVersion.charAt(0))>=4){
var isNN=(navigator.appName==\"Netscape\")?1:0;
var isIE=(navigator.appName.indexOf(\"Microsoft\")!=-1)?1:0;}
var optNN='scrollbars=no,width='+defaultWidth+',height='+defaultHeight+',left='+PositionX+',top='+Positi
onY;
var optIE='scrollbars=no,width=150,height=100,left='+PositionX+',top='+PositionY;
function popImage(imageURL,imageTitle){
if (isNN){imgWin=window.open('about :blank','',optNN);}
if (isIE){imgWin=window.open('about :blank','',optIE);}
with (imgWin.document){
writeln('<html><head><title>Loading...</title><style>body{margin:0px;}</style>');writeln('<sc'+'ript>');
writeln('var isNN,isIE;');writeln('if (parseInt(navigator.appVersion.charAt(0))>=4){');
writeln('isNN=(navigator.appName==\"Netscape\")?1:0;');writeln('isIE=(navigator.appName.indexOf(\"Microsoft\")!=-1)?1:0;}');
writeln('function reSizeToImage(){');writeln('if (isIE){');writeln('window.resizeTo(100,100);');
writeln('width=100-(document.body.clientWidth-document.images[0].width);');
writeln('height=100-(document.body.clientHeight-document.images[0].height);');
writeln('window.resizeTo(width,height);}');writeln('if (isNN){');
writeln('window.innerWidth=document.images[\"George\"].width;');writeln('window.innerHeight=document.images[\"George\"].height;}}');
writeln('function doTitle(){document.title=\"'+imageTitle+'\";}');writeln('</sc'+'ript>');
if (!AutoClose) writeln('</head><body bgcolor=000000 scroll=\"no\" onload=\"reSizeToImage();doTitle();self.focus()\">')
else writeln('</head><body bgcolor=000000 scroll=\"no\" onload=\"reSizeToImage();doTitle();self.focus()\" onblur=\"self.close()\">');
writeln('<img name=\"George\" src='http://www.webdeveloper.com/forum/archive/index.php/+imageURL+' style=\"display:block\"></body></html>');
close();
}}
</script>
and in the links:
<a href=http://www.webdeveloper.com/forum/archive/index.php/\"javascriptopImage('../images/$itemnumber.png','$itemnumber.png')\">click</a>
the window that is generated behaves like an autosized window, in that it starts out one size and when the image is loaded, it changes size, but it doesn't change to the same size as the image: the window is significantly smaller than the image after the image is loaded. What could be the problem?
Thanks!
Erin Spiceland
<script>
// Set the horizontal and vertical position for the popup
PositionX = 400;
PositionY = 400;
// Set these value approximately 20 pixels greater than the
// size of the largest image to be used (needed for Netscape)
defaultWidth = 1000;
defaultHeight = 1000;
// Set autoclose true to have the window close automatically
// Set autoclose false to allow multiple popup windows
var AutoClose = true;
if (parseInt(navigator.appVersion.charAt(0))>=4){
var isNN=(navigator.appName==\"Netscape\")?1:0;
var isIE=(navigator.appName.indexOf(\"Microsoft\")!=-1)?1:0;}
var optNN='scrollbars=no,width='+defaultWidth+',height='+defaultHeight+',left='+PositionX+',top='+Positi
onY;
var optIE='scrollbars=no,width=150,height=100,left='+PositionX+',top='+PositionY;
function popImage(imageURL,imageTitle){
if (isNN){imgWin=window.open('about :blank','',optNN);}
if (isIE){imgWin=window.open('about :blank','',optIE);}
with (imgWin.document){
writeln('<html><head><title>Loading...</title><style>body{margin:0px;}</style>');writeln('<sc'+'ript>');
writeln('var isNN,isIE;');writeln('if (parseInt(navigator.appVersion.charAt(0))>=4){');
writeln('isNN=(navigator.appName==\"Netscape\")?1:0;');writeln('isIE=(navigator.appName.indexOf(\"Microsoft\")!=-1)?1:0;}');
writeln('function reSizeToImage(){');writeln('if (isIE){');writeln('window.resizeTo(100,100);');
writeln('width=100-(document.body.clientWidth-document.images[0].width);');
writeln('height=100-(document.body.clientHeight-document.images[0].height);');
writeln('window.resizeTo(width,height);}');writeln('if (isNN){');
writeln('window.innerWidth=document.images[\"George\"].width;');writeln('window.innerHeight=document.images[\"George\"].height;}}');
writeln('function doTitle(){document.title=\"'+imageTitle+'\";}');writeln('</sc'+'ript>');
if (!AutoClose) writeln('</head><body bgcolor=000000 scroll=\"no\" onload=\"reSizeToImage();doTitle();self.focus()\">')
else writeln('</head><body bgcolor=000000 scroll=\"no\" onload=\"reSizeToImage();doTitle();self.focus()\" onblur=\"self.close()\">');
writeln('<img name=\"George\" src='http://www.webdeveloper.com/forum/archive/index.php/+imageURL+' style=\"display:block\"></body></html>');
close();
}}
</script>
and in the links:
<a href=http://www.webdeveloper.com/forum/archive/index.php/\"javascriptopImage('../images/$itemnumber.png','$itemnumber.png')\">click</a>
the window that is generated behaves like an autosized window, in that it starts out one size and when the image is loaded, it changes size, but it doesn't change to the same size as the image: the window is significantly smaller than the image after the image is loaded. What could be the problem?
Thanks!
Erin Spiceland