Forum Moderators: open
When I pop a window (to show a full-size version of an image thumbnail), the window puts extra whitespace around 3 of the image's borders, and cuts the image off on the 4th border. It looks like crap, and I have no idea why it's choosing to open itself at a size other than what i have declared (640x480). And so, I present to you my code:
JS:
<script type="text/javascript">
var newwindow;
function picpopper(url)
{
newwindow=window.open
(url,'name','width=640','height=480');
if (window.focus) {newwindow.focus()}
}
</script>
HTML:
<a href="WBAEJ13481AH60616_1.jpg" onclick="picpopper('WBAEJ13481AH60616_1.jpg'); return false;">
<img src="WBAEJ13481AH60616_1.jpg" width="97" height="73" /></a>
Assistance is much appreciated.
You need to put the image inside a html file with all the margins set to 0 to have the borders of your popup hug the image.
In your HTML file, make sure you body tag looks something like this:
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">
It should be
newwindow=window.open
(url,'name','width=640,height=480');
not
newwindow=window.open
(url,'name','width=640','height=480');
The syntax is url, window name, parameter list. You're wise to do something unique for the id (your var is 'name') so that each time it's clicked it opens in a new window. Otehrwise, if they don't close it, go back to the main window, and click another link, it will load in the same window and they'll think nothing happens:
var day = new Date();
var id = day.getTime();
newwindow=window.open
(url,id,'width=640,height=480');
And for the love of God, please, I BEG you, include resizable in your parameter list, and if you're really generous scrollbars too, I've been on far to many sites where developers make all the wrong assumptions about my monitor size and resolution. :-)
newwindow=window.open
(url,id,'width=640,height=480,resizable,scrollbars');
If you really want to get slick - pass the image width and height to your popup, and create a window size based on the image.
onclick="picpopper('image.jpg',200,300);"
function picpopper(img,w,h) {
var day = new Date();
var id = day.getTime();
var ww = w+75;
var wh = h+125;
var params = 'width='+ww+',height='+wh+',resizable,scrollbars';
var html = '<html><head><style type="text\/css">\n'+
'body,html { text-align: center; margin-top:12px; margin-bottom:12px; }\n'+
'<\/style><\/head><body>\n'+
'<img src="'+img+'" width="'+w+'" height="'+h+'" border="0" alt="'+img+'">\n'+
'<form><input type="button" onClick="window.close();" value="Close Window"><\/form>\n'+
'<\/body><\/html>';
newwindow=window.open('',id,params);
newwindow.document.write(html);
newwindow.close();
}
PS - the previous '" are double quotes in the string, single quotes qualifying the string, as in ' this "is" my string'
That might be the most thorough (or 'kick-ass'... whichever you prefer) reply I've ever received in a a thread. Thanks very much.
