PDA

Click to See Complete Forum and Search --> : post JS-variable to window.open

DonMArtin
09-16-2003, 04:16 PM
Hello
a click on a thumbnail opens a window with the enlarged pic (window.open). In this window I use a JS-script to click previous and next. I want to post a variable from the calling page to the window with the initial-number of the clicked thumbnail. How do I have to declare this variable and how can I refer to it in the opened window?

Thanks for your help

Alex
requestcode
09-16-2003, 04:44 PM
Hi Don,
How are you creating your Pop up window that displays the image? Can you show us your code?
DonMArtin
09-16-2003, 05:03 PM
the thmbn calls with

<a href="javascript:;" onClick="MM_callJS('enlarge()')">PIC<7a>

the

function enlarge() {
popup = window.open("change.php","enlarged","height=300,width=300,left=50,top=100,resizable=no,scrollbars=no,status=no,toolbar=no,menubar=no,loca tionbar=no");
}

I could give enlarge(INITIAL NUMBER) and somehow refer to it in the script on the opened window

Alex
Khalid Ali
09-16-2003, 05:24 PM
In the change.php page you need something like this

alert(top.opener.variableName)
requestcode
09-16-2003, 05:28 PM
Hi Don,
You could pass it to the function when you click the link like this:
<a href="javascript:;" onClick="MM_callJS('enlarge(5)')">PIC<7a>

then in your functio do this:


function enlarge(num) {
linkid="chang.php?"+num
popup = window.open(linkid,"enlarged"," height=300,width=300,left=50,top=100,resizable=no,
scrollbars=no,status=no,toolbar=no,menubar=no,loca
tionbar=no");
}

That would attach the number to chang.php. Next question - do you need this number for the PHP script or javascript?
DonMArtin
09-16-2003, 05:51 PM
I need the variable in JS, because it's the key in the pics array.
In fact, change.php needn't be a php, can be htm too. I just use it for not having a mix, cosmetics.
To have a look at the script, go to:

www.herrnaumann.de/wandkunst

and click on 'Innenraum'. A click on the 1st pic shows the function.
Ok, now I will try your advice. Thanks so far.

Alex
Scriptage
09-16-2003, 06:19 PM
Due to restrictions in javascript you cannot modify a page that is not created by the window in which the javascript is placed; ie, calling change.php into a new window would not grant you access to modify variables and such. However, you can access variables on the main page from the child window.

Replace the old popup code with this:

<script>
var openWin = new windowObject();

function windowObject(){
this.open = open_window;
this.window = "";
this.id = "";
}

function open_window(id){
with (this);
this.id = id;
this.window = window.open("change.php","enlarged"," height=300,width=300,left=50,top=100,resizable=no,scrollbars=no,status=no,toolbar=no,menubar=no,loca tionbar=no");
}
</script>

<a href="javascript:openWin.open(1);">Click me</a>
<a href="javascript:openWin.open(2);">Click me 2</a>

And in the change.php file:

<script>
var key = parent.opener.openWin.id;
</script>

Regards

Carl
requestcode
09-16-2003, 06:21 PM
Here are a couple of scripts that attack it from a differen way. Maybe they would work for you. The first one will pop up a window with the image when you mouse over the thumbnail image. The second one will do the same when you click on the image. They also will display different size images.

Here is the first one:
<html>
<head>
<title>Image Pop Up Viewer</title>
<script language="JavaScript">
/*
If you add another image link in the body section below you must also add the thumbnail and larger image
in this section. The image name that is being passed from the onMouseOver event in the link must match
the large image name given here. Make sure when you add an image here that you also change the
image name. I have ended my images with the name "image5", you should start with the hame "image6"
and use the same format as below. If you have your images stored in a different directory than your
html page make sure to include the directory before the image name.
*/
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)
{
w=eval(Imgn+".width") // get width of large image that was pre loaded above
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}

picgif=eval(Imgn+".src") // build image source
/*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'>")
ImgWin.document.write("<center><img src="+picgif+" border='0' hspace=0 vspace=0></center>")
ImgWin.document.write("</body>")
ImgWin.document.write("</html>")
ImgWin.document.close()
}
</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 onMouseOver 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="#" onmouseover="imgwin('image0');return false;" onmouseout="ImgWin.close()"><img src="thumb0.gif" name="img0" border="0"></a>
<br><br>
<a href="#" onmouseover="imgwin('image1');return false" onmouseout="ImgWin.close()"><img src="thumb1.gif" name="img1" border="0"></a>
<br><br>
<a href="#" onmouseover="imgwin('image2');return false" onmouseout="ImgWin.close()"><img src="thumb2.gif" name="img2" border="0"></a>
</center>
</body>
</html>

Here is the second one:
<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>

They may not be what you are looking for, but thought they might give you some ideas and they might be easier than the way you want to go.
DonMArtin
09-16-2003, 06:27 PM
OK folks,

now I have something to do and - first of all understand it step by step.

Thanks to requestcode and thanks to scriptage !

Alex

________________________
German by chance:rolleyes:
DonMArtin
09-16-2003, 07:03 PM
The pics now call with:

<a href="javascript:;" onClick="MM_callJS('enlarge([the pic's number])')">

in the external .js:

function enlarge(num) {
linkid="../../change.php?"+num ;
popup = window.open(linkid,"enlarged","height=400,width=450,left=50,top=100,resizable=no,scrollbars=no,status=no,toolbar=no,menubar=no,loca tionbar=no");
}

and

var initial_number = location.search.substring(1,location.search.length);

in the change.php finds the correct value...everything's fine!

Thanks anyway

Alex