Resizing a pop up window

[JustRob]

Hello,On my website I have some clickable thumbnails of images. When clicked, the image opens in a new window. However, this window covers the entire screen, and I want it to be fitted to the image.My javascript is this

<script LANGUAGE="JavaScript"><!-- Idea by:  Nic Wolfe --><!-- This script and many more are available free online at --><!-- The JavaScript Source!! http://javascript.internet.com --><!-- Beginfunction 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=0,width=1280,height=1024,left = 0,top = 0');");}// End --></script>

[Ingolme]

This is a sad script... There is almost no situation where you would need eval(). The proper way to use a script tag is with the type attribute. And generally, tag names and attributes are written in lowercase. There's no need to surround scripts in comment tags; actually, I discourage the use of HTML comments within the script as they are not proper Javascript syntax.To change the size of the window, just change the width and height parameters:

<script type="text/javascript">/* Use Javascript comments if you need comments */function openWindow(URL) { id = "page" + (new Date()).getTime(); window[id] = window.open(URL,id,"toolbar=0,scrollbars=0,location=0,menubar=0,width=400,height=300");}</script>

[JustRob]

Okay yeah that works too, sorry bout the script I'm no javascripter so I just copied it from elsewhere.Anyway, your method works but that makes the window small. What if the visitor clicks a huge image? And I also don't want the window to be huge when they click small images. Do you see what I'm getting at, I want it to scale depending on the size of the clicked image.

[Ingolme]

You can't detect the size of the image.You'll have to manually add the size of the window to each function call and add the width and height as parameters of the function.

[jeffman]

Be aware that most users really, really hate pop-up windows, and reasonable developers use them only as a last resort. Further, once a window opens, users expect to be able to resize it to their own preference.Depending on your requirements, you might consider using a lightbox instead. jQuery has one, but there are other libraries available also.A lightbox simulates a pop-up dialog, but is still part of the parent document. They are less obtrusive, AND you get more control of the appearance and behavior than if you were using a window.

[JustRob]

Well the only other option is to open the image in a new tab or in the same page, both of which are even more annoying.I have no idea what Lightbox is...

[MrFish]

You can't detect the size of the image.

A trick for this would be to print each image to a hidden div element. Before the image is even loaded fully it will get the width/height and automatically resize so that you can find it's width/height. If you need to find the width/height of the image when the page loads you should use setTimeout() since it will not have it immediately (Unless it's in the users cache. But you shouldn't rely on this).html-

<div class='hidden'>...img elements...</div>

css-

.hidden{/* some versions of IE don't like 0px sizes. Better safe then sorry */width: 1px;height: 1px;visibility: hidden;overflow: hidden;z-index: 10000;position: absolute;top: 0px;left: 0px;}

Additionally this will also load the images for the user and most will be fully visible by the time they see it and won't have to wait for it to load. Which is also nice

[thescientist]

I have no idea what Lightbox is...

http://www.google.com/#hl=en&sugexp=ld...440&bih=779

[jeffman]

You can't detect the size of the image.

Actually, if you load the image as a JavaScript object, you can get the image's dimensions without having to display it at all.

var myImage = new Image();myImage.src = "path/to/myImage.jpg";myImage.onload = function () {   // do something with myImage.height and myImage.width}

[ShadowMage]

Actually, if you load the image as a JavaScript object, you can get the image's dimensions without having to display it at all.

Heh, that's what I was just about to suggest....

[jeffman]

The amazing thing is you can test that ^^ idea in 5 seconds just using your web console. Everybody, raise your hand if you ever try stuff like that! Anyone? Anyone?

[Ingolme]

Just a warning:You have set the onload handler before setting the src if you want the event to fire in Internet Explorer. Because if the image is stored in cache it won't fire the onload event.

[JustRob]

What do you mean?

[ShadowMage]

Just a warning:You have set the onload handler before setting the src if you want the event to fire in Internet Explorer. Because if the image is stored in cache it won't fire the onload event.

That's good to know.

What do you mean?

Instead of the way DD has it:

var myImage = new Image();myImage.src = "path/to/myImage.jpg";myImage.onload = function () {   // do something with myImage.height and myImage.width}

You'd need to do this:

var myImage = new Image();myImage.onload = function () {   // do something with myImage.height and myImage.width}myImage.src = "path/to/myImage.jpg";

[JustRob]

Question about Lightbox.<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>What do I put in the "image #1"? The image path? An <img src> with the image path? I hope neither because both don't work...

[justsomeguy]

Anything will work, it's just the text or image to click on for the link. What the link actually does is controlled by a Javascript file that sets up the lightbox. The content that you click on does not control what happens when you click on it, the Javascript controls that.

[JustRob]

Ohhh right I got it now. I got two things mixed up.Well Lightbox seems to achieve pretty much what I want, so I'll go with that for now.

[jeffman]

You have set the onload handler before setting the src

I consistently post that mistake over and over again. The code I use has the steps in the correct order. I must remember to post it correctly. Gaah.