PDA

Click to See Complete Forum and Search --> : many pictures, one window

moondance
03-18-2003, 01:44 PM
On the site i'm developing i've got small previews of pictures. When the user clicks on the picture I want it to open in a new window, and show the picture in its full size.

I know I can do this using regular html but I don't want to have 60 pages with just an image on it.

Is there anyway I can use the javascript function to open a new window, and display the picture the user has clicked on in the new window - so that I only need to have one pop up window (a 'picture' page), to display each possible picture on my site?

thanks for you help
jesus will reward you
requestcode
03-18-2003, 01:49 PM
How about this example:
<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>

</center>
</body>
</html>
pyro
03-18-2003, 01:52 PM
This code should get you going:

<html>
<head>
<title>Untitled</title>

<script language="javascript" type="text/javascript">

function openpic(img,title,width,height)
{
picwin = window.open('','','width='+width+',height='+height+'')
picwin.document.write(
'<html>',
'<head>',
'<title>'+title+'</title>',
'</head>',
'<body bgcolor="darkblue">',
'<img src="'+img+'">',
'</body>',
'</html>' //no comma after last line
);
}

</script>

</head>

<body>
<a href="your.gif" onClick="openpic(this.href,'Page Title','325','325'); return false;">open</a>
</body>
</html>

The two numbers in the onClick in the <a href...> are the width and height the popup window should be...