PDA

View Full Version : popup window question

runnerboy49
11-11-2002, 09:10 PM
sorry if this is a redundant topic...but i'm want to know how to get a popup so that it is the exact size of the picture that is popping up. with what I have now it has white to the left and top of the image and not all is shown in the popup.
this is what I was using

<SCRIPT LANGUAGE="JavaScript">
<!-- Idea by: Nic Wolfe (Nic@TimelapseProductions.com) -->
<!-- Web URL: http://fineline.xs.mw -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=1,width=400,height=300');");
}
// End -->
</script>

and <A HREF="javascript:popUp('/image.jpg)">link</a>

is there a better script that I should use
beetle
11-11-2002, 10:16 PM
I just threw together these functions that should do the trick. I've been meaning to do this for a while now anyways...function popImg(imageURL) {
var imgWin = window.open('about:blank','imgWin','width=200, height=200, left=100, top=100');
with (imgWin.document) {
writeln('<html><head><title>Loading...</title>');
writeln('<style type="text/css"><!-- body { margin: 0px; } --></style></head>');
writeln('<body onload="self.focus();"><img id="pic" style="display:none" /></body></html>');
close();
}
var img = new Image();
img.src = imageURL;
img.onload = function() { sizeImgWin(imgWin, img) };
}

function sizeImgWin(win, img) {
var new_w = img.width;
var new_h = img.height;
var old_w = self.innerWidth || document.body.offsetWidth;
var old_h = self.innerHeight || document.body.offsetHeight;
if (!new_w) { new_w = old_w; }
if (!new_h) { new_h = old_h; }
new_w -= old_w; new_h -= old_h;

win.document.title = img.src.substring(img.src.lastIndexOf("/")+1);
var pic = win.document.getElementById('pic');
pic.src = img.src;
pic.style.display = 'block';
}The only parameter you pass it is an absolute/relative path to the image. Below are a couple examples of use...<a href="images/7.jpg" onclick="popImg(this.href); return false;">Pic 7</a>
<input type="button" value="Image 9" onClick="popImg('images/9/jpg');" />Thanks to joh6nn for the inner resize (http://www.codingforums.com/showthread.php?s=&threadid=8665) algorithm :D

Tested ok with IE6 and Moz 1.0