Pop-Up: Size-to-image problem

[UofRtist]

I have lots of thumbnail images on lots of different pages. I'd like to make a single .js file with a generic function that takes an img src as input, preloads this large version of the thumbnail, gets its width and height, and opens a new window based on that size.

Not difficult to code, right? Except the image is not done preloading by the time I call its height and width! So the window ends up tiny and the image is too big for it.

Ultimately, I told the onclick to load the large image into a 1x1 image hidden on the thumbnail page. Then I gave that 1x1 an onload handler that caused the popup, reasoning that width and height must be accurate by then. Success! Except it doesn't work on Safari, Opera, or anything on a Mac. Plus, it seems like anyone who has disabled pop-ups ignores onload commands automatically?

I don't want to delay getting dimensions for some arbitrary time because it's inefficient, and I'd rather it were started by a complete load. I tried constantly checking (while !image.complete do nothing) but that sucks all processor power (oops). I don't want to use width and height of large images as arguments in the onclick because there are so many images and I plan to add more. I don't want to keep checking image.complete at an interval because it'd be cleaner if it were event-driven and because .complete isn't universally supported (only JS 1.1 and only some browsers).

The working version (in IE, Netscape, and Mozilla on PCs) can temporarily be found at http://www.robinpulver.com/test4.html . Two images are available and work just fine. Take a look, it's very simple coding.

I've been playing around with opening an existing .html file with an <img src="">, then changing the src and resizing the window... can't quite make that work either.

Is there a clean way to do this that's universal? Keep in mind I'm a beginner with all the foundations but none of the truly advanced or browser-specific knowledge. If there's no simple way, I'll just include the larger image dimensions in the onclick handler of the thumbnails; it just leaves room for error and requires much more work.

Thanks so much to any guru that can help...

[khalidali63]

You may like to check this link out..

http://68.145.35.86/skills/javascripts/OpenImageSizedWindow.html

[UofRtist]

Hi Khalid,

Thanks, but you preload the image right as the page is loading, correct? I have enough thumbnails to load, let alone the number of larger images. If I load every large image (that they might not even choose to see), it will take forever. That's why I'm trying to preload and get dimensions on the fly...

[khalidali63]

lol....the idea remains the same....

Take a look at the code

var newImg = new Image();
newImg.src = "images/rockies4a.jpg";
function Process(url){
newImg.style.border="0px";
//create image sized window
var winProps = "width="+(newImg.width+20)+", height="+(newImg.height+24)+", scrollbars=no, toolbar=no, directories=no, menu bar=no, resizable=yes, status=yes";
newWin=window.open("","newWin",winProps);
newWin.document.open();
newWin.document.write("<img id='dynaImg' src='"+newImg.src+"' alt='Dynamicaly wized window with this image' />");

}


how hard this could be to insert these lines of code

var newImg = new Image();
newImg.src = "images/rockies4a.jpg";

inside of the function process,changed function will be like this


function Process(url){
var newImg = new Image();
newImg.src = "images/rockies4a.jpg";
newImg.style.border="0px";
//create image sized window
var winProps = "width="+(newImg.width+20)+", height="+(newImg.height+24)+", scrollbars=no, toolbar=no, directories=no, menu bar=no, resizable=yes, status=yes";
newWin=window.open("","newWin",winProps);
newWin.document.open();
newWin.document.write("<img id='dynaImg' src='"+newImg.src+"' alt='Dynamicaly wized window with this image' />");
}

[UofRtist]

Hey Khalid, I appreciate your prompt help. If you go back to my original post, you'll see that what you just posted was the first thing I tried! Just now, I tried your EXACT code to see if there was some nuance making the difference.

What made me post at all is that the codes you and I wrote don't work. You thought like I did: preload on demand, get width and height, and open a window. If you try the code you wrote with an UNCACHED image, you'll see that the width and height are undefined. Again, this is because the image isn't done loading when you call its width and height. You can test this by having the viewer window just write the height and width. It writes "undefined".

So of course it's not hard to alter the function, but I need one that works :) I want the function to continue based on the completion of the image load, but image.complete isn't universally supported etc.... see the first post for other things I tried. I can always use known dimensions as input to functions. I just have a ton and will add more.

Let me know if you think of anything, or if I missed your point entirely. I think I just didn't state what I had tried clearly enough. Thanks for your help!

[pyro]

You might want to try looking at this page... It may help you along... http://www.infinitypages.com/research/imagepopup.htm

[printelectric]

I'm trying to solve the same problem.
The first solution that I arrived at worked for:
Mac Mozilla 1.7 (5.5), Mac Netscape 7, Mac IE 5.5, and IE for XP.

Since then, I have gone absolutely off the deep end
trying to find a solution for Safari.

I haven't figured this out yet, but I think I've isolated the problem.
I have a test page online which just spits out trace info so that you can
see what's going on in the function. Right now I'm trying to get the
width and height of the loaded image BEFORE I open a new window.
This works great in Mozilla, but not Safari or IE Mac.

If you've got time, take a look at my code and let me know what you think.
I'm beginning to think there is a bug with the image.onload event in Safari.
If anyone has other thoughts, PLEASE let me know. I'm dyin' here.

Also, I do have a really nice working solution for every
browser EXCEPT Safari. If anyone wants, I'll post it.

I've also attached my test code.

My test page is here: http://www.printelectric.com/dev/test/