auto-size pop window to image, centered in page, click image to close

Forum Moderators: open

Message Too Old, No Replies

auto-size pop window to image, centered in page, click image to close

fitzle

10:52 pm on Jan 3, 2007 (gmt 0)

I found a script that enables me to popup a window for an image, auto-sizing the window to the image dimensions, positioning the window at a specific number of x/y pixels, then after a set period of time the window closes.

What I'd like to do is have the popup window auto-size to the image dimensions and position itself at the center of the page, and when the user clicks anywhere on the image, the window closes.

I've tried modifying the script but to no avail.

Any suggestions?

korkus2000

6:06 pm on Jan 5, 2007 (gmt 0)

I assunme it is using a window.close() maybe inside a setTimeout method? Does the window open up any type of html or is it only a link to the image source itself? It is a page that you can add a link to the picture?

fitzle

7:48 am on Jan 6, 2007 (gmt 0)

The script creates an html page the same size as the image.

Here's the unmodified 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=="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()">')
else writeln('</head><body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()" onblur="self.close()">');
writeln('<img name="George" src='+imageURL+' style="display:block"></body></html>');
close();
}}</script>

I tried modifying Position X & Y from another center screen script:

PositionX = (screen.width)? (screen.width-w)/2 : 0;
PositionY = (screen.height)? (screen.height-h)/2 : 0;

and then plug it into this script ala:

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)

but it doesn't work.

Obviously I know just enough to make myself useless!

korkus2000

2:33 pm on Jan 8, 2007 (gmt 0)

Try replacing this line at the end of the script:

writeln('<img name="George" src='+imageURL+' style="display:block"></body></html>');

with this

writeln('<a href="javascript:self.close()"><img name="George" src='+imageURL+' style="display:block" border="0"></a></body></html>');