...

View Full Version : Passing Javascript to new page through php



Cacus
02-14-2007, 10:31 PM
Hi all
I have the following:


<head>
<script type="text/javascript" src="Javascript/new_window_640x480.js"></script>
<script type="text/javascript">
var aryImages = new Array(3);
aryImages[0] = "images/car1.jpg";
aryImages[1] = "images/car2.jpg";
aryImages[2] = "images/car3.jpg";
for (i=0; i < aryImages.length; i++) {
var preload = new Image();
preload.src = aryImages[i];
}

function swap(imgIndex) {
document['imgMain'].src = aryImages[imgIndex];
}
</script>
</head>
<BODY onLoad="swap(0);">
<div id="popup_main_pic"><img class="pic320" name="imgMain" src=""></div>
<div id="popup_magnify"><a href="#" onclick="picwindow('big_pic.php?id=<?php echo $row['id']; ?>')"><img src="images/magnifying_glass.png" alt="magnifying glass" /></a></div>
<div id="popup_small_pic_1"><a href="javascript:swap(0)"><img class="pic100" src="images/car1.jpg" alt="911" /></a></div>
<div id="popup_small_pic_2"><a href="javascript:swap(1)"><img class="pic100" src="images/car2.jpg" alt="911" /></a></div>
<div id="popup_small_pic_3"><a href="javascript:swap(2)"><img class="pic100" src="images/car3.jpg" alt="911" /></a></div>


The javascript switches pictures into a main display. I would like the magnifying link to open an new window (which I can do 'big_pic.php?id=<?php echo $row['id']; ?>') and display a larger version of the selected main image (imgMain). How do I also send the swap number or actual image name (imgMain) to the new page?

Does that make sense.

Cheers
Steve

MikeFoster
02-15-2007, 06:49 AM
If I may make some suggestions...


<head>
<script type="text/javascript" src="Javascript/new_window_640x480.js"></script>
<script type="text/javascript">
var aryImages = new Array(3);
aryImages[0] = "images/car1.jpg";
aryImages[1] = "images/car2.jpg";
aryImages[2] = "images/car3.jpg";
for (i=0; i < aryImages.length; i++) {
preload = new Image();
preload.src = aryImages[i];
}

var current_smallpic_idx = 0;
if (typeof window.onload == 'function') {xOldOnLoad = window.onload;}
window.onload = function()
{
if (window.xOldOnLoad) xOldOnLoad();
var i = 1, a = document.getElementById('popup_magnify');
if (a) {a.onclick = magnify_click;}
while ((a = document.getElementById('popup_small_pic_' + i)) != null) {
a.onclick = smallpic_click;
a.smallpic_idx = i;
++i;
}
document.getElementById('popup_small_pic_0').onclick();
};
function magnify_click()
{
var url = 'big_pic.php?id=' + current_smallpic_idx + '&nm=' + aryImages[current_smallpic_idx];
picwindow(url);
return false;
}
function smallpic_click()
{
document.getElementById('imgMain').src = aryImages[this.smallpic_idx];
current_smallpic_idx = this.smallpic_idx;
return false;
}
</script>
</head>
<body>
<div id="popup_main_pic"><img class="pic320" id="imgMain" src=""></div>
<div><a id="popup_magnify" href=""><img src="images/magnifying_glass.png" alt="magnifying glass" /></a></div>
<div><a id="popup_small_pic_0" href=""><img class="pic100" src="images/car1.jpg" alt="911" /></a></div>
<div><a id="popup_small_pic_1" href=""><img class="pic100" src="images/car2.jpg" alt="911" /></a></div>
<div><a id="popup_small_pic_2" href=""><img class="pic100" src="images/car3.jpg" alt="911" /></a></div>


I haven't tested it. Let me know how it goes :)

MikeFoster
02-15-2007, 06:54 AM
I didn't know what to do with $row['id']. And I'm not sure about the argument to picwindow.

Cacus
02-15-2007, 10:38 AM
Mike thanks for the reply.

Couldn't get the script to work - 'but then that's maybe not the script!'.

It only displayed the first small pic but not the main or other small ones. But it has given me some things to read up on. Very new to the whole javascript thing been working in php up till now. Is it me or is it all backwards!! LOL.

The $row['id'] is use in conjunction with the MySQL database to load the appropriate info 'page.php?id=<?php $row['id'] ?>' will result in 'page.php?id=1' when calling record 1 and then filling the page with info from record one.

Steve

Cacus
02-15-2007, 01:06 PM
Just a thought. The code:


function swap(imgIndex) {
document['imgMain'].src = aryImages[imgIndex];
}

Is the bit that actually swaps the image.
I can transfer a variable over to the next page with this:


<script type="text/javascript">
var img = 100;
document.write ('<a href="big_pic.php?id=<?php echo $row['id']; ?>&image='+img+'">test</a>')
</script>

Would there be any way (remember I'm new) to set var img to that of imgIndex so I can transfer the number 0,1 or 2 to the new page. Ive tried var img = imgIndex; with no joy but this may be cos there in two different scripts not sure if JS works akin to php or each script is a separate program/function.
Or alternatively can you extract the path name images/car1.jpg from the 'document' imgMain.

MikeFoster
02-15-2007, 02:23 PM
Look at my function magnify_click(). It creates a url with the picture's index and file name.

Give us a link to your page or post the updated code.

Cacus
02-15-2007, 04:50 PM
Hi Mike

The code is as follows:

<?php echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?".">"; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<?php
include('phpmysql/config.php');
include('phpmysql/connect.php');

// Get ID of page
$id = $_GET['id'];

// Run SQL query
$query = "SELECT * FROM motors WHERE id='$id'";
$result = mysql_query($query);
$row = mysql_fetch_array($result);


?>

<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css/popup.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
function picwindow(url) {
mywindow2 = window.open(url, 'name2', 'resizable=0, scrollbars=0, height=480, width=640');
return false;
}
</script>
<script type="text/javascript">
var aryImages = new Array(3);
aryImages[0] = "images/car1.jpg";
aryImages[1] = "images/car2.jpg";
aryImages[2] = "images/car3.jpg";
for (i=0; i < aryImages.length; i++) {
preload = new Image();
preload.src = aryImages[i];
}

var current_smallpic_idx = 0;
if (typeof window.onload == 'function') {xOldOnLoad = window.onload;}
window.onload = function()
{
if (window.xOldOnLoad) xOldOnLoad();
var i = 1, a = document.getElementById('popup_magnify');
if (a) {a.onclick = magnify_click;}
while ((a = document.getElementById('popup_small_pic_' + i)) != null) {
a.onclick = smallpic_click;
a.smallpic_idx = i;
++i;
}
document.getElementById('popup_small_pic_0').onclick();
};
function magnify_click()
{
var url = 'big_pic.php?id=<?php echo $row['id']; ?>&pic' + current_smallpic_idx + '&nm=' + aryImages[current_smallpic_idx];
picwindow(url);
return false;
}
function smallpic_click()
{
document.getElementById('imgMain').src = aryImages[this.smallpic_idx];
current_smallpic_idx = this.smallpic_idx;
return false;
}
</script>
</head>
<body>

<div id="popup_head"><img src="images/private_motors_hd.png" alt="Private Motors" /></div>
<div id="popup_title"><h1 class="popup"><?php echo $row['year']; ?> <?php echo $row['model']; ?> <?php echo $row['make']; ?></h1></div>
<div id="popup_main_pic"><img class="pic320" id="imgMain" src=""></div>
<div><a id="popup_magnify" href=""><img src="images/magnifying_glass.png" alt="magnifying glass" /></a></div>
<div><a id="popup_small_pic_0" href=""><img class="pic100" src="images/car1.jpg" alt="911" /></a></div>
<div><a id="popup_small_pic_1" href=""><img class="pic100" src="images/car2.jpg" alt="911" /></a></div>
<div><a id="popup_small_pic_2" href=""><img class="pic100" src="images/car3.jpg" alt="911" /></a></div>
</body>
</html>

The first thing is that on loading the page it doesn't insert pic 1 in main window or when selected. Although on mag click it will insert the pic number and path in the hyperlink it won't insert the mysql id number from the php, like the document.write would.

Steve

Cacus
02-15-2007, 06:36 PM
Fistly an edit to my last message.

The link works perfectly. I initially just typed in test.php in my browser and not test.php?id=1.

Obviously the page then gets it's id from the above filename.
Clicking on the magnify pic does launch the required new page and ads in the required content:

big_pic.php?id=1&pic=0&nm=images/car1.jpg

Which using $_GET in php I can drop into a string to display my large pic.
The only problem now is that pic 0 (car1) does not display on page load or when clicking on the thumbnail with the mouse (though the thumbnail is there with the rest of them. Pic 1 (car2) and 2 (car3) do display and load in the 'popup_main_pic' area. And mag clicking with these cars does change the hyperlink correctly.

As I know very (very) little JS I'm not fully sure how Mike's script works to see why the first image won't display. (But books are on order!).

Steve

MikeFoster
02-15-2007, 06:59 PM
Cacus,

In the onload function, change the initial value of "i" to 0. That was my fault.

Look at the function "magnify_click". I still think you do not need to echo $row['id'] as the id argument to big_pic.php. The user chooses which pic's id will be passed to big_pic.php.


function magnify_click()
{
// var url = 'big_pic.php?id=<?php echo $row['id']; ?>&pic' + current_smallpic_idx + '&nm=' + aryImages[current_smallpic_idx];
var url = 'big_pic.php?id=' + current_smallpic_idx + '&nm=' + aryImages[current_smallpic_idx];
picwindow(url);
return false;
}


Btw, I don't know anything about MySQL so take a look at Ancora's advice.

Cacus
02-15-2007, 07:50 PM
Mike

Works a treat! Thanks alot.

I will, when my js book arrives, go through it to see how it actually works.

Re: the 'echo id' this is not for the picture id but so the new page knows which record in the MySQL table to access for other information.

Once again many thanks for the help.

Steve

MikeFoster
02-15-2007, 08:18 PM
You're very welcome, Steve. :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum