PROBLEM: window.open & accessing parent variables' values

J

Jiri Brada

Hi,

I have got a following problem with using Javascript:

I have a HTML page with pictures' thumbnails. After clicking on any
thumbnail, I would like to open a new window with the original size
picture. In the main window with thumbnails, I have got following
important stuff:

<SCRIPT LANGUAGE="JavaScript">

var images = new Array (
"2004_Croatia_Brela/Croatia_Brela_083.jpg",
"2004_Croatia_Brela/Croatia_Brela_090.jpg",
"2004_Croatia_Brela/Croatia_Brela_107.jpg",
"2004_Croatia_Brela/Croatia_Brela_108.jpg"
);
var image_count = images.length-1;
var pImageNumber = 0;

function show_image( pImageNumber ) {

var pFile = new Image();
var ht = 0;
var wd = 0;

for ( var i=0; i<image_count; i++ ) {
pFile.src = images;
if ( pFile.height > ht ) ht = pFile.height;
if ( pFile.width > wd ) wd = pFile.width;
}

pFile.src = images[pImageNumber];
ht = ht + 20 + 40;
wd = wd + 20;

imagewindow = window.open( "GSET_Croatia_Brela_images.htm", "img",
"innerWidth=" + wd + ",width=" + wd + ",innerHeight=" + ht +
",height=" + ht + ",resizable,left=20,top=20");

// this is commented because I always get a script
// error that "imagewindow.document.images.changing_image" is
// null or does not exist - is it because the new page is not loaded
yet?

//imagewindow.document.images.changing_image.src = pFile.src;
//imagewindow.document.images.changing_image.width = pFile.width;
//imagewindow.document.images.changing_image.height = pFile.height;
//imagewindow.document.image_number = pImageNumber;
}
</SCRIPT>

and somewhere in the body I have got

<a href="2004_Croatia_Brela/Croatia_Brela_107.jpg"
onClick="show_image(2); return false;"><img
src="2004_Croatia_Brela/Thumbnail_Croatia_Brela_107.jpg" width="154"
height="115" border="0"></a>

Now, the new page with original images (GSET_Croatia_Brela_images.htm)
looks like:

<html>
<head>
<title>GS Radov&aacute;nky</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<link href="Assets/GSET_CSS_Style.css" rel="stylesheet"
type="text/css">
<SCRIPT LANGUAGE="JavaScript">

var images = new Array (
"2004_Croatia_Brela/Croatia_Brela_083.jpg",
"2004_Croatia_Brela/Croatia_Brela_090.jpg",
"2004_Croatia_Brela/Croatia_Brela_107.jpg",
"2004_Croatia_Brela/Croatia_Brela_108.jpg"
);
var image_number = 0;
var image_count = images.length-1;
var current_image = new Image();

function PreviousImage ( ) {
image_number--;
if ( image_number == -1 ) image_number = image_count;
current_image.src = images[image_number];
document.images.changing_image.src = current_image.src;
document.images.changing_image.width = current_image.width;
document.images.changing_image.height = current_image.height;
}
function NextImage ( ) {
image_number++;
if ( image_number == image_count+1 ) image_number = 0;
current_image.src = images[image_number];
document.images.changing_image.src = current_image.src;
document.images.changing_image.width = current_image.width;
document.images.changing_image.height = current_image.height;
}
function ActualImage ( ) {
image_number = opener.pImageNumber;
current_image.src = images[image_number];
document.images.changing_image.src = current_image.src;
document.images.changing_image.width = current_image.width;
document.images.changing_image.height = current_image.height;
}
</SCRIPT>
</head>
<body onLoad="ActualImage(); return false;">
<table align="center" cellspacing="0">
<tr>
<td align="center" valign="middle"><img name="changing_image"
src="Images/Empty_image.jpg" onClick="NextImage();" width="640"
height="480" alt=""></td>
</tr>
<tr>
<td align="center" valign="middle"><table align="center"
cellspacing="10">
<tr align="center" valign="middle">
<td class="white_link"><a href="#"
onClick="PreviousImage();">Previous</a></td>
<td class="white_link"><a href="#"
onClick="NextImage();">Next</a></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>

So, I though that by using the onLoad function for body I could set
the correct image from the list (which is the same as the list on the
thumbnail page, maybe uselessly?) by using image_number =
opener.pImageNumber in the ActualImage function executed within
onLoad, but is simply does not work.

Do you have any idea what I am doing wrong? I thought that by using
opener keyword and image_number = opener.pImageNumber I would be able
to find out what value was used for running the show_image (
pImageNumber) on the main page.

Thank you for any help in advance.

Jiri
 
M

Michael Winter

<SCRIPT LANGUAGE="JavaScript">
Click to expand...

The language attribute is deprecated. You should use the required type
attribute:

var images = new Array (
"2004_Croatia_Brela/Croatia_Brela_083.jpg",
"2004_Croatia_Brela/Croatia_Brela_090.jpg",
"2004_Croatia_Brela/Croatia_Brela_107.jpg",
"2004_Croatia_Brela/Croatia_Brela_108.jpg"
);
Click to expand...

It's probably better to use the array literal notation:

var images = [ '2004_Croatia_Brela/Croatia_Brela_083.jpg',
'2004_Croatia_Brela/Croatia_Brela_090.jpg',
'2004_Croatia_Brela/Croatia_Brela_107.jpg',
'2004_Croatia_Brela/Croatia_Brela_108.jpg' ];

[snipped beginning of show_image()]
imagewindow = window.open( "GSET_Croatia_Brela_images.htm", "img",
"innerWidth=" + wd + ",width=" + wd + ",innerHeight=" + ht +
",height=" + ht + ",resizable,left=20,top=20");

// this is commented because I always get a script
// error that "imagewindow.document.images.changing_image" is
// null or does not exist - is it because the new page is not loaded
// yet?
Click to expand...

Yes, precisely.

[snip]
<SCRIPT LANGUAGE="JavaScript">

var images = new Array (
"2004_Croatia_Brela/Croatia_Brela_083.jpg",
"2004_Croatia_Brela/Croatia_Brela_090.jpg",
"2004_Croatia_Brela/Croatia_Brela_107.jpg",
"2004_Croatia_Brela/Croatia_Brela_108.jpg"
);
Click to expand...

As above.

[snip]
<body onLoad="ActualImage(); return false;">
Click to expand...

Why are you returning false? It's not as if you can cancel loading.

[snip]
<tr align="center" valign="middle">
<td class="white_link"><a href="#"
onClick="PreviousImage();">Previous</a></td>
<td class="white_link"><a href="#"
onClick="NextImage();">Next</a></td>
Click to expand...

You should cancel the click events after calling the functions.

[snipped last bit of HTML]
So, I though that by using the onLoad function for body I could set
the correct image from the list (which is the same as the list on the
thumbnail page, maybe uselessly?) by using image_number =
opener.pImageNumber in the ActualImage function executed within
onLoad, but is simply does not work.

Do you have any idea what I am doing wrong? I thought that by using
opener keyword and image_number = opener.pImageNumber I would be able
to find out what value was used for running the show_image (
pImageNumber) on the main page.
Click to expand...

What you're attempting should work fine, but check the show_image()
function. At no point do you actually change the pImageNumber variable.

Hope that helps,
Mike
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Help with Visual Lightbox: Scripts 2
Image shifts to the right when export the page to pdf 4
How to have two html audio players on one page? 0
Help with my responsive home page 2
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
SendGrid email issue in responsive Gmail 1
Only one table shows up with the information 2

Members online

Total: 28 (members: 1, guests: 27)
Robots: 483

Forum statistics

Threads
473,769
Messages
2,569,579
Members
45,053
Latest member
BrodieSola

Latest Threads

Top