homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

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

5+ Year Member

Msg#: 3207371 posted 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?



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

Msg#: 3207371 posted 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?


5+ Year Member

Msg#: 3207371 posted 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 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!


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

Msg#: 3207371 posted 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>');

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved