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[i];
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á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
