many pictures, one window

@requestcodeMar 18.2003 — #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>

@pyroMar 18.2003 — #This code should get you going:

&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Untitled&lt;/title&gt;
 
 &lt;script language="javascript" type="text/javascript"&gt;
 
 function openpic(img,title,width,height)
 {
 picwin = window.open('','','width='+width+',height='+height+'')
 picwin.document.write(
 '&lt;html&gt;',
 '&lt;head&gt;',
 '&lt;title&gt;'+title+'&lt;/title&gt;',
 '&lt;/head&gt;',
 '&lt;body bgcolor="darkblue"&gt;',
 '&lt;img src="'+img+'"&gt;',
 '&lt;/body&gt;',
 '&lt;/html&gt;' //no comma after last line
 );
 }
 
 &lt;/script&gt;
 
 &lt;/head&gt;
 
 &lt;body&gt;
 &lt;a href="your.gif" onClick="openpic(this.href,'Page Title','325','325'); return false;"&gt;open&lt;/a&gt;
 &lt;/body&gt;
 &lt;/html&gt;

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

many pictures, one window

2 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

many pictures, one window

2 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

2 Comments(s) _↴

Also in #JavaScript _↴