Virtual Mechanics: Support Virtual Mechanics: Community Forums and FAQs Virtual Mechanics: Community Forums and FAQs Web General Discussion Java Script Image popup
Virtual Mechanics: Community Forums and FAQs Virtual Mechanics: Community Forums and FAQs Web General Discussion Java Script Image popup|
Go
|
New
|
Find
|
Notify
|
Tools
|
Reply
|
|
|
Working Mechanic |
Hi just wanting to get some advice on an image popup java script to autosize around an image.I know the in built popup scripts does this but because I am sorting out my images into other directories this script doesnt work as .Brucee I had a look at your usertips which were very helpful but the script there requires you to specify Width and Height of an image.I did find a script on the net which should work but for the life of me i cannot get it to work on an image on my local drive.Can someone be kind enough to have a look for me.I hope I have made some sort of sense?
Script: Auto-Sizing Image Popup Window Modified: Automatic timed closure added Functions: Use this script to launch a popup window that automatically loads an image and resizes itself to fit neatly around that image. The script also places a title you set in the titlebar of the popup window. Any number of images can be launched from a single instance of the script. Browsers: NS6-7 & IE4 and later [Degrades functionally in NS4] Author: etLux ============================================================== STEP 1. Inserting the JavaScript <script> In Your Page Insert the following script in the <head>...</head> part of your page. Take special care not to break any of the lines; they must be exactly as shown. Set the variables as per the instructions in the script. <script> // Script Source: CodeLifter.com // Copyright 2003,2006 // Do not remove this notice. // MODIFIED: Timed closure added 04.05.2006 - etLux // SETUPS: // =============================== // Set the horizontal and vertical position for the popup PositionX = 100; PositionY = 100; // Set these value approximately 20 pixels greater than the // size of the largest image to be used (needed for Netscape) defaultWidth = 500; defaultHeight = 500; // Set autoclose true to have the window close automatically // Set autoclose false to allow multiple popup windows var AutoClose = true; // Set the value in milliseconds to close the window // automatically after this amount of time // 1000 milliseconds equals one second var closeTime =10000; // Do not edit below this line... // ================================ var closeCode = ";setTimeout('self.close()',"+closeTime+")"; if (parseInt(navigator.appVersion.charAt(0))>=4){ var isNN=(navigator.appName=="Netscape")?1:0; var isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;} var optNN='scrollbars=no,width='+defaultWidth+',height='+defaultHeight+',left='+PositionX+',top='+PositionY; var optIE='scrollbars=no,width=150,height=100,left='+PositionX+',top='+PositionY; function popImage(imageURL,imageTitle){ if (isNN){imgWin=window.open('about:blank','',optNN);} if (isIE){imgWin=window.open('about:blank','',optIE);} with (imgWin.document){ writeln('<html><head><title>Loading...</title><style>body{margin:0px;}</style>');writeln('<sc'+'ript>'); writeln('var isNN,isIE;');writeln('if (parseInt(navigator.appVersion.charAt(0))>=4){'); writeln('isNN=(navigator.appName=="Netscape")?1:0;');writeln('isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}'); writeln('function reSizeToImage(){');writeln('if (isIE){');writeln('window.resizeTo(100,100);'); writeln('width=100-(document.body.clientWidth-document.images[0].width);'); writeln('height=100-(document.body.clientHeight-document.images[0].height);'); writeln('window.resizeTo(width,height);}');writeln('if (isNN){'); writeln('window.innerWidth=document.images["George"].width;');writeln('window.innerHeight=document.images["George"].height;}}'); writeln('function doTitle(){document.title="'+imageTitle+'";}');writeln('</sc'+'ript>'); if (!AutoClose) writeln('</head><body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()'+closeCode+'">') else writeln('</head><body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()'+closeCode+'" onblur="self.close()">'); writeln('<img name="George" src='+imageURL+' style="display:block"></body></html>'); close(); }} </script> ============================================================== STEP 2. Calling the Image Popup from Links in Your Page This is the form of the function: popImage("url_of_image","title_of_image") Use the relative or absolute path of the image where we show url_of_image. This is the url of the image you wish to show in the auto-sizing popup window. Use any text you wish where we show title_of_image. This is the title that will appear in the titlebar of the popup. (Note: do not use single- or double-quotes within a title.) Caution: Be careful to place both values within quotes. See the samples below. Example 1: Launching from a text link <a href="javascript  opImage('http://SomeSite.com/SomeImage.gif','Some Title')">Click Here </a> Example 2: Launching from an image link <a href="javascript opImage('http://SomeSite.com/SomeImage.gif','Some Title')"><img src="YourImage.gif" border="0"> </a> Example 3: Launching from a form button <form> <input type="button" value="Click Here" onClick="popImage('SomeImage.gif','Some Title')"> </form> ============================[end]============================= |
||
|
Guru 'Power' Mechanic |
STEP 1: Place the code as a custom header -- Page Editor > Header tab
STEP 2: The general form of links from image or text is this javascript:popImage('http://SomeSite.com/SomeImage.gif','Some Title') More here. I assume you won't be using the form button. A more elegant style for the links is this: javascript:popImage('myImages/SomeImage.gif','Some Title')This assumes you have a folder named myImages on your site, just like the usual image folder. To preview, without being connected to the Web, create a myImages folder in your SiteSpinner preview folder, and copy your large images to that. |
|||
|
|
Working Mechanic |
Thanks Brucee....
|
|||
|
|
Working Mechanic |
Brucee I know its probably not the right forum to ask but would you know why the above script doesnt seem to autosize? popup etc works fine though?
Thanks Crows |
|||
|
|
Guru 'Power' Mechanic |
No, it does claim to autosize. First thing I'd check is to make sure the code you have is exactly the same as the original. Then try another browser, just in case it is one browser that is misbehaving.
|
|||
|
Guru 'Geezer' Mechanic |
I've also been trying to resize a popup window to fit an image. From what I found out in my debugging is that references to document.images[0].width will not work because the document isn't created yet. However, I did find some javascript functions that should work at:
http://www.aspandjavascript.co.uk/javascript/javascript...age_width_height.asp This page has functions for getImageWidth and getImageHeight and well as links to the supporting functions required (getImage, getElementWidth and getElementHeight). But I have not done any further testing yet. On another note, there seems to be built in image size functions in PHP that I have seen working at http://regretless.com/scripts/scripts.php (look at dodosnmimage) |
|||
|
| Powered by Eve Community |
 | Please Wait. Your request is being processed... |
|
™ & © 1998 - 2008, Virtual Mechanics Inc. All rights reserved.