April 11th, 2000, 06:04 AM
Hello all. I have a problem with pop-up windows. I would like to display thumbnails on my site. As soon as a visitor click on one of the pictures, il would open a new window (which I can customize, such as no status bars, resizable, no scroll bars....) displaying a larger picture. I know how to add the usual script in my site. The problem is that this script only allows me to set up a unique size of the new window. I would like to open a new window with the exact dimensions of each picture. For example, if dimensions of IMAGE 1 are 340x280, I would like that the new window opens with these dimensions. But I would like that the IMAGE 2 (278x456) opens in a window with different dimensions than the first one. And on and on.... For now, I'm only able to give unique dimensions to the new windows (example: 400x200 for all of them). Please e-mail me if you can help me. Many thanks in advance. Sorry about my bad english but I'm french....
April 11th, 2000, 03:43 PM
If the new window opens an HTML document with the image inside you can do the following:
Add to the <body tag this function:
All the windows will open with the size initially specified, and then resize accordingly to the numbers that you give to the function.
The problem is that you have to manually edit every page and put the dimensions of the image. There is a way to read the information from the HTML code, but I think that it only works on IE.
My english is also very bad and i'm not french; I'm Spanish
April 11th, 2000, 04:03 PM
Many thanks for your answer. I will try that and let you know if everything worked fine. You are fine. Thanks again.
Have a great day.
April 11th, 2000, 06:42 PM
Please let me know if there's another solution which will work for all browsers.
Thanks in advance for your answer.
April 11th, 2000, 09:25 PM
Well, I finally found a solution.
The new window now opens with the appropriate dimensions (without resizing them onece they are opened).
If you want to know what are the codes I used, watch the source of this page: http://www.multimania.com/charge69/charge_photos.html
Please note that the first picture opens in a regular window (too large for a pop-up window without scrollbars) but all the other ones open in a new pop-up window with the right dimensions.
Anyway, thanks for your help.
Have a great day.
April 13th, 2000, 05:42 PM
Here is a script I wrote that does all that:
<title>Preview Image in Popup Window</title>
//This section preloads the thumbnail images in the page
//Inside the parenthesis you can specify the width and height seperated by a comma to speed up loading
austthumb03 = new Image(73,50);
austthumb03.src = "images/australia03thumb.jpg";
austthumb04 = new Image(73,50);
austthumb04.src = "images/australia04thumb.jpg";
austthumb07 = new Image(62,50);
austthumb07.src = "images/australia07thumb.jpg";
//This function creates a popup window and inserts the image
preview = window.open("", imageWinName, "resizable=no,toolbar=no,scrollbars=no,menubar=no,status=no,directories=no,width="+w+",height="+h+", left="+x+",top="+y+"");
preview.document.write('<html><head><title>Popup Image Previewer</title></head>'
+'<body onLoad="self.focus();" marginWidth="0" topmargin="0" leftmargin="0" marginHeight="0">'
+'<center><img src="'+myImage+'" width="'+w+'" height="'+h+'"></center></body></html>');
<!-- Inside the parenthesis in the link you specify in order the:
Image location - URL or location of image file.
Popup window name - If you give them all the same name they will open in the same window else they will open in seperate windows.
Width - this is the width that will be given to the image and will also size the popup to that width.
Height - this is the height that will be given to the image and will also size the popup to that height.
Position from Left - This will position the popup from the left side of the screen specified in pixels.
Position from Top - This will position the popup from the top of the screen specified in pixels.
<img src="images/australia03thumb.jpg" width="73" height="50" border="0" alt="Click to view full image"></a>
<img src="images/australia04thumb.jpg" width="73" height="50" border="0" alt="Click to view full image"></a>
<img src="images/australia07thumb.jpg" width="62" height="50" border="0" alt="Click to view full image"></a>