Welcome to WebmasterWorld Guest from 54.144.3.134

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)

New User

5+ Year Member

joined:Jan 1, 2007
posts:3
votes: 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?

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

Senior Member

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

joined:Mar 20, 2002
posts:3732
votes: 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?
7:48 am on Jan 6, 2007 (gmt 0)

New User

5+ Year Member

joined:Jan 1, 2007
posts:3
votes: 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!

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

Senior Member

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

joined:Mar 20, 2002
posts:3732
votes: 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>');