5
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
- @charset "utf-8";
- /* CSS Document */
- body {
- margin: 0;
- padding: 0;
- }
- #wrap {
- margin: 0 auto;
- padding: 2em;
- width: 40em;
- }
- #gallery {
- margin: 0;
- padding: .5em;
- }
- ul {
- width: 40em;
- margin: 0;
- padding: 0;
- }
- ul li {
- list-style: none;
- float: left;
- width: 10em;
- margin: 0;
- padding: .3em 0;
- }
- ul li a img {
- border: none;
- margin: 0;
- padding: 0;
- }
- br {
- clear: left;
- }
[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]
