[SOLVED] Noob question: Proper method for passing javascript variables to php?

[harkonenn]

I am attempting to create a feature for a website that would get the user's browser window size using javascript, then pass that info to a php script which would then resize an image to fit the browser window. This is what I have so far...

 

The javascript in the html page:

 

<script language="javascript">
<!--    
yourwidth = screen.width;
yourheight = screen.height;
//-->
</script> 

 

The php script:

 

header('Content-type: image/jpeg');

$filename = $_GET['img'];
$y_max = $_GET['yourheight'];
$x_max = $_GET['$yourwidth'];

list($width, $height) = getimagesize($filename);
$y1 = $height;
$x1 = $width;

if ($x1 > $x_max)
{
    $m = $y1/$x1;
    $x2 = $x_max;
    $y2 = $m * $x1;
}

$source = imagecreatefromjpeg($filename);
$enlargement = imagecreatetruecolor($x2, $y2);

imagecopyresized($enlargement, $source, 0, 0, 0, 0, $x2, $y2, $width, $height);

imagejpeg($thumb, null, 100);

 

The call from the html file:

<img src="resizer.php?img=images/myimage.jpg&yourwidth&yourheight" />

 

The script works as expected if the above line is changed to:

 

<img src="resizer.php?img=images/myimage.jpg&yourwidth=100&yourheight=100" />

 

But without assigning values to yourwidth and yourheight it fails. What am I doing wrong?

 

Thanks for any help you can offer.

[rhodesa]

You need to generate the SRC of the image dynamically, and assign it like so:

 

<img id="resizeImage" src="" />
<script language="javascript">
<!--    
yourwidth = screen.width;
yourheight = screen.height;
document.getElementById('resizeImage').src = 'resizer.php?img=images/myimage.jpg&yourwidth='+yourwidth+'&yourheight='+yourheight;
//-->
</script> 

 

Edit: In my opinion this seems silly. Is there a specific reason you are trying to use this? You can also manipulate the image size with CSS, using a percent for the width/height. In my mind that makes more sense.

[harkonenn]

OK, I'll try this...

[chigley]

Fancy telling us the context of this? I'm intrigued..

[harkonenn]

OK, here's the deal. I'm working on a photography site. I was compelled to make the site fit a 1280x1024 screen, so the images might appear small on some larger monitors (I have a 1920x1200 LCD on my laptop, and some of the photos do look tiny). So, I thought it might be nice to allow visitors to click a link under the image so that they can view a larger version of it. But, I had a great deal of trouble trying to decide exactly what the dimensions of that larger image should be; I want to avoid scrolling, especially in the horizontal direction.

 

That led me to think that if I could get the visitor's browser window size, I could serve up an enlarged image to fit it just right. I'm also using LightBox2 (http://www.huddletogether.com/projects/lightbox2/), so the new image would have to be included in a link that's compatible with that script.

 

I thought about the suggestion of resizing using CSS with percentages for width/height, but I'm not sure the quality is right.

[harkonenn]

After a little research, I found that LightBox2 has been modded to include the functionality that I wanted.

 

Thanks for your help, I really appreciate it.