Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Image Popup

Status
Not open for further replies.

eclipse33

Programmer
Apr 13, 2001
94
0
0
CA
Have a look at the popup code at the link below...is there anyway to stop the "flashing/double window" (ie the small blank window opens and then the larger window opens).


Code also pasted below..


==============================================================
Script: Auto-Sizing Image Popup Window

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
// Do not remove this notice.

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

// Do not edit below this line...
// ================================
if (parseInt(navigator.appVersion.charAt(0))>=4){
var isNN=(navigator.appName==&quot;Netscape&quot;)?1:0;
var isIE=(navigator.appName.indexOf(&quot;Microsoft&quot;)!=-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==&quot;Netscape&quot;)?1:0;');writeln('isIE=(navigator.appName.indexOf(&quot;Microsoft&quot;)!=-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[&quot;George&quot;].width;');writeln('window.innerHeight=document.images[&quot;George&quot;].height;}}');
writeln('function doTitle(){document.title=&quot;'+imageTitle+'&quot;;}');writeln('</sc'+'ript>');
if (!AutoClose) writeln('</head><body bgcolor=000000 scroll=&quot;no&quot; onload=&quot;reSizeToImage();doTitle();self.focus()&quot;>')
else writeln('</head><body bgcolor=000000 scroll=&quot;no&quot; onload=&quot;reSizeToImage();doTitle();self.focus()&quot; onblur=&quot;self.close()&quot;>');
writeln('<img name=&quot;George&quot; src='+imageURL+' style=&quot;display:block&quot;></body></html>');
close();
}}

</script>



==============================================================



STEP 2.
Calling the Image Popup from Links in Your Page

This is the form of the function:

imagePop(&quot;url_of_image&quot;,&quot;title_of_image&quot;)

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=&quot;javascript:popImage(' Title')&quot;>
Click Here
</a>


Example 2: Launching from an image link

<a href=&quot;javascript:popImage(' Title')&quot;>
<img src=&quot;YourImage.gif&quot; border=&quot;0&quot;>
</a>


Example 3: Launching from a form button

<form>
<input type=&quot;button&quot; value=&quot;Click Here&quot; onClick=&quot;popImage('SomeImage.gif','Some Title')&quot;>
</form>



============================[end]=============================
 
i don't think so...reason being that the script needs to know the dimensions of the image before it can resize the initial small window, and this can't happen until the image has loaded.

=========================================================
while (!succeed) try();
-jeff
 
eclipse33 & jemminger

Is there any way you could preload the image before displaying it in the pop-up?

Something like
Code:
var newPic = new Image(100,100);
newPic.src = &quot;SomePath/SomeImage.jpg&quot;;
in the JavaScript?

dolphyn
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top