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.

Use jquery and ajax, then on saveBroserSizeSession.php you can save the dimensions to session and use them throughout your website.

function sendBrowserSize() {
  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;
  }

$.ajax({
   type: "POST",
   url: "saveBroserSizeSession.php",
   data: "width="+myWidth+"&height="+myHeight,
   success: function(msg){
     alert( "Browser Dimensions Saved" );
   }
 });
}

$(document).ready(function()
{
    sendBrowserSize();
});

<img width='100%' src= .....
such a lot of unneccessary ** expletive deleted **

commented: say it like it is AB! +9

Sorry for my ignorance. RObbOb, I'm not sure where to use your code and how to access the saved variables. Would I include this in my php file or would I need to be directed to a new page and that is one area I have problems. As I said, I don't want the viewer of the site to have to click unnecessary items, especially between changing pictures. I will need to send this information each change since there is a chance the viewer will change the size of the browser during the session.

almostbob, I'm not sure what you are meaning by your post.

in the head section of your page include:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

the part of the script that I gave you earlier:

$(document).ready(function()

is much like pageload except it waits until all of the content of the page is loaded before firing so the user will not have to click anything.

then include the script that I posted earlier. You can do this on each page if you want so that if the browser size changes, your session will be updated on page refresh.

Then you will need a script to catch the ajax request called whatever, I picked "saveBroserSizeSession.php", and in that you will have:

<?php
session_start();

if(!isset($_POST['width']) || !isset($_POST['height']) || !is_numeric($_POST['width']) || !is_numeric($_POST['height']))
{
    exit("invald height or width");
}

$_SESSION['height'] = $_POST['height'];
$_SESSION['width'] = $_POST['width'];

echo "success";
?>

then you just want to make sure that you have session_start(); on the top of each php script that you want to have access to these measurements and you can include them in your html or javascript by using:

<?php echo $_SESSION['height']; ?>

and

<?php echo $_SESSION['width']; ?>

<img width='100%' src= .....
such a lot of unneccessary ** expletive deleted **

agreed

I guess I don't understand. I know nothing about ajax code. I copied your code into a new file (trying to follow your instructions on where to put the different sections) but all I get on the screen is some of the actual code printed out.

post what you have so far

Sorry, I may have spoke too soon. I had the </script> command in the wrong place. Now all I get is "invalid height or width." I'll see if I can figure it out.

that's good, that means that the ajax is working, but the values that you are sending are either not numeric or are blank.

Until I learn more about javascript I think I will use the javascript code in my original post and save the variables in a cookie and read them later in the php script. That should work shouldn't it?

sure. I'm curious though. The only thing that I can see that you may be doing with this is dynamically generating image sizes depending on browser dimensions. Is that what you are doing and if not why aren't you just using width:n% in css?

Do you have some examples how that would work. What if the photos proportions are different from one picture to another such as some portrait and some landscape. I'm not too familiar yet with css either so I'll look into that.

it won't work with photos, even the way that you are trying to do it because browsers don't handle the increase and decrease of image size very well and they contort the images. You need to pick a specific height or width and just go with it.

A repeat of a prior post,

<img width='100%' src= ...such a lot of unneccessary ** expletive deleted **

set the image width in %, the height will adjust to retain the proportion of the image, there is no need of javascript, which will not work in any browser that is secure, or any special sizing.
If you want the image the size of the window 100% or any fraction thereof

almostbob, that isn't working for my application. When I set the width to 100% and the height is greater than the window height I need to scroll to see the whole picture which is what I DON'T want. I want to view the whole picture but at it's maximum size for the browser it is viewed in. Of course there will be those who have their javascript turned off or the browser dimensions may not calculate properly, but they will need to be satisfied with viewing a smaller photo or scroll to see the whole photo. This photo album is first of all for me and if others can make use of it then great.

I should explain my theory behind this album so you may understand better. Most albums I have worked with you need to either create the album on your computer and then upload it (going through the process again if you add or delete photos) or you need to upload files through the album (often one or a limited amount at a time) and that is the only way it will recognize the photos. The album I have created you can upload your files through a ftp client to whatever folder, and it will detect the files and create thumbnails, etc. If it ends up taking too much time to create thumbnails I will set it so the user can manually update the thumbnails whenever there are additions or deletions. This takes a little longer to show the thumbnails (if they haven't been cached) but for me the convenience outweighs the time. In an album of about 400 photos it takes about 15-20 seconds to display the thumbnails. After the thumbnails are cached it is about as fast as any other album. This is one area I want to make use of the browser window size calculations. I now have it hardcoded to display 6 columns of thumbnails, but if my window size is smaller I will need to scroll horizontally to see all the columns so I want to calculate how many columns will fit in my browser size. When I click on a thumbnail the php code indicates the index # of the file I want to view and display that in the table cell with previous/next buttons on either size of the photo (these buttons I may implement into css and display them on top of the photo and have the photo use up the full width of the screen).

hey :)
i have a similar problem with my website-gallery. i use a sliding div for my photos but the problem is, that if there are not enough photos, the pics stick to the left (because of float:left; which i can not remove). my idea is to calculate the number of pics (i already did) and somehow get the lengh of all the pictures in order to combine it with the code that R00b0b postet. galleries with less pictures than the browser window can show, shall not have my sliding div, but be in a new div, centered.

my problem now is that i also only get "invalid width or height' out of R00b0b's code :/

website so far (some problems with the way i tried it with putting only more than 4 pics into the sliding div, else centered into 900px div, overflow:hidden; because i don't want a scrollbar in the layout): http://photo.roniastrickrodt.de/index.php?hue=2&cat=fireflies

test-site (not the whole content): http://photo.roniastrickrodt.de/test/

i hop you can help me somehow... i'm kind of going nuts after weeks of trying to get rid of my problem :D

my head-functions:
$(window).load(function() {
$("div#makeMeScrollable").smoothDivScroll({
autoScroll: "onstart" ,
autoScrollDirection: "backandforth",
autoScrollStep: 1,
autoScrollInterval:50,
visibleHotSpots: "always"
});

    $("div#makeMeScrollable").bind("mouseout", function(){
            $("div#makeMeScrollable").smoothDivScroll("startAutoScroll");
    });
    $("div.scrollingHotSpotLeft").bind("mouseout", function(){
            $("div#makeMeScrollable").smoothDivScroll("option","autoScrollDirection","left");
            $("div#makeMeScrollable").smoothDivScroll("startAutoScroll");
    });
    $("div.scrollingHotSpotRight").bind("mouseout", function(){
            $("div#makeMeScrollable").smoothDivScroll("option","autoScrollDirection","right");
            $("div#makeMeScrollable").smoothDivScroll("startAutoScroll");
    });
    $("div#makeMeScrollable").smoothDivScroll({autoScrollRightLimitReached: function() {
            $("div#makeMeScrollable").smoothDivScroll("option","autoScrollDirection","left");
            $("div#makeMeScrollable").smoothDivScroll("startAutoScroll");
    }});
    $("div#makeMeScrollable").smoothDivScroll({autoScrollLeftLimitReached: function() {
            $("div#makeMeScrollable").smoothDivScroll("option","autoScrollDirection","right");
            $("div#makeMeScrollable").smoothDivScroll("startAutoScroll");
    }});

    function sendBrowserSize() {
        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;
        }

        $.ajax({
        type: "POST",
        url: "functions.inc.php",
        data: "width="+myWidth+"&height="+myHeight,
        success: function(msg){
        alert( "Browser Dimensions Saved" );
        }
        });
    }

    $(document).ready(function(){
        sendBrowserSize();
    });

});
</script>

my functions.inc.php:

 session_start();

if(!isset($_POST['width']) || !isset($_POST['height']) || !is_numeric($_POST['width']) || !is_numeric($_POST['height']))
{
exit("invald height or width");
}
$_SESSION['height'] = $_POST['height'];
$_SESSION['width'] = $_POST['width'];

echo "success";

function photos($cat){
$verz = isset($_GET['cat']) ? $_GET['cat'] : 'news';
$handle = opendir($cat);
//echo $verz;
while($file = readdir($handle)){

      if($file != "." && $file != ".." && $file != "thumbs"){
        $dateinamen[] = $file;
    }


}
natsort($dateinamen);
$dateinamen = array_values($dateinamen);
return $dateinamen;
closedir($handle);

}

function display($cat){

    $bilder = photos($cat);
    $ch = count (photos($cat))-1;

    if ($_SESSION['width']>='900'){ /*will be changed to the length of all pictures together*/

     echo '<div id="makeMeScrollable">
                            <div class="scrollingHotSpotLeft"></div>
                            <div class="scrollingHotSpotRight"></div>
                            <div class="scrollWrapper">
                            <div class="scrollableArea">
                    '; 


      for($i=$ch; $i>=0; $i--){
                    $val=$bilder[$i];
                    echo "<div class='pic'>";
                              echo "<A HREF=\"./".$cat."/".$val."\" rel=\"lytebox[".$cat."]\"><IMG SRC=\"./".$cat."/thumbs/".$val."\" style='margin-right: 3px;'></a>";
                                echo "</div>";
        }



    echo '</div>
      </div>
      </div>';
}
else {
        echo '<div id="nogal">'; /*content centered, no scrollbar*/

                 for($i=$ch; $i>=0; $i--){
                $val=$bilder[$i];
                echo "<div class='pic'>";
                          echo "<A HREF=\"./".$cat."/".$val."\" rel=\"lytebox[".$cat."]\"><IMG SRC=\"./".$cat."/thumbs/".$val."\" style='margin-right: 3px;'></a>";
                            echo "</div>";
                 }
            echo'</div>';
  }


}

hey :)
i have a similar problem with my website-gallery. i use a sliding div for my photos but the problem is, that if there are not enough photos, the pics stick to the left (because of float:left; which i can not remove). my idea is to calculate the number of pics (i already did) and somehow get the lengh of all the pictures in order to combine it with the code that R00b0b postet. galleries with less pictures than the browser window can show, shall not have my sliding div, but be in a new div, centered.

my problem now is that i also only get "invalid width or height' out of R00b0b's code :/

website so far (some problems with the way i tried it with putting only more than 4 pics into the sliding div, else centered into 900px div, overflow:hidden; because i don't want a scrollbar in the layout): http://photo.roniastrickrodt.de/index.php?hue=2&cat=fireflies

test-site (not the whole content): http://photo.roniastrickrodt.de/test/

i hop you can help me somehow... i'm kind of going nuts after weeks of trying to get rid of my problem :D

my head-functions:
$(window).load(function() {
$("div#makeMeScrollable").smoothDivScroll({
autoScroll: "onstart" ,
autoScrollDirection: "backandforth",
autoScrollStep: 1,
autoScrollInterval:50,
visibleHotSpots: "always"
});

    $("div#makeMeScrollable").bind("mouseout", function(){
            $("div#makeMeScrollable").smoothDivScroll("startAutoScroll");
    });
    $("div.scrollingHotSpotLeft").bind("mouseout", function(){
            $("div#makeMeScrollable").smoothDivScroll("option","autoScrollDirection","left");
            $("div#makeMeScrollable").smoothDivScroll("startAutoScroll");
    });
    $("div.scrollingHotSpotRight").bind("mouseout", function(){
            $("div#makeMeScrollable").smoothDivScroll("option","autoScrollDirection","right");
            $("div#makeMeScrollable").smoothDivScroll("startAutoScroll");
    });
    $("div#makeMeScrollable").smoothDivScroll({autoScrollRightLimitReached: function() {
            $("div#makeMeScrollable").smoothDivScroll("option","autoScrollDirection","left");
            $("div#makeMeScrollable").smoothDivScroll("startAutoScroll");
    }});
    $("div#makeMeScrollable").smoothDivScroll({autoScrollLeftLimitReached: function() {
            $("div#makeMeScrollable").smoothDivScroll("option","autoScrollDirection","right");
            $("div#makeMeScrollable").smoothDivScroll("startAutoScroll");
    }});

    function sendBrowserSize() {
        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;
        }

        $.ajax({
        type: "POST",
        url: "functions.inc.php",
        data: "width="+myWidth+"&height="+myHeight,
        success: function(msg){
        alert( "Browser Dimensions Saved" );
        }
        });
    }

    $(document).ready(function(){
        sendBrowserSize();
    });

});
</script>

my functions.inc.php:

 session_start();

if(!isset($_POST['width']) || !isset($_POST['height']) || !is_numeric($_POST['width']) || !is_numeric($_POST['height']))
{
exit("invald height or width");
}
$_SESSION['height'] = $_POST['height'];
$_SESSION['width'] = $_POST['width'];

echo "success";

function photos($cat){
$verz = isset($_GET['cat']) ? $_GET['cat'] : 'news';
$handle = opendir($cat);
//echo $verz;
while($file = readdir($handle)){

      if($file != "." && $file != ".." && $file != "thumbs"){
        $dateinamen[] = $file;
    }


}
natsort($dateinamen);
$dateinamen = array_values($dateinamen);
return $dateinamen;
closedir($handle);

}

function display($cat){

    $bilder = photos($cat);
    $ch = count (photos($cat))-1;

    if ($_SESSION['width']>='900'){ /*will be changed to the length of all pictures together*/

     echo '<div id="makeMeScrollable">
                            <div class="scrollingHotSpotLeft"></div>
                            <div class="scrollingHotSpotRight"></div>
                            <div class="scrollWrapper">
                            <div class="scrollableArea">
                    '; 


      for($i=$ch; $i>=0; $i--){
                    $val=$bilder[$i];
                    echo "<div class='pic'>";
                              echo "<A HREF=\"./".$cat."/".$val."\" rel=\"lytebox[".$cat."]\"><IMG SRC=\"./".$cat."/thumbs/".$val."\" style='margin-right: 3px;'></a>";
                                echo "</div>";
        }



    echo '</div>
      </div>
      </div>';
}
else {
        echo '<div id="nogal">'; /*content centered, no scrollbar*/

                 for($i=$ch; $i>=0; $i--){
                $val=$bilder[$i];
                echo "<div class='pic'>";
                          echo "<A HREF=\"./".$cat."/".$val."\" rel=\"lytebox[".$cat."]\"><IMG SRC=\"./".$cat."/thumbs/".$val."\" style='margin-right: 3px;'></a>";
                            echo "</div>";
                 }
            echo'</div>';
  }


}

hey :)
i have a similar problem with my website-gallery. i use a sliding div for my photos but the problem is, that if there are not enough photos, the pics stick to the left (because of float:left; which i can not remove). my idea is to calculate the number of pics (i already did) and somehow get the lengh of all the pictures in order to combine it with the code that R00b0b postet. galleries with less pictures than the browser window can show, shall not have my sliding div, but be in a new div, centered.

my problem now is that i also only get "invalid width or height' out of R00b0b's code :/

website so far (some problems with the way i tried it with putting only more than 4 pics into the sliding div, else centered into 900px div, overflow:hidden; because i don't want a scrollbar in the layout): http://photo.roniastrickrodt.de/index.php?hue=2&cat=fireflies

test-site (not the whole content): http://photo.roniastrickrodt.de/test/

i hop you can help me somehow... i'm kind of going nuts after weeks of trying to get rid of my problem :D

my head-functions:

$(window).load(function() {
        $("div#makeMeScrollable").smoothDivScroll({ 
                autoScroll: "onstart" , 
                autoScrollDirection: "backandforth", 
                autoScrollStep: 1, 
                autoScrollInterval:50,  
                visibleHotSpots: "always"
        });

        $("div#makeMeScrollable").bind("mouseout", function(){
                $("div#makeMeScrollable").smoothDivScroll("startAutoScroll");
        });
        $("div.scrollingHotSpotLeft").bind("mouseout", function(){
                $("div#makeMeScrollable").smoothDivScroll("option","autoScrollDirection","left");
                $("div#makeMeScrollable").smoothDivScroll("startAutoScroll");
        });
        $("div.scrollingHotSpotRight").bind("mouseout", function(){
                $("div#makeMeScrollable").smoothDivScroll("option","autoScrollDirection","right");
                $("div#makeMeScrollable").smoothDivScroll("startAutoScroll");
        });
        $("div#makeMeScrollable").smoothDivScroll({autoScrollRightLimitReached: function() {
                $("div#makeMeScrollable").smoothDivScroll("option","autoScrollDirection","left");
                $("div#makeMeScrollable").smoothDivScroll("startAutoScroll");
        }});
        $("div#makeMeScrollable").smoothDivScroll({autoScrollLeftLimitReached: function() {
                $("div#makeMeScrollable").smoothDivScroll("option","autoScrollDirection","right");
                $("div#makeMeScrollable").smoothDivScroll("startAutoScroll");
        }});

        function sendBrowserSize() {
            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;
            }

            $.ajax({
            type: "POST",
            url: "functions.inc.php",
            data: "width="+myWidth+"&height="+myHeight,
            success: function(msg){
            alert( "Browser Dimensions Saved" );
            }
            });
        }

        $(document).ready(function(){
            sendBrowserSize();
        });

});
</script>

my functions.inc.php:

     session_start();

 if(!isset($_POST['width']) || !isset($_POST['height']) || !is_numeric($_POST['width']) || !is_numeric($_POST['height']))
 {
 exit("invald height or width");
 }
 $_SESSION['height'] = $_POST['height'];
 $_SESSION['width'] = $_POST['width'];

 echo "success";

function photos($cat){
    $verz = isset($_GET['cat']) ? $_GET['cat'] : 'news';       
    $handle = opendir($cat);
    //echo $verz;
    while($file = readdir($handle)){

          if($file != "." && $file != ".." && $file != "thumbs"){
            $dateinamen[] = $file;
        }


    }
    natsort($dateinamen);
    $dateinamen = array_values($dateinamen);
    return $dateinamen;
    closedir($handle);
}


function display($cat){

        $bilder = photos($cat);
        $ch = count (photos($cat))-1;

        if ($_SESSION['width']>='900'){ /*will be changed to the length of all pictures together*/

         echo '<div id="makeMeScrollable">
                                <div class="scrollingHotSpotLeft"></div>
                                <div class="scrollingHotSpotRight"></div>
                                <div class="scrollWrapper">
                                <div class="scrollableArea">
                        '; 


          for($i=$ch; $i>=0; $i--){
                        $val=$bilder[$i];
                        echo "<div class='pic'>";
                                  echo "<A HREF=\"./".$cat."/".$val."\" rel=\"lytebox[".$cat."]\"><IMG SRC=\"./".$cat."/thumbs/".$val."\" style='margin-right: 3px;'></a>";
                                    echo "</div>";
            }



        echo '</div>
          </div>
          </div>';
    }
    else {
            echo '<div id="nogal">'; /*content centered, no scrollbar*/

                     for($i=$ch; $i>=0; $i--){
                    $val=$bilder[$i];
                    echo "<div class='pic'>";
                              echo "<A HREF=\"./".$cat."/".$val."\" rel=\"lytebox[".$cat."]\"><IMG SRC=\"./".$cat."/thumbs/".$val."\" style='margin-right: 3px;'></a>";
                                echo "</div>";
                     }
                echo'</div>';
      }


    }

hey :)
i have a similar problem with my website-gallery. i use a sliding div for my photos but the problem is, that if there are not enough photos, the pics stick to the left (because of float:left; which i can not remove). my idea is to calculate the number of pics (i already did) and somehow get the lengh of all the pictures in order to combine it with the code that R00b0b postet. galleries with less pictures than the browser window can show, shall not have my sliding div, but be in a new div, centered.

my problem now is that i also only get "invalid width or height' out of R00b0b's code :/

website so far (some problems with the way i tried it with putting only more than 4 pics into the sliding div, else centered into 900px div, overflow:hidden; because i don't want a scrollbar in the layout): http://photo.roniastrickrodt.de/index.php?hue=2&cat=fireflies

test-site (not the whole content): http://photo.roniastrickrodt.de/test/

i hop you can help me somehow... i'm kind of going nuts after weeks of trying to get rid of my problem :D

my head-functions:
$(window).load(function() {
$("div#makeMeScrollable").smoothDivScroll({
autoScroll: "onstart" ,
autoScrollDirection: "backandforth",
autoScrollStep: 1,
autoScrollInterval:50,
visibleHotSpots: "always"
});

    $("div#makeMeScrollable").bind("mouseout", function(){
            $("div#makeMeScrollable").smoothDivScroll("startAutoScroll");
    });
    $("div.scrollingHotSpotLeft").bind("mouseout", function(){
            $("div#makeMeScrollable").smoothDivScroll("option","autoScrollDirection","left");
            $("div#makeMeScrollable").smoothDivScroll("startAutoScroll");
    });
    $("div.scrollingHotSpotRight").bind("mouseout", function(){
            $("div#makeMeScrollable").smoothDivScroll("option","autoScrollDirection","right");
            $("div#makeMeScrollable").smoothDivScroll("startAutoScroll");
    });
    $("div#makeMeScrollable").smoothDivScroll({autoScrollRightLimitReached: function() {
            $("div#makeMeScrollable").smoothDivScroll("option","autoScrollDirection","left");
            $("div#makeMeScrollable").smoothDivScroll("startAutoScroll");
    }});
    $("div#makeMeScrollable").smoothDivScroll({autoScrollLeftLimitReached: function() {
            $("div#makeMeScrollable").smoothDivScroll("option","autoScrollDirection","right");
            $("div#makeMeScrollable").smoothDivScroll("startAutoScroll");
    }});

    function sendBrowserSize() {
        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;
        }

        $.ajax({
        type: "POST",
        url: "functions.inc.php",
        data: "width="+myWidth+"&height="+myHeight,
        success: function(msg){
        alert( "Browser Dimensions Saved" );
        }
        });
    }

    $(document).ready(function(){
        sendBrowserSize();
    });

});
</script>

my functions.inc.php:

 session_start();

if(!isset($_POST['width']) || !isset($_POST['height']) || !is_numeric($_POST['width']) || !is_numeric($_POST['height']))
{
exit("invald height or width");
}
$_SESSION['height'] = $_POST['height'];
$_SESSION['width'] = $_POST['width'];

echo "success";

function photos($cat){
$verz = isset($_GET['cat']) ? $_GET['cat'] : 'news';
$handle = opendir($cat);
//echo $verz;
while($file = readdir($handle)){

      if($file != "." && $file != ".." && $file != "thumbs"){
        $dateinamen[] = $file;
    }


}
natsort($dateinamen);
$dateinamen = array_values($dateinamen);
return $dateinamen;
closedir($handle);

}

function display($cat){

    $bilder = photos($cat);
    $ch = count (photos($cat))-1;

    if ($_SESSION['width']>='900'){ /*will be changed to the length of all pictures together*/

     echo '<div id="makeMeScrollable">
                            <div class="scrollingHotSpotLeft"></div>
                            <div class="scrollingHotSpotRight"></div>
                            <div class="scrollWrapper">
                            <div class="scrollableArea">
                    '; 


      for($i=$ch; $i>=0; $i--){
                    $val=$bilder[$i];
                    echo "<div class='pic'>";
                              echo "<A HREF=\"./".$cat."/".$val."\" rel=\"lytebox[".$cat."]\"><IMG SRC=\"./".$cat."/thumbs/".$val."\" style='margin-right: 3px;'></a>";
                                echo "</div>";
        }



    echo '</div>
      </div>
      </div>';
}
else {
        echo '<div id="nogal">'; /*content centered, no scrollbar*/

                 for($i=$ch; $i>=0; $i--){
                $val=$bilder[$i];
                echo "<div class='pic'>";
                          echo "<A HREF=\"./".$cat."/".$val."\" rel=\"lytebox[".$cat."]\"><IMG SRC=\"./".$cat."/thumbs/".$val."\" style='margin-right: 3px;'></a>";
                            echo "</div>";
                 }
            echo'</div>';
  }


}

photography you dont have to use it, but you can eamine the very well commente script to find out how it can be done
just the first answer in a google search for drop in php album

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.