JavaScript Forum

**LacOniC** · 10:08 PM

Hi. I use below code in my picture gallery. But it opens all pictures in same window. Design problem occurs when image sizes are different.

Which part must be edited to open all pictures in different (_blank) window?

Code:

 
<script type="text/javascript">
// JK Pop up image viewer script- By JavaScriptKit.com
// Visit JavaScript Kit (http://javascriptkit.com)
// for free JavaScript tutorials and scripts
// This notice must stay intact for use
var popbackground="lightskyblue" //specify backcolor or background image for pop window
var windowtitle="Image Window"  //pop window title
function detectexist(obj){
return (typeof obj !="undefined")
}
function jkpopimage(imgpath, popwidth, popheight, textdescription){
function getpos(){
leftpos=(detectexist(window.screenLeft))? screenLeft+document.body.clientWidth/2-popwidth/2 : detectexist(window.screenX)? screenX+innerWidth/2-popwidth/2 : 0
toppos=(detectexist(window.screenTop))? screenTop+document.body.clientHeight/2-popheight/2 : detectexist(window.screenY)? screenY+innerHeight/2-popheight/2 : 0
if (window.opera){
leftpos-=screenLeft
toppos-=screenTop
}
}
getpos()
var winattributes='width='+popwidth+',height='+popheight+',resizable=yes,left='+leftpos+',top='+toppos
var bodyattribute=(popbackground.indexOf(".")!=-1)? 'background="'+popbackground+'"' : 'bgcolor="'+popbackground+'"'
if (typeof jkpopwin=="undefined" || jkpopwin.closed)
jkpopwin=window.open("","",winattributes)
else{
//getpos() //uncomment these 2 lines if you wish subsequent popups to be centered too
//jkpopwin.moveTo(leftpos, toppos)
jkpopwin.resizeTo(popwidth, popheight+30)
}
jkpopwin.document.open()
jkpopwin.document.write('<html><title>'+windowtitle+'</title><body '+bodyattribute+'><img src="'+imgpath+'" style="margin-bottom: 0.5em"><br>'+textdescription+'</body></html>')
jkpopwin.document.close()
jkpopwin.focus()
}
</script>

Code:

 
<a href="#" onClick="jkpopimage('food1.jpg', 325, 445, 'Breakfast is served.'); return false">
Breakfast pancakes</a>

**funkdaddu** · 11:07 AM

Using jkpopwin=window.open... names the window "jkpopwin", so each time it keeps referencing the same window... you need to have a unique name for the window each time the script is called, try this:

Code:

// JK Pop up image viewer script- By JavaScriptKit.com
// Visit JavaScript Kit (http://javascriptkit.com)
// for free JavaScript tutorials and scripts
// This notice must stay intact for use
var popbackground="lightskyblue" //specify backcolor or background image for pop window
var windowtitle="Image Window"  //pop window title
var windowNum = 0;

function detectexist(obj){
	return (typeof obj !="undefined")
}

function jkpopimage(imgpath, popwidth, popheight, textdescription){
	function getpos(){
		leftpos=(detectexist(window.screenLeft))? screenLeft+document.body.clientWidth/2-popwidth/2 : detectexist(window.screenX)? screenX+innerWidth/2-popwidth/2 : 0;
		toppos=(detectexist(window.screenTop))? screenTop+document.body.clientHeight/2-popheight/2 : detectexist(window.screenY)? screenY+innerHeight/2-popheight/2 : 0;
		if (window.opera){
			leftpos-=screenLeft;
			toppos-=screenTop;
		}
	}
	getpos();
	var winattributes='width='+popwidth+',height='+popheight+',resizable=yes,left='+leftpos+',top='+toppos;
	var bodyattribute=(popbackground.indexOf(".")!=-1)? 'background="'+popbackground+'"' : 'bgcolor="'+popbackground+'"';
        currentWin = window.open('','jkpopwin' + windowNum,winattributes);
	//getpos() //uncomment these 2 lines if you wish subsequent popups to be centered too
	//currentWin.moveTo(leftpos, toppos);
	currentWin.document.open();
	currentWin.document.write('<html><title>'+windowtitle+'</title><body '+bodyattribute+'><img src="'+imgpath+'" style="margin-bottom: 0.5em"><br>'+textdescription+'</body></html>');
	currentWin.document.close();
	currentWin.focus();
	windowNum++;
}

**someguy** · 11-14-2005, 02:46 PM

A different approach to the same problem would be to open them in the same window, but resize the window on loading to fit the picture.

In the pop-up window you could have something like this:

PHP Code:


			
<script language='javascript'> 

   var arrTemp=self.location.href.split("?"); 

   var picUrl = "<?php echo $_GET["pic"]; ?>"; 

   var NS = (navigator.appName=="Netscape")?true:false; 



     function FitPic() { 

       iWidth = (NS)?window.innerWidth:document.body.clientWidth; 

       iHeight = (NS)?window.innerHeight:document.body.clientHeight; 

       iWidth = document.images[0].width - iWidth; 

       iHeight = document.images[0].height - iHeight; 

       window.resizeBy(iWidth, iHeight); 

       self.focus(); 

     }; 

 </script> 

</HEAD> 

<BODY bgcolor="#000000" onload='FitPic();' topmargin="0"  

marginheight="0" leftmargin="0" marginwidth="0"> 

 <script language='javascript'> 

 document.write( "<img src='" + picUrl + "' border=0>" ); 

 </script> 

</BODY>

Then all you would have to do is open a window of any size using popuppagename.php?pic=imageurl and it will all be done automatically for you.