How to close window then open new one in function

hi,

i am adapting someone else's script, as i am not yet fluent in javascript, and need to modify one small part...

basically it's an image gallery script with popup windows launched by clicking on a thumbnail. if the popup window is open, and the user clicks on a different thumbnail, i want the existing popup to close and the new one open. i think it's already supposed to do this, but when you click on a thumbnail, the open one closes, but the new one does not open.



function popupgalimage(imgsrc, popwidth, popheight){

function triangulate(){
leftpos = (screen.width) ? (screen.width-popwidth)/2 : 0;
toppos = (screen.height) ? (screen.height-popheight)/2 : 0;
}

triangulate()
var windowdesc='width='+popwidth+',height='+popheight+',resizable=no,left='+leftpos+',top='+toppos
var picsrc='popwin.php?file='+imgsrc
if (typeof popupgalwin=="undefined" || popupgalwin.closed)
popupgalwin=window.open(picsrc,"popupgalwin",windowdesc)
else{
popupgalwin.close()
popupgalwin=window.open(picsrc,"popupgalwin",windowdesc)
}
}



to me it looks like the last two lines there say if a window is already open, then close popupgalwin, then open a new popupgalwin with the necessary file/parameters. however, it just closes the one and then doesn't open the other.

i tried a few things, but i like i said i'm not good enough to do this on my own yet. :)

thanks
skye

You don't need to open the existing popup and create a new one. You can make it open the image in the same popup (if it exists) and in a new popup (if it doesn't exists). You are actually doing it by specifying the same window target for all popups.

popupgalwin=window.open(picsrc,"popupgalwin",windowdesc);

what lacking is to set focus to the popup.

popupgalwin.focus();

Here's the final code:

function popupgalimage(imgsrc, popwidth, popheight){

function triangulate(){
leftpos = (screen.width) ? (screen.width-popwidth)/2 : 0;
toppos = (screen.height) ? (screen.height-popheight)/2 : 0;
}

triangulate();

var windowdesc='width='+popwidth+',height='+popheight+ ',resizable=no,left='+leftpos+',top='+toppos;
var picsrc='popwin.php?file='+imgsrc;
var popupgalwin=window.open(picsrc,"popupgalwin",windowdesc)
popupgalwin.focus();
}

The use of inner function triangulate is I think overkill because the outer function popupgalimage is not OO-based.

You can simplify the function to still make it work with javascript-disabled browsers.

function popupgalimage(picsrc, target, popwidth, popheight){
var leftpos = (screen.width) ? (screen.width-popwidth)/2 : 0;
var toppos = (screen.height) ? (screen.height-popheight)/2 : 0;
var windowdesc = 'width=' + popwidth + ',height=' + popheight + ',resizable=no,left=' + leftpos + ',top=' + toppos;
var popupgalwin=window.open(picsrc, target, windowdesc);
popupgalwin.focus();
return false;
}
...
<a href="popwin.php?file=big_pic1.gif" target="popupgalwin" onclick="return popupgalimage(this.href, this.target, 800, 600)"><img src="thumb_pic1.gif" /></a>
<a href="popwin.php?file=big_pic2.gif" target="popupgalwin" onclick="return popupgalimage(this.href, this.target, 700, 500)"><img src="thumb_pic2.gif" /></a>
...

Thanks for your time. I tried using the first code you posted, which didn't seem to work really... It does target the existing window, but it does not resize them for the next image, so it displays a little funny.

I _do_ need the code to close the window and reopen it, because resizing an existing window, as far as I know, is only compatible with some versions of IE. So I do need the thumbnail script to close the popup, then open a new one with the correct dimensions for the next image.

The second solution I am not sure will work, I'll have to look again but this is all nested in a PHP script which I am not sure I can change properly to fit your second code.

skye

You didn't mention before that you want the popup to resize to the current image's dimension.

function popupgalimage(imgsrc, popwidth, popheight){
var leftpos = (screen.width) ? (screen.width-popwidth)/2 : 0;
var toppos = (screen.height) ? (screen.height-popheight)/2 : 0;
var windowdesc = 'width=' + popwidth + ', height=' + popheight + ',resizable=no,left=' + leftpos + ',top=' + toppos;
var popupgalwin = window.open('popwin.php?file='+escape(imgsrc), "popupgalwin", windowdesc);
popupgalwin.resizeTo(popwidth, popheight);
popupgalwin.focus();
}