By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,946 Members | 712 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,946 IT Pros & Developers. It's quick & easy.

PHP Image Gallery and Pagination

P: 5
Hello,

I'm a starting out web designer, and a client of mine wants a gallery of their products to be displayed. What I have so far works beautifully.

Basically what it does is reads the contents of a directory and displays them in a list. That list is then vertically wrapped to be made into a table type display. Resulting in a basic grid pattern of images.

This was great when they only had 20 or so images, but now they have over 50. I am looking for a way to possibly limit the images shown to just 16 (so as to make a nice 4x4 display), then paginate it so that the load is spread over several pages (say i have 50 images divided by 16 images per page gives me 5 pages of images.) then have the little paging links at the bottom of the page (<< Previous - Next >>).

here is what I have made so far. If anyone can help me with my task, help would be greatly appreciated. (and feel free to use this source).

Expand|Select|Wrap|Line Numbers
  1. @charset "utf-8";
  2. /* CSS Document */
  3.  
  4. body {
  5.     margin: 0;
  6.     padding: 0;
  7. }
  8.  
  9. #wrap {
  10.     margin: 0 auto;
  11.     padding: 2em;
  12.     width: 40em;
  13. }
  14.  
  15. #gallery {
  16.     margin: 0;
  17.     padding: .5em;
  18. }
  19.  
  20. ul {
  21.     width: 40em;
  22.     margin: 0;
  23.     padding: 0;
  24. }
  25.  
  26. ul li {
  27.     list-style: none;
  28.     float: left;
  29.     width: 10em;
  30.     margin: 0;
  31.     padding: .3em 0;
  32. }
  33.  
  34. ul li a img {
  35.     border: none;
  36.     margin: 0;
  37.     padding: 0;
  38. }
  39.  
  40. br {
  41.     clear: left;
  42. }
  43.  
  44.  

[PHP]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Gallery Testing</title>
</head>
<body>
<div id="wrap">
<div id="gallery">
<ul
<?php
if(isset($_GET['dir']) && is_dir($_GET['dir'])) {
$dir = $_GET['dir'];
} else {
$dir = './img';
}

$exclude[] = "";

if (is_dir($dir)) {
if ($handle = opendir($dir)) {
while (($fp = readdir($handle)) !== false) {
if ($fp != '.' && $fp != '..') {
if (!in_array($fp, $exclude)) {
?>

><li><a href="img/<?php echo $fp; ?>"><img src="img/<?php echo $fp; ?>" width="150" height="113" alt="image" /></a></li

<?php
}
}
}
closedir($handle);
}
}
?>
></ul>
<br />
</div>
</div>
</body>
</html>[/PHP]
Dec 23 '07 #1
Share this Question
Share on Google+
3 Replies


Markus
Expert 5K+
P: 6,050
Most - probably all - pagination tutorials will be based around using a database to store the data. How you would go about doing this without a database i'm not so sure.

After a while of searching i found this t's abit touch and go, but that's how it will probably be if you're not going to use a database.

Sorrry, maybe one of the experts will have a better idea :)
Dec 23 '07 #2

P: 5
Thanks a million

Ive looked over what they were discussing, and tried to implement his paging script. But im afraid ive run into those "wacky results". The output does sort of what I wanted it to, it limits to 16 list items and creates new pages... but it does this in a very odd way.

the output looks something like:

Expand|Select|Wrap|Line Numbers
  1. # 3.jpg
  2. #
  3. #
  4. #
  5. #
  6. #
  7. #
  8. #
  9. #
  10. #
  11. #
  12. #
  13. #
  14. #
  15. #
  16. #
  17. # 3.jpg
  18. # 8.jpg
  19. #
  20. #
  21. #
  22. #
  23. #
  24. #
  25. #
  26. #
  27. #
  28. #
  29. #
  30. #
  31. #
  32. #
  33. # 3.jpg
  34. # 8.jpg
  35. # 5.jpg
  36. #
  37. #
  38. #
  39. #
  40. #
  41. #
  42. #
  43. #
  44. #
  45. #
  46. #
  47. #
  48. #
  49.  
  50.  ......
  51.  
  52. # 3.jpg
  53. # 8.jpg
  54. # 5.jpg
  55. # 2.jpg
  56. # 16.jpg
  57. # 14.jpg
  58. # 6.jpg
  59. # 13.jpg
  60. # 15.jpg
  61. # 9.jpg
  62. # 11.jpg
  63. # 1.jpg
  64. # 4.jpg
  65. # 12.jpg
  66. # 10.jpg
  67. # 7.jpg
Thats almost what I want.. the last list block at least... but I dont get why its running through the loop like that. every time a new item is added or included, it snapshots it and makes a new list.

Heres my revised source:

[PHP]<?php
echo "<ul>";

$filearray = array();
if ($fil = opendir("img/")) {
while (($file = readdir($fil)) !== false) {
if ($file != "." && $file != "..")
{
$filearray[] = $file;
$page = empty($_GET['page']) ? 1 : $_GET['page'];
$num_per_page = 16;
$total_pages = ceil(count($filearray)/$num_per_page);

for($i = ($page - 1) * $num_per_page; $i < $page * $num_per_page; $i++)
{
echo "<li>".$filearray[$i]."</li>";
}
}
}
closedir($fil);
echo "</ul>";
$pages = array();
for($i = 1; $i <= $total_pages; $i++) {
$pages[] = "<a href=\"".$_SERVER['PHP_SELF']."?page=".$i."\">".$i."</a>";
}
echo "Page: ".implode(" ", $pages);
}

?>[/PHP]

Any more help would be really.. well, helpful.
Dec 24 '07 #3

P: 5
Actually, thanks to the folks over at SpurWare, got it. Here's the code for anyone thats interested though:

[PHP]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Gallery Testing</title>
</head>
<body>
<div id="wrap">

<div id="gallery">

<?php
echo "<ul";

$filearray = array();
if ($fil = opendir("img/")) {
while (($file = readdir($fil)) !== false) {
if ($file != "." && $file != "..")
{
$filearray[] = $file;
$page = empty($_GET['page']) ? 1 : $_GET['page'];
$num_per_page = 16;
$total_pages = ceil(count($filearray)/$num_per_page);

}
}
for($i = ($page - 1) * $num_per_page; $i < $page * $num_per_page; $i++)
{?>
><li><a href="img/<?php echo $filearray[$i]; ?>"><img src="img/<?php echo $filearray[$i]; ?>" width="150" height="113" alt="<?php echo $filearray[$i]; ?>" /></a></li
<?php }
closedir($fil);
echo "></ul>";
$pages = array();
for($i = 1; $i <= $total_pages; $i++) {
$pages[] = "<a href=\"".$_SERVER['PHP_SELF']."?page=".$i."\">".$i."</a>";
}
echo "Page: ".implode(" ", $pages);
}
?>
<br />
</div>
</div>
</body>
</html>

[/PHP]
Dec 24 '07 #4

Post your reply

Sign in to post your reply or Sign up for a free account.