PDA

View Full Version : Reusable popups

welo
09-18-2002, 06:55 PM
Okay, so I have 6 images on one page, and all need to open a popup window to different pages. using the standard popup code:


<script type="text/javascript"><!--
function PopUp(){
var ScreenWidth=window.screen.width;
var ScreenHeight=window.screen.height;
var movefromedge=0;
placementx=(ScreenWidth/2)-((670)/2);
placementy=(ScreenHeight/2)-((440+50)/2);
var PopUpUrl="page.html"
WinPop=window.open(PopUpUrl,"","width=700,height=400,toolbar=0,location=0,directories=0,status=0,scrollbars=yes,menubar=0,resizable= 0,left="+placementx+",top="+placementy+",screenX="+placementx+",screenY="+placementy+",");
}
// -->
</script>


The only thing that changes is the page url (page1.html, page2.html etc.). How do I do this without writing this whole script six times? (PopUp(), PopUp1() etc.). I know this is simple and I can't make my head work on it right now :).
requestcode
09-18-2002, 07:14 PM
How about a different approach. This example will create the html page on the fly and size the window to the width of the image.
<html>
<head>
<title>Image Pop Up Viewer</title>
<SCRIPT LANGUAGE="JavaScript">
image0=new Image() // preload images large images
image0.src="large0.gif"
image1=new Image()
image1.src="large1.gif"
image2=new Image()
image2.src="large2.gif"
image3=new Image() // preload thumb nail images of large images
image3.src="thumb0.gif"
image4=new Image()
image4.src="thumb1.gif"
image5=new Image()
image5.src="thumb2.gif"
var ImgWin=" "
function imgwin(Imgn) // get width of large image that was pre loaded above
{
w=eval(Imgn+".width")
if(w<100)
{w=100}
h=eval(Imgn+".height") // get height of large image that was pre loaded above
if(h<100) // cannot open window less than 100 by 100 pixels
{h=100}
h=h+25
picgif=eval(Imgn+".src") // build image source
if(ImgWin.open) // if the window is open close it
{ImgWin.close()}
/*Create window and display large image of thumbnail.
If you want to change the position of the window when it pops up change the values for the top and left
properties below in the variable WinProps. The values in top and left are number of pixels from the top
and left of the edge of the screen.
*/
WinProps="width="+w+",height="+h+",location=no,status=no,directories=no,toolbar=no,scrollbars=no,menubar=no,resize=no,top=0,left=0"
ImgWin=window.open("","winimg",config=WinProps);
ImgWin.document.write("<HTML>")
ImgWin.document.write("<HEAD><TITLE>Display Image</TITLE></HEAD>")
ImgWin.document.write("<BODY marginheight='0' marginwidth='0' leftmargin='0' topmargin='0' bgcolor='lightyellow'>")
ImgWin.document.write("<CENTER><IMG SRC="+picgif+" BORDER='0' HSPACE=0 VSPACE=0><BR>")
ImgWin.document.write("<FONT SIZE=-1><A HREF='#' onClick='self.close()'>Close Me</A></FONT></CENTER>")
ImgWin.document.write("</BODY>")
ImgWin.document.write("</HTML>")
ImgWin.document.close()
ImgWin.focus()
}
</SCRIPT>
</head>
<body>
<CENTER>
<SCRIPT>
/*
If you add more thumbnail images make sure that you include the thumbnail and larger image in the
preload sections above. In the onClick event for the added images make sure you change the value
being passed to match the image name of the large image that matches the thumbnail image. Both
of these must be setup in the image preload sections above.
*/
</SCRIPT>
<BR><BR><BR>
<A HREF="#" onClick="imgwin('image0');return false;"><IMG SRC="thumb0.gif" NAME="img0" BORDER="0"></A>
<BR>
<A HREF="#" onClick="imgwin('image1');return false"><IMG SRC="thumb1.gif" NAME="img1" BORDER="0"></A>
<BR>
<A HREF="#" onClick="imgwin('image2');return false"><IMG SRC="thumb2.gif" NAME="img2" BORDER="0"></A>
<BR><BR><BR><BR> <HR WIDTH="50%">
<FONT SIZE="-1"><A HREF="JavaScript:self.close()">Close This Window</A></FONT>
</CENTER>
</body>
</html>
Spookster
09-18-2002, 07:22 PM
http://www.codingforums.com/showthread.php?s=&threadid=1625
welo
09-18-2002, 07:31 PM
Thanks req and Spook. Sadly, req, I would never create a whole page that was totally reliant on javasecript. Neat idea though.

Spook, AndyB just reminded me of your code:

<a href="javascript:winy('page1.html')">Page 1</a>

<script type="text/javascript">
function winy(url) {
window.open(url,"msg","height=400,width=360,left=100,top=100,resizable=no,status=no");
}
</script>

(Kind of a filtered down version of the page you pointed me to)

Thanks again :)