PDA

Click to See Complete Forum and Search --> : autosizing popup windows to a picture

linuxChique
03-13-2003, 11:31 AM
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='+imageURL+' style=\"display:block\"></body></html>');
close();
}}

</script>

and in the links:

<a href=\"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
Vladdy
03-13-2003, 11:33 AM
Before you go any further think about all the users who have pop-up blockers...
gil davis
03-13-2003, 11:56 AM
Take a look at this:

http://gil.davis.home.att.net/openit_example.htm
linuxChique
03-13-2003, 12:17 PM
Vladdy,

But remember this is for a company. Sure, its a web-based application, but it will be running on a server that is unaccessible to the internet on a private intranet. All the computers accessing the application will be company computers and company employees. Believe me, these people dont know what popups are, much less popup blockers.

Gil,

Maybe its my browser - I'm using Mozilla - but it didn't work for me. :-| The picture popped up in a fullsized window that never resized itself to the picture, and there was another window that said "picture loading please wait," and nothing ever happened in that window.

oh well - thanks anyways! :-)

Erin Spiceland

update: i tried it on IE and it eventually resized itself (there was only one window that popped up in IE) but the picture never displayed in the newly resized window, and the window did not have the same dimensions as the image.
gil davis
03-13-2003, 12:53 PM
Originally posted by linuxChique
Gil,

Maybe its my browser - I'm using Mozilla - but it didn't work for me. :-| The picture popped up in a fullsized window that never resized itself to the picture, and there was another window that said "picture loading please wait," and nothing ever happened in that window.I just finished fixing it - it was broken in NS 6 as well (based on Mozilla). Try it again, and let me know.
linuxChique
03-13-2003, 01:38 PM
gil,

same results, sorry!
shayta
04-23-2003, 09:25 PM
I'm having the same dilemma. have you figured out the problem with your code, Linux? Or perhaps another way to do this?

Just curious, but if you pass an image to a function, is there a way to get the image's width and height that way? I'm still new to Javascript, so go easy :).

I know this doesn't work, but it would be nice if it did.

function openimage(image)
{
var imageWidth,imageHeight;
imageWidth=image.width;
imageHeight=image.height;

ImageWindow = window.open ('','newwindow','width=imageWidth,height=imageHeight');
ImageWindow.document.write('<body><center>');
ImageWindow.document.write('<IMG SRC="' + image + '">');
ImageWindow.document.write('<BR><FORM><INPUT TYPE="BUTTON" VALUE="Close Window" onClick="window.close()"></FORM>');
ImageWindow.document.write('</CENTER></BODY>');
ImageWindow.document.close();
}
//-->