Auto-sizing of Popup Window in JavaScript

Phil_man · January 28, 2001, 3:37pm

Hi:

I have a page where users click on a small thumbnail image to view a larger version of the image in a new window. But instead of just viewing the image file, I want them to view an HTML page that contains the image and a “Close Window” button. I know how to do that, and I know how to specify the size of the popup window. But…

What I’m trying to do is make the popup window just big enough for the image and the button, with perhaps a 10 pixel border around it. Since the images will vary in size, I can’t hard code the width and height properties of the popup window. I need to have JavaScript measure the height and width of the image to calculate the dimensions for the popup window (and presumable this would have to be done before it opens the new window). Can anyone help? Thanks!!

Fletch · January 28, 2001, 4:42pm

Hi,

I dont think it is possible for javascript to measure the dimensions of an image. Here is an alternative way you could do it:


<script language="Javascript">
<!--
function openPic(pic,width,height){
newWin=window.open('','ImageWin','width='+width+',height='+height+',toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,copyhistory=no,resizable=no');
newWin.document.open();
newWin.document.write('<html><head><title>Full Image<title></head><body><div align="center" valign="center"><center><img src="'+pic+'"></center><br><br><center><a href="javascript:self.close()"><font face="verdana">Close Window</font></a></center></div></body></html>');
newWin.document.close();
}
//-->
</script>

And then you would like to the image using:
<a href=“javascript:openPic(‘image.gif’,‘width’,‘height’)”>

so for example if you image was called phil-man.gif you could link to it using:
<a href=“javascript:openPic('phil-man.gif,‘300’,‘400’)”>.

You would obviously need to have the opup slightly bigger than the image to fit in the border and the close link
<Edited by Fletch on 01-28-2001 at 10:45 AM>

TWTCommish · January 28, 2001, 7:25pm

Heck, you can automatically detect the image’s HEIGHT and WIDTH attributes (not the actual size - the size you specify in the IMG tag) with JavaScript. Something like document.mypicture.width should work.

This might be useful, as you can take the value of that, automatically add, say, 25 to it for spacing. Obviously it’d be nice to automate as much of the process as possible.

That way, you could just pass the picture’s name as the sole argument to the function, and the function could then detect the height and width - so you’d have to specify those two attributes in the IMG tag, and the script does the rest.

TWTCommish · January 28, 2001, 8:40pm

I came up with something for ya’ (I need to learn JS from example anyway, so I took pleasure in this):


<html>
<head>
<title>JavaScript Image Test</title>
<script language="JavaScript">
function popWin(picname) {
var picture = document.picname;
var SRC = document.picture.src;
var height = document.picture.height + 50;
var width = document.picture.width + 50;
window.open(SRC,'popup','width=' + width + ',height=' + height + ',menubar=no,scrollbars=yes,toolbar=no,location=no,directories=no,resizable=no,top=50,left=50');
}
</script>
</head>

<body>
<p><a href="" onClick="popWin('picture'); return false;"><img src="http://www.mycoding.com/images/mycoding.gif" width="171" height="66" name="picture" border="0" alt="ALT Text Here"></a></p>
</body>
</html>

As you can see, the function requires almost not customization. Simply customize the image SRC value and the height and width, ALT Text, etc.

When the image/link is clicked, the function is triggered - as you can see, an argument is passed to it. This argument is the name the picture has. If you were to use this many times for a number of images on one page, it would require a seperate name each time.

The function uses that image name to grab the height and width properties (the SRC property as well for later use) specified in the picture through normal HTML attributes, adds 50 pixels to each them (customize that as you like), and opens the image’s SRC in a new window with the height and width expanded however many pixels you have set for each attribute.

Cool, eh? If you’d like me to modify it let me know.

Fletch · January 28, 2001, 9:07pm

Hi,

I know I didn’t ask the original question but thanks TWT, I will keep that in mind for future reference. I am only just learning javascript aswell so sorry for giving you wrong advice :).

Yopu may want to to combine TWT’s script and mine so the popup window contains a close windows link like you requested.

Phil_man · January 28, 2001, 10:41pm

Thanks, both of you, for your help! I WAS hoping there was a way to measure the physical attributes of the image, because the images will vary in size, as they are uploaded by users, and they are served up by a perl script. That is, without examining each image, we don’t know the height and width of the images. Which leads, perhaps, to another question: is it possible for perl to determine the height and width upon upload? If so, maybe there’s a way I can store the dimensions in the flatfile database that contains other user information. Any other ideas? Thanks again.

TWTCommish · January 28, 2001, 11:00pm

Not at all Fletch - your example was definintely helpful. Heck, mine isn’t exactly what was needed either. Phil-man: I don’t know Perl all that well, so I can’t say whether or not it’s possible, but I would imagine it to be.

However, PHP is capable of this. You can use the GetImageSize() function to return a four-element array containing the width, height, type of image (it produces “1” for a GIF, “2” for a JPG, and “3” for a PNG.), and a text string like this (useful for using directly in an IMG tag):

HEIGHT=“XX” WIDTH=“XX”

For example:

$array = GetImageSize($imagepath);
echo($array[1]);

That code would grab the info and echo out the height, in pixels, of the image.

Hope that helps. As you can see, you can easily use PHP in conjunction with JavaScript to produce what you want. Feel free to post here if you’d like more assistance.

TWTCommish · January 28, 2001, 11:20pm

Aw heck, I’m feeling ambitious today!

Here’s some code to try (see it in action: JavaScript/PHP Image Test)…


<html>
<head>
<title>JavaScript Image Test</title>
<script language="JavaScript">
function popWin(picname) {
var picture = document.picname;
var SRC = document.picture.src;
var height = document.picture.height + 50;
var width = document.picture.width + 50;
window.open(SRC,'popup','width=' + width + ',height=' + height + ',menubar=no,scrollbars=yes,toolbar=no,location=no,directories=no,resizable=no,top=50,left=50');
}
</script>
</head>

<body>
<?php
$array = GetImageSize("images/mycoding.gif");
?>
<p><a href="" onClick="popWin('picture'); return false;"><img src="http://www.mycoding.com/images/mycoding.gif" <?php echo($array[3]); ?> name="picture" border="0" alt="ALT Text Here"></a></p>
</body>
</html>

What’s happened here is that PHP’s GetImageSize() function has grabbed the data I mentioned earlier - and as before, the 4th element (numbered 3, though…) contains the HTML attributes to save us all some time. I’ve echoed that info in the middle of the IMG tag…

Since the PHP is processed on the server-side, the code is spit out as normal HTML, allowing JavaScript to grab the height/width attributes as before and add their 50 pixels onto it.

This could should be fairly easy to modify for use with a database, for example, which holds references to all these images. I think the function should have no problem with multiple images, as long as their name attribute is unique - if you were, say grabbing this info from an SQL database, you could simply use some kind of PictureID number as the name to make sure it is unique each time.

Now, I know what you’re thinking: it’s too plain. As it is now, it just open the image in a new window without any HTML formatting. However, I don’t think it would be too tricky to get around this.

Perhaps this line could be changed:

var SRC = document.picture.src;

…to something like this…

var SRC = “http://www.yoursite.com/showimage.php?src=” + document.picture.src;

Then, you just setup the showimage.php file to take the “src” variable from the Query String and use it to display the image in full - you can format around it as necessary!

TAAAAAAAAAAA-DAAAAAAAAA!

TWTCommish · January 28, 2001, 11:29pm

I AM SUCH A LOSER…here’s the showimage.php file too. I guess I have nothing better to do.

I apologize for these posts all in a row.


<?php
if (isset($src)) {
?>
<img src="<?php echo($src); ?>"><p>
<center><b><a href="javascript:window.close();">Close This Window</a></b></center>
<?php
}
else {
echo("Invalid image source specified.");
?>
<p><center><b><a href="javascript:window.close();">Close This Window</a></b></center>
<?php
}
?>

gspoer · January 30, 2001, 6:54pm

OK, I’m a little slow here, but going back to TWT’s original code…

<html>
<head>
<title>JavaScript Image Test</title>
<script language=“JavaScript”>
function popWin(picname) {
var picture = document.picname;
var SRC = document.picture.src;
var height = document.picture.height + 50;
var width = document.picture.width + 50;
window.open(SRC,‘popup’,‘width=’ + width + ‘,height=’ + height + ‘,menubar=no,scrollbars=yes,toolbar=no,location=no,directories=no,resizable=no,top=50,left=50’);
}
</script>
</head>

Aren’t you just passing the values of the image/link to the popup window? And, wasn’t the original question about opening a popup with a larger image on a page and a close button/link? This would seem to open the original image into a popup window with 50px around it.

You have to forgive me, I’m relatively new to javascript. Am I seeing this correctly?

TWTCommish · January 30, 2001, 7:31pm

Yes, you are. However, to do exactly what Phil-Man wanted, he’d have to store some kind of value in the database to seperate the thumbnail from the large image.

Or, he could re-size the image to a certain size, and then use GetImageSize() to grab the real size - however the thumbnails would take just as long to load as the actual image.

gspoer · January 30, 2001, 8:42pm

Thanks for confirming. That was a slick piece of code though.

TWTCommish · January 30, 2001, 9:04pm

No problem - and thanks very much. Ya wanna know what’s really sad? That’s probably the most complex JavaScript I’ve ever written…LOL.