Jump to content

Resizing a pop up window


JustRob
 Share

Recommended Posts

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>

Link to comment
Share on other sites

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>
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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}

Edited by Deirdre's Dad
Link to comment
Share on other sites

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....:)
Link to comment
Share on other sites

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?

Edited by Deirdre's Dad
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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";

Edited by ShadowMage
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...