JavaScript Forum

**spencermjax** · 02:46 PM

I have actually combined and slightly modified two different scripts. The code is a slide show that allows user to click on an image to open a larger version of that image in a new window. Everything works perfectly with one exception...closing the popup window. Currently, user can click the larger popup image and the window will close. What I want is once the popup is visible, if the user goes back to the slideshow without closing the popup and clicks another image, I want the initial popup window to automaticly close(or update with the new image clicked. The code is listed below:

HEAD:

Code:

<script type="text/javascript">

/***********************************************
* DHTML slideshow script-  © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice must stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var photos=new Array()
var photoslink=new Array()
var which=0

//define images. You can have as many as you want:
photos[0]="./images/1.jpg"
photos[1]="./images/2.jpg"
photos[2]="./images/3.jpg"
photos[3]="./images/4.jpg"
photos[4]="./images/5.jpg"
photos[5]="./images/6.jpg"
photos[6]="./images/7.jpg"
photos[7]="./images/8.jpg"
photos[8]="./images/9.jpg"
photos[9]="./images/10.jpg"
photos[10]="./images/11.jpg"
photos[11]="./images/12.jpg"

//Specify whether images should be linked or not (1=linked)
var linkornot=1

//Set corresponding URLs for above images. Define ONLY if variable linkornot equals "1"
photoslink[0]="./images/1a.jpg"
photoslink[1]="./images/2a.jpg"
photoslink[2]="./images/3a.jpg"
photoslink[3]="./images/4a.jpg"
photoslink[4]="./images/5a.jpg"
photoslink[5]="./images/6a.jpg"
photoslink[6]="./images/7a.jpg"
photoslink[7]="./images/8a.jpg"
photoslink[8]="./images/9a.jpg"
photoslink[9]="./images/10a.jpg"
photoslink[10]="./images/11a.jpg"
photoslink[11]="./images/12a.jpg"

//do NOT edit pass this line

var preloadedimages=new Array()
for (i=0;i<photos.length;i++){
preloadedimages[i]=new Image()
preloadedimages[i].src=photos[i]
}


function applyeffect(){
if (document.all && photoslider.filters){
photoslider.filters.revealTrans.Transition=Math.floor(Math.random()*23)
photoslider.filters.revealTrans.stop()
photoslider.filters.revealTrans.apply()
}
}



function playeffect(){
if (document.all && photoslider.filters)
photoslider.filters.revealTrans.play()
}

function keeptrack(){
window.status="Image "+(which+1)+" of "+photos.length
}


function backward(){
if (which>0){
which--
applyeffect()
document.images.photoslider.src=photos[which]
playeffect()
keeptrack()
}
}

function forward(){
if (which<photos.length-1){
which++
applyeffect()
document.images.photoslider.src=photos[which]
playeffect()
keeptrack()
}
}

//function transport(){
//window.open(photoslink[which],'','toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=550,height=465,left = 242,top = 184');

//}

function viewPic(img)
{ 	
    picfile = new Image(); 
    picfile.src =(img); 
    fileCheck(img); 
}

function fileCheck(img)
{ 	
    if( (picfile.width!=0) && (picfile.height!=0) )
    { 
        makeWindow(img); 
    }
    else 
    {
        funzione="fileCheck('"+img+"')"; 
        intervallo=setTimeout(funzione,50); 
    }
}

function makeWindow(img)
{ 	
    ht = picfile.height + 20;
    wd = picfile.width + 20; 

    var args= "height=" + ht + ",innerHeight=" + ht;
    args += ",width=" + wd + ",innerWidth=" + wd;
    if (window.screen) 
    { 
        var avht = screen.availHeight; 
        var avwd = screen.availWidth;
        var xcen = (avwd - wd) / 2; 
		var ycen = (avht - ht) / 2;		
        args += ",left=" + xcen + ",screenX=" + xcen;
        args += ",top=" + ycen + ",screenY=" + ycen + ",resizable=yes"; 	
    }
    //return window.open(img, '', args);
	popwin=window.open("","_blank",args)
popwin.document.open()
popwin.document.write('<html><head><title>'+img+'</title></head><body bgcolor=#DED5B1 scroll=no   topmargin=0 leftmargin=0 rightmargin=0 bottomargin=0 marginheight=0 marginwidth=0>  <div style="position: absolute; top:0px;left:0px color=#006666"><a href="javascript:window.close()">  <img src="'+img+'" width="'+wd+'" height="'+ht+'" border="0" alt="Click Image To Close Window"></a></div></body></html>')
popwin.document.close() 
} 

</script>

BODY:

Code:

<script>
if (linkornot==1)
document.write('<a href="javascript:viewPic(photoslink[which])">')
document.write('<img src="'+photos[0]+'" name="photoslider" style="filter:revealTrans(duration=2,transition=23)" border=0 >')
if (linkornot==1)
document.write('</a>')
</script>

**spencermjax** · 10-30-2005, 03:24 PM

I should work a bit harder before posting.
The solution is to simply add onBlur="self.close()"

orginal code:
popwin.document.write('<html><head><title>'+img+'</title></head><body bgcolor=#DED5B1 scroll=no topmargin=0 leftmargin=0 rightmargin=0 bottomargin=0 marginheight=0 marginwidth=0> <div style="position: absolute; top:0px;left:0px color=#006666"><a href="javascript:window.close()"> <img src="'+img+'" width="'+wd+'" height="'+ht+'" border="0" alt="Click Image To Close Window"></a></div></body></html>')
popwin.document.close()

New Code:
popwin.document.write('<html><head><title>'+img+'</title></head><body bgcolor=#DED5B1 scroll=no topmargin=0 leftmargin=0 rightmargin=0 bottomargin=0 marginheight=0 marginwidth=0 onBlur="self.close()" > <div style="position: absolute; top:0px;left:0px color=#006666"><a href="javascript:window.close()"> <img src="'+img+'" width="'+wd+'" height="'+ht+'" border="0" alt="Click Image To Close Window"></a></div></body></html>')
popwin.document.close()