Resize a Popup to Fit an Image's Size

This is an article discussion thread for discussing the SitePoint article, “Resize a Popup to Fit an Image’s Size

How do you make and linked image use the window over and over so no more than one needs to be opened?

Might try…


function PopupPic(sPicURL) { 
     window.open( "popup.htm?"+sPicURL, "[color=purple]picwin[/color]", "resizable=1,HEIGHT=200,WIDTH=200"); 
   } 

This example only works if popup.htm and the image are in the same directory. My images are stored in a nested directory tree while the popup.htm is in another directory altogether.

This is pretty easy to fix.

First change this line:

var picUrl = (arrTemp[1].length>0)?arrTemp[1]:"";

To this: (This is just a better var name)

var imgname = (temp.length>1)?temp[1]:"";

Add this right under the line you just changed:

var referrer = (document.referrer);

Then change this:

document.write( "<img src='" + picUrl + "' border=0>" );

To this:

document.write( "<img src='"  + referrer + imgname +"' border=0>" );

Your images can now be stored anywhere relative to your popup.htm (or .html for those who are not into MS file names) file.

Great script and the additional comments were a big bonus!

If you want to control where the pop up windows locates itself, change this line:

function PopupPic(sPicURL) {
window.open( “popup.htm?”+sPicURL, “picwin”, “resizable=1,HEIGHT=200,WIDTH=200”);
}

to look like this:

function PopupPic(sPicURL) {
window.open( “popup.htm?”+sPicURL, “picwin”, “resizable=1,HEIGHT=200,WIDTH=200, Left=15, Top=15”);
}

The number 15 can be changed to your desired location and possibly calculated for a dynamic location.

Thanks again!

nice solution, why does your sample not effect my pop up blocker , my my version does, i simply copied and pasted

Thanks for the useful script. The following seems to solve some problems with current IE6. (Some tidying up done also).

In my pop-up file, called imagpop.htm, I have

function imagpop_onload() {
var window_size = ICJ_browserWindowSize();
window.resizeBy(document.images[0].width - window_size[‘width’], document.images[0].height - window_size[‘height’]);
self.focus();
}

The ICJ_browserWindowSize function is:

function ICJ_browserWindowSize() {
var r = new Array();
r[‘width’] = 0;
r[‘height’] = 0;
if(typeof(window.innerWidth) == ‘number’ ) {
//Non-IE
r[‘width’] = window.innerWidth;
r[‘height’] = window.innerHeight;
}
else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
//IE 6+ in ‘standards compliant mode’
r[‘width’] = document.documentElement.clientWidth;
r[‘height’] = document.documentElement.clientHeight;
}
else if(document.body && (document.body.clientWidth || document.body.clientHeight)) {
//IE 4 compatible
r[‘width’] = document.body.clientWidth;
r[‘height’] = document.body.clientHeight;
}
return r;
}

Acknowledgments are due to the useful article at
http://www.howtocreate.co.uk/tutorials/index.php?tut=0&part=16
for ideas on window size.

Is it possible to do the same in iframe. I want to change the iframe size to image size without scrolling?

is it possible to make it always use the same popup window?

Great article, very much appreciated.

Thanks a lot! Very nice!

“dull”, just give the popup window a name in the PopupPic function. It’s the second parameter to the window.open function.

Thanks a bunch! I have modified this to center the popup window relative to the main window and it works great!

Can you elaborate on how to setup the passed url? Does it always remain SPicURL or do you put something in there for that?

I want to use this script but I am having trouble trying to get it to work with dynamic images where the urls are in a database. Its a detailed picture of a picture they already see and I want to pass the ID (primary key) from the database to the next page which shows the detail image but resizes it. Any ideas?

Why was resizeBy() use and not resizeTo()?

Can you make this code Opera-compatible?
Thank you

Is it just me or do you ingrates bitch too much ?
Great little script that one, taught me a few more things about Javascript.

I tested on Mozilla, IE & Safari and it worked fine.

Cheers!

is it possible to have the pop up window close when another thumbnail/link is clicked?

I am having trouble getting it to work on a Mac using internet explorer 5.2.3. It seems alright with netscape and safari but not Internet Explorer. Any insights?

if you want the images to open in the same popup change
window.open( “popup.html?”+sPicURL, “”,
“resizable=1,HEIGHT=200,WIDTH=200”);
to window.open( “popup.html?”+sPicURL, “poppis”,
“resizable=1,HEIGHT=200,WIDTH=200”);