Desperate... need help with understanding how to use this opennewwindow script [Archive]

PDA

Click to See Complete Forum and Search --> : Desperate... need help with understanding how to use this opennewwindow script

Reyngel

01-23-2003, 04:02 AM

Hi. If anyone can help me with this, I'd be much appreciative. Basically, I have a gallery of images, thumbnailed inside of a table. I want the user to be able to click on the thumbnail, and a new window that's the size of the image pops up to view the image. Anyway, I found a script that does it for me just fine. The problem is, I don't know what all the variables mean! So I can't really customize anything since I don't understand what changes what. Here is the script I found:

<SCRIPT language=JavaScript>

var width,height
var image,ext
var cond1,cond2
function transferview(image,width,height) {
if (width==0) cond1=" "
else cond1="width="+(width+50)+"";
if (height==0) {cond2=" "};
else {cond2="height="+(height+70)+""};

var s1 ="<TITLE>Image</TITLE>"
var s15=""
var s2 ="<CENTER><IMG SRC='"+image+"' BORDER=0>"
var s3 ="<FORM><INPUT TYPE='BUTTON' VALUE='Close Window'"+ " onClick='self.close()'>"
var s4 ="</FORM></center>"

ImageWindow=window.open("", "newwin"+width,"toolbar=no,scrollbars="+scroll+",menubar=no,"+cond1+","+cond2+");
ImageWindow.document.write(s1+s15+s2+s3+s4)
ImageWindow.document.close()
}
</SCRIPT>

...then, inside the <a href> tag, you insert the following:

javascript:transferview('photo02.jpg',577,630)

...where the 577,630 is the size of the image.

Can anyone help me to understand all those crazy variables, etc, in the script? I'd like to know how to customize the Close Window button, or take it out completely, or change the border, or take out the border, etc.

Tonnnnns of appreciation to anyone who can give me a quick explanation!

Reyngel

01-23-2003, 04:16 AM

Or, if someone can advise me on an easier way to achieve what I'm try to get, that'd be great too. Like I said, I basically have a big table pull of thumbnails, and i want the user to click on a thumbnail, and a separate window pops up without any of the status bar or other stuff, and they can view just that image in the window. i don't really care if there's a close-window button. thanks!

Charles

01-23-2003, 04:25 AM

Oh, that's easy then.

<a href="http://www.bettiepage.com/images/photos/whip/whip7.jpg" onclick="window.open(this.href, 'child', 'height=350,width=250'); return false"><img alt="[Bettie with a Whip]" src="http://www.bettiepage.com/images/photos/whip/whip7_a.jpg'></a>

Reyngel

01-23-2003, 04:27 AM

Hey thanks! A few questions though... can you tell me what each of the values mean in that code you just gave me? Like, what is 'child,' etc. And I noticed that when the image pops up in the window, it doesn't seem to be centered for some reason... how can I fix that? Thanks!!

andre73

01-23-2003, 04:27 AM

Reyngel

01-23-2003, 04:30 AM

Originally posted by andre73
<script language="Javascript">
function openWin()
{
aWindow=window.open("fileName.html","windowName","width=250,height=250,scrollbars=1");
//scrollbars=1 window has scrollbars -- scrollbars=0 no scrollbars
}
</script>

But doesn't that just apply to one link with one popup menu? Wouldn't I also have to generate individual functions for each image in my gallery, or...? Cause if i do a href= and then the openWin() thing for each image, it will continue to load fileName.html, right?

andre73

01-23-2003, 04:31 AM

you need to call the function in the previous post like this
<a href="javascript:openWin();">Open Window</a>

Reyngel

01-23-2003, 04:34 AM

Originally posted by andre73
you need to call the function in the previous post like this
<a href="javascript:openWin();">Open Window</a>

Okay, but when I click on the link then, won't it only open the window that's paired with the function up in the script? Wouldn't I have to make individual functions then for every single image? The guy who posted before seemed to be on the right track... the only problem i had was how the image wasn't centered, or out of the border of the window for some reason.

Reyngel

01-23-2003, 04:40 AM

Like, with what the other guy posted...

<a href="http://www.bettiepage.com/images/photos/whip/whip7.jpg" onclick="window.open(this.href, 'child', 'height=350,width=250'); return false"><img alt="[Bettie with a Whip]" src="http://www.bettiepage.com/images/photos/whip/whip7_a.jpg'></a>

That works nice and easy for me. The only problem is, when the popup window comes up, it's the right size and all, but there seems to be like, a margin or something around the image, which ends up pushing the image out of frame. How can I fix this?

andre73

01-23-2003, 04:40 AM

This will prolly work for you then

<script language="Javascript">
function openWin(url)
{
aWindow=window.open(url,"windowName","width=250,height=250,scrollbars=1");
}
</script>
<a href="javascript:openWin();">Click here</a>

andre73

01-23-2003, 04:42 AM

Just use the html center tag to center the image

andre73

01-23-2003, 04:44 AM

Im sorry u need to pass the document name in the function call i forgot that when coppying and pasting
<a href="javascriptpenWin('fileName.html');">Click here</a>

Reyngel

01-23-2003, 04:46 AM

Originally posted by andre73
This will prolly work for you then

<script language="Javascript">
function openWin(url)
{
aWindow=window.open(url,"windowName","width=250,height=250,scrollbars=1");
}
</script>
<a href="javascript:openWin();">Click here</a>

Hmm. But again, wouldn't I need to make multiple functions then? Like, here's my exact situation... I have a table that's 7X4, so 28 total. In each block is a thumbnail. Basically, I want to be able to click on a thumbnail, and a popup window comes up with the full size image.

So, by using your example, the <a href="javascript:openWin();"> part... if i put that into each <a href> of each thumbnail, the link would go to the same popup window unless i made 28 different functions, right?

But by using the other guy's code, it works just fine... except for the whole margin thing, which I can't seem to figure out...

Reyngel

01-23-2003, 04:48 AM

Originally posted by andre73
Im sorry u need to pass the document name in the function call i forgot that when coppying and pasting
<a href="javascriptpenWin('fileName.html');">Click here</a>

Okay, that makes more sense then. One problem, though... my images aren't all the same size... and I'd like to have the popup windows the same size as each image. So, using your example, wouldn't i then have to make 28 separate functions to designate each popup window's size?

Charles

01-23-2003, 05:03 AM

1 - Never forget that one or more in ten users do not use JavaScript (http://www.thecounter.com/stats/2002/November/javas.php). So you must make sure that your link still works when there is no JavaScript.

2 - See http://developer.netscape.com/docs/manuals/js/client/jsref/window.htm#1202731 for details on opening a new window with JavaScript.

3 - If you want to center the image in the window then you have to load a HTML page in the window. The best way is to simply write a page for each image. The other is write that page with JavaScript. The problem with this second method is that you must be careful that the page uses valid HTML. Thus:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<title>Window Example</title>
<script type="text/javascript">

</script>
<p><a href="http://www.bettiepage.com/images/photos/whip/whip7.jpg" onclick="return openWindow(this.href, '[Bettie with a Whip]', '350', '250')"><img alt="[Bettie with a Whip]" src="http://www.bettiepage.com/images/photos/whip/whip7_a.jpg"></a></p>

Reyngel

01-23-2003, 05:08 AM

Originally posted by Charles
1 - Never forget that one or more in ten users do not use JavaScript (http://www.thecounter.com/stats/2002/November/javas.php). So you must make sure that your link still works when there is no JavaScript.

2 - See http://developer.netscape.com/docs/manuals/js/client/jsref/window.htm#1202731 for details on opening a new window with JavaScript.

3 - If you want to center the image in the window then you have to load a HTML page in the window. The best way is to simply write a page for each image. The other is write that page with JavaScript. The problem with this second method is that you must be careful that the page uses valid HTML. Thus:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<title>Window Example</title>
<script type="text/javascript">

</script>
<p><a href="http://www.bettiepage.com/images/photos/whip/whip7.jpg" onclick="return openWindow(this.href, '[Bettie with a Whip]', '350', '250')"><img alt="[Bettie with a Whip]" src="http://www.bettiepage.com/images/photos/whip/whip7_a.jpg"></a></p>

I sent you a private message right before i saw this reply... i'll try it out first... thanks for the continued help!

Reyngel

01-23-2003, 05:15 AM

Okay, so I like the idea of just opening a new html file inside the popup window rather than dealing with all that javascript. but i can't seem to center the image... how can i do that? that stupid border is pushing the damn thing out of view a little. i tried making a table, that was 100% height and 100% width, then putting the image inside and aligning it to center. it still didn't work. any ideas?

Reyngel

01-23-2003, 05:23 AM

ah, nevermind, i think i figured it out... i used a style sheet to kill the margins. everything works just fine now!!!!

thank you all for your help...!!!!!!!!!!!!!!!!!!

:D

andre73

01-23-2003, 05:41 AM

Originally posted by Reyngel
Okay, that makes more sense then. One problem, though... my images aren't all the same size... and I'd like to have the popup windows the same size as each image. So, using your example, wouldn't i then have to make 28 separate functions to designate each popup window's size?

no in that case just pass the sizes to the function the same way the url is passed.