|
|||||||||
|
|||||||||
| |||||||||
|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
#1
April 11th, 2000, 05: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....
|
|
#2
April 11th, 2000, 02: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: <body onLoad="window.resizeTo(278,456)"> 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 Au revoir!
|
|
#4
April 11th, 2000, 05:42 PM
|
|||
|
|||
|
Well, I tried this function (window.resizeTo). It works fine with IE4 but does not work with Netscape3. It opens a new window (with the predefined dimensions) but won't resize the window with new dimensions. Instead, I get a javascript error message saying: window.resizeTo is not a function. I'm then stucked with a little window 100x100 for pictures which are at least 4 times bigger than that. I don't know if there's the same problem with Netscape4 since I don't have it installed on my computer.
Please let me know if there's another solution which will work for all browsers. Thanks in advance for your answer.
|
|
#5
April 11th, 2000, 08: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.
|
|
#6
April 13th, 2000, 04:42 PM
|
|||
|
|||
|
Here is a script I wrote that does all that:
<html> <head> <title>Preview Image in Popup Window</title> <script language="Javascript"> <!--// //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 function imageView(myImage,imageWinName,w,h,x,y){ 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>'); preview.document.close(); } // --> </script> </head> <body> <!-- Inside the parenthesis in the link you specify in order the: <a href="javascript:imageView('imagelocation','Popup window name','Width','Height','Left','Top')"> 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. --> <a href="javascript:imageView('images/australia03.jpg','MyPopup','200','200','300','100')"> <img src="images/australia03thumb.jpg" width="73" height="50" border="0" alt="Click to view full image"></a> <br> <a href="javascript:imageView('images/australia04.jpg','MyPopup','200','200','300','100')"> <img src="images/australia04thumb.jpg" width="73" height="50" border="0" alt="Click to view full image"></a> <br> <a href="javascript:imageView('images/australia07.jpg','MyPopup','200','200','300','100')"> <img src="images/australia07thumb.jpg" width="62" height="50" border="0" alt="Click to view full image"></a> </body> </html> Enjoy Spookster
|
|
| Viewing: Dev Shed Forums > Web Design > HTML Programming > Multiple new pop-up windows |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
