Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

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

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

5+ Year Member

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?

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

WebmasterWorld Senior Member korkus2000 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

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?
7:48 am on Jan 6, 2007 (gmt 0)

5+ Year Member

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

Here's the unmodified script:


// Script Source: CodeLifter.com
// Copyright 2003
// Do not remove this notice.

// ===============================

// 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('var isNN,isIE;');writeln('if (parseInt(navigator.appVersion.charAt(0))>=4){');
writeln('function reSizeToImage(){');writeln('if (isIE){');writeln('window.resizeTo(100,100);');
writeln('window.resizeTo(width,height);}');writeln('if (isNN){');
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>');


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:

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!

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

WebmasterWorld Senior Member korkus2000 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

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>');