[Resolved] 5 images per page (next and previous)

kikki

Hi!
I need help in viewing 5 images per page, this script shows all the images on one page, but I want to create automated "next" and "previous" links. It'd be great if anyone could give hand on this one, thanks.

<html>
<head>
</head>

<body>
<?
   // Some configuration variables !
   $maxWidth = 90;
   $maxHeight = 90;
   $maxCols = 8;
//view 5 img per page
   $imgPerPage = 5;
   $webDir = "http://localhost.com/images/";
   $localDir = $_SERVER['DOCUMENT_ROOT']."images/";

   $AutorisedImageType = array ("jpg", "jpeg", "gif", "png","bmp");
?>

<center>
  <table border='1' cellspacing='5' cellpadding='5' style="border-collapse:collapse; border-style: dotted">
    <tr>
   <?
   // Open localDir
   $dh = opendir($localDir);
   while (false !== ($filename = readdir($dh))) {
       $filesArray[] = $filename;
   }

   // Display and resize
   foreach ($filesArray as $images) {

   $ext = substr($images, strpos($images, ".")+1, strlen($images));

   if( in_array($ext, $AutorisedImageType) ) {

       list($width, $height, $type, $attr) = @getimagesize( $localDir.$images );

       $xRatio = $maxWidth / $width;
       $yRatio = $maxHeight / $height;

       if ( ($width <= $maxWidth) && ($height <= $maxHeight) ) {
         $newWidth = $width;
         $newHeight = $height;
       }
       else if (($xRatio * $height) < $maxHeight) {
         $newHeight = ceil($xRatio * $height);
         $newWidth = $maxWidth;
       }
       else {
         $newWidth = ceil($yRatio * $width);
         $newHeight = $maxHeight;
       }

       if($i == $maxCols) {
           echo "</tr><tr>";
           $i = 0;
       }
       echo "<td align='center' valign='middle' width='$maxWidth' height='$maxHeight'><img src='".$webDir.$images."' width='$newWidth' height='$newHeight'></td>";
       $i++;
   }
   }
?>
</tr>
</table>
</center>
</body>
</html>

devinemke

use [man]array_chunk[/man] to break up $filesArray into 5's and then pass the array index offset via a GET variable to do next 5/ prev 5.

fugazzi007

You'll want something like:

$page= $HTTP_GET_VARS['page'];
// Show previous on page 2 and up
if ($page > 1) {
echo "<a href=\"images.php?page=" . ($page - 1) . "\">Previous</a>&nbsp";
}

// Show next up to N-1
if ($page<$MaxNumberPages) {
echo "&nbsp<a href=\"images.php?page=" . ($page + 1) . "\">Next</a>";
}

This will give you a previous and next link on the pages that you have content for. You'll have to build a bit of logic that splits up your images into paginated content, or use a dbase.

I built something similar to what you're wanting. Photo Gallery Code It's in the forums if you have any suggestions to make.

kikki

thanks for the replies guys, I've tried to get the all pictures from DB and view them, for some reason this isn't working, can you guys pls tell me why or maybe fix this?

<html>
<head>
</head>

<body>
<?
   // Some configuration variables !
   $maxWidth = 90;
   $maxHeight = 90;
   $maxCols = 5;
   $webDir = "http://localhost/images/";
   $localDir = $_SERVER['DOCUMENT_ROOT']."/images/";

   $AutorisedImageType = array ("jpg", "jpeg", "gif", "png","bmp");
?>

<center>
  <table border='1' cellspacing='5' cellpadding='5' style="border-collapse:collapse; border-style: dotted">
    <tr>
   <?
   // Open localDir
   $dh = opendir($localDir);
   while (false !== ($filename = readdir($dh))) {
       $filesArray[] = $filename;
   }

   // Display and resize
   foreach ($filesArray as $images) {

   $ext = substr($images, strpos($images, ".")+1, strlen($images));

   if( in_array($ext, $AutorisedImageType) ) {

       list($width, $height, $type, $attr) = @getimagesize( $localDir.$images );

       $xRatio = $maxWidth / $width;
       $yRatio = $maxHeight / $height;

       if ( ($width <= $maxWidth) && ($height <= $maxHeight) ) {
         $newWidth = $width;
         $newHeight = $height;
       }
       else if (($xRatio * $height) < $maxHeight) {
         $newHeight = ceil($xRatio * $height);
         $newWidth = $maxWidth;
       }
       else {
         $newWidth = ceil($yRatio * $width);
         $newHeight = $maxHeight;
       }

       if($i == $maxCols) {
           echo "</tr><tr>";
           $i = 0;
       }
       echo "<td align='center' valign='middle' width='$maxWidth' height='$maxHeight'><img src='".$webDir.$images."' width='$newWidth' height='$newHeight'></td>";
       $i++;
   }
   }
?>
<br><br>
<?
//Connect to MySQL DB
include "database_config.php";

//initialize the start to 0
if(!$rowstart) $rowstart=0;

//mysql queries
$result = mysql_query("select * from allpictures order by id desc limit 5");
$result2 = mysql_query("select * from allpictures");

//find the number of total rows in the shoutbox total
$numrows = mysql_num_rows($result2);


if ($rowstart > $numrows) 
{
   echo '<A HREF="' . $php_self . "rowstart=" . $rowstart-5 . '">< Previous Page </A>';
}

if($rowstart+5<$numrows) 
{
   echo '<A HREF="' . $php_self . "rowstart=" . $rowstart+5 . '">< Next Page </A>';
} 

   ?>
</tr>
</table>
</center>
</body>
</html>

fugazzi007

What isn't working?

echo $result;
echo $result2;

Is that where it's breaking?

kikki

Originally posted by fugazzi007
What isn't working?

echo $result;
echo $result2;

Is that where it's breaking?

sorry for the late reply 🙁

Yes.. $result and $result2 should count and divide the pictures by 5 per page, but it doesn't do the job for some reason.

tsinka

Hi,

some questions:

In the first part of the code you read the file directory and print the images. In the second part you check the allpictures table to print the navigation part of the page.

Do you store the image paths/filenames in the table ? I can't see any relation between the first part of the script and the second one because you don't use the table data in the first part. Additionally, I can't see where you use the rowstart GET parameter in the first part of the script to limit the number of pictures to display.

Thomas

kikki

Originally posted by tsinka
Hi,

some questions:

In the first part of the code you read the file directory and print the images. In the second part you check the allpictures table to print the navigation part of the page.

Do you store the image paths/filenames in the table ? I can't see any relation between the first part of the script and the second one because you don't use the table data in the first part. Additionally, I can't see where you use the rowstart GET parameter in the first part of the script to limit the number of pictures to display.

Thomas

yes all the picture names are stored in a table so I tried to count the picture entries and divide by 5 so that I could show 5 images per page, this maybe the wrong way to print 5 images per page. Thatswhy I need help.

//mysql queries
$result = mysql_query("select * from allpictures order by id desc limit 5");
$result2 = mysql_query("select * from allpictures");

kikki

thanks for trying to help me guys.. this was too easy, I've fixed the code and solved the problem. Thanks guys!