PDA

Click to See Complete Forum and Search --> : pop-up images with only one function

estilos
12-22-2003, 10:35 AM
Hi! In my current site I have some gallerys by person, each gallery has thumbnails and when theyīre clicked, a pop-up "pops up" with the respective bigger image... the functions are (example of person1 gallery):

function image01()
{
var OpenWindow=window.open("", "person101","height=486,width=208, top=0, left=0");
OpenWindow.document.writeln('<html><head><title>TITLE</title><style>body{margin:3px;}</style>')
OpenWindow.document.write("<img src='person101.jpg'>")
}
function image02()
{
var OpenWindow=window.open("", "person102","height=347,width=315, top=0, left=0");
OpenWindow.document.writeln('<html><head><title>TITLE</title><style>body{margin:3px;}</style>')
OpenWindow.document.write("<img src='person102.jpg'>")
}
function image03()
...

on the thumbnails I just need to put href="javascript:image01()
-----------------------
As you can see, I have to make a function for every image but I want a single function with the variables height / width / title / image and I want a centered pop-up, I donīt know how to javascript very well (almost nothing) so Iīm asking for help

thanks!

PS-I donīt want to create a page for every image (300+!:P)
pnaj
12-22-2003, 10:53 AM
function imageNum(s){
var OpenWindow=window.open("", "person1"+s,"height=486,width=208, top=0, left=0");
OpenWindow.document.writeln('<html><head><title>TITLE</title><style>body{margin:3px;}</style>')
OpenWindow.document.write("<img src='person1"+s+".jpg'>")
}

Then ...

href="javascript:imageNum('01')"
href="javascript:imageNum('02')"
estilos
12-22-2003, 11:11 AM
Maybe I didnīt understood the javascript or didnīt made myself clear but the function canīt have no values, for example, there must be a variable height that is "empty" and on the link I put the value (height), I donīt know if I explained better now...
requestcode
12-22-2003, 11:16 AM
Here is an example that pre-loads the images and then when you click on the thumbnail it passes the image name from the large image to the function and builds the window based on the height and width of the image. You have to pre-load both the thumb nails and the large image to be displayed for this to work:
<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>
estilos
12-22-2003, 11:37 AM
Thanks but that is too much code, I would like to use a simple method like this:

function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}

onClick="MM_openBrWindow('image1.jpg','image1','width=300,height=400')

where besides the width and height "features" there would be a title and a margin (trough document.write/ln?)

if it could be a centered popup it would be better but if not a top=0 and left=0 would be fine too

I donīt know if it can be done this way...
other suggestions?
requestcode
12-22-2003, 12:18 PM
Well I don't have the code to center the popup, but here is something a little less involved:
<html>
<head>
<title>Image Pop Up</title>
<script language="JavaScript">
var ImgWin=" "
function imgwin(Imgn,w,h)
{
if(ImgWin.open)
{ImgWin.close()}
winprops="width="+w+",height="+h,+"location=no,status=no,directories=no,toolbar=no,scrollbars=no,menubar=no,resizable=no,top=30,left=30"
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'>")
ImgWin.document.write("<center><img src="+Imgn+" 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>
<br><br><br>
<a href="#" onClick="imgwin('0.gif',200,300);return false;"><img src="0.gif" name="img0" border="0"></a>
<br>
<a href="#" onClick="imgwin('1.gif',400,200);return false"><img src="1.gif" name="img1" border="0"></a>
<br>
<a href="#" onClick="imgwin('2.gif',150,250);return false"><img src="2.gif" name="img2" border="0"></a>
<br>
</body>
</html>
estilos
12-23-2003, 11:12 AM
Thanks! that is almost perfect but how can I put the title on each a href, so that it can change for every image instead of always showing "Display Image"?

anyone knows?
estilos
12-23-2003, 05:34 PM
?
Pittimann
12-23-2003, 05:56 PM
Hi!
Here's a modification of requestcode's code for adding the titles:

<html>
<head>
<title>Image Pop Up</title>
<script language="JavaScript">
var ImgWin=" "
function imgwin(Imgn,w,h,imgTitle){
if(ImgWin.open) {ImgWin.close()}
winprops="width="+w+",height="+",location=no,status=no,directories=no,toolbar=no,scrollbars=no,menubar=no,resizable=no,top=30,left=3 0"
ImgWin=window.open("","winimg",config=winprops);
ImgWin.document.write("<html>")
ImgWin.document.write("<head><title>"+imgTitle+"</title></head>")
ImgWin.document.write("<body marginheight='0' marginwidth='0' leftmargin='0' topmargin='0'>")
ImgWin.document.write("<center><img src="+Imgn+" 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>
<br><br><br>
<a href="#" onClick="imgwin('0.gif',200,300,'No 1');return false;"><img src="0.gif" name="img0" border="0"></a>
<br>
<a href="#" onClick="imgwin('1.gif',400,200,'No 2');return false"><img src="1.gif" name="img1" border="0"></a>
<br>
<a href="#" onClick="imgwin('2.gif',150,250,'No 3');return false"><img src="2.gif" name="img2" border="0"></a>
<br>
</body>
</html>

Cheers - Pit (and have a nice Xmas)
estilos
12-23-2003, 06:22 PM
Thanks! itīs perfect now!

A good Xmas to you too ;)
estilos
12-24-2003, 02:22 PM
As I said the code is fine... but now I want the popup to be centered... can anybody help?
estilos
12-26-2003, 04:41 PM
?