I am making a photo album. I have the basics set up without using any javascript but now I would like to be able to get the size of the browser window for at least two different instances. If I can get it for the thumbnail page I should be able to figure it out for the viewing page. On the viewer page I want to be able to view the photo at its maximum size for the browser that it is viewed in. For the thumbnail page I would like to calculate the width of the browser to know how many thumbnails will fit across the window. Here is the existing code for my thumbnails:
<?php
// open this directory
$myDirectory = opendir("./thumb");
// get each entry
while($entryName = readdir($myDirectory)) {
$dirArray[] = $entryName;
}
// close directory
closedir($myDirectory);
// count elements in array
$indexCount = count($dirArray);
//Print ("$indexCount files<br>\n");
// sort 'em
sort($dirArray);
// loop through the array of thumnails and display them in table form
echo '<table align="center">';
$index=2;
while($index < $indexCount) {
echo '<tr>';
for($columns=$columns; $columns<6; $columns++){
if($index>$indexCount-1){break;}
echo '<td width="165" height="100" align="center"><a href="view2.php?id='.$index.'"><img src="./thumb/'.$dirArray[$index].'" width="160" height="98" alt="Smile"></td>';
$index++;
}
echo '</tr>';
$columns=0;
}
echo '</table>';
?>**I edited this post to include a better thumbnail viewer. Now all I need to do is change the '6' in $columns<6 to a variable which will be a calculation of how many thumbnails will fit across the window.**
Here is some Javascript code that gives me the correct information:
function alertSize() {
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
window.alert( 'Width = ' + myWidth );
window.alert( 'Height = ' + myHeight );
}Instead of clicking a link to get an alert box for myWidth and myHeight I want to make the calculations (probably with sending them to a new page) and use them in my php code. I want this to all be automatic without the user having to click anything.
If necessary I could perform this check on one page then automatically be directed to the php thumbnail page, transferring the values to that page. I just don't know how to perform this.
Here is the code for viewing my photos on the viewing page so I would somehow integrate sending these variables with the request for the new photo.
echo '<td width="5%">';
if($photoprev>1){
echo '<a href="view2.php?id='.$photoprev.'"><img src="previous.gif" height="80" width="40" alt="Smile"></a>';}
echo '</td>';
echo '<td width="40%" height="100% align="center"><a href="index.php"><img src="'.$dirArray[$photo].'" alt="Smile"></a></td>';
//echo '<td width="5%">';
if($photonext<$indexCount){
echo '<a href="view2.php?id='.$photonext.'"><img src="next.gif" height="80" width="40" alt="Smile"></a>';}
//echo '</td>';I want to resize the photo to fit either its maximum height or width to the table cell it is shown in. I can make the calculations myself, I just need help sending the values.
