Introduction
In this article I will explain pagination in a picture gallery using PHP. This is a very simple technique for pagination in a picture gallery using PHP code. First of all I will create a picture gallery using CSS, HTML, and Lightbox plugin and then I will use pagination in the picture gallery. Before beginnig you will first enusre that your PHP GD library is enabled, then use this code. To check that the GD library is enabled use following the following code.
<?php phpinfo(); ?>
Example
<?php
$width = 100;
$height = 200;
$per_page = 6;
$page = $_GET['page'];
$has_previous = false;
$has_next = false;
function showPictures()
{
global $page, $per_page, $has_previous, $has_next;
if ( $handle = opendir(".") )
{
$lightbox = rand();
echo '<ul id="pictures">';
$count = 0;
$skip = $page * $per_page;
if ( $skip != 0 )
$has_previous = true;
while ( $count < $skip && ($file = readdir($handle)) !== false )
{
if ( !is_dir($file) && ($type = showPictureType($file)) != '' )
$count++;
}
$count = 0;
while ( $count < $per_page && ($file = readdir($handle)) !== false )
{
if ( !is_dir($file) && ($type = showPictureType($file)) != '' )
{
if ( ! is_dir('gallery') )
{
mkdir('gallery');
}
if ( ! file_exists('gallery/'.$file) )
{
makeThumb( $file, $type );
}
echo '<li><a href="'.$file.'" rel="lightbox['.$lightbox.']">';
echo '<img src="gallery/'.$file.'" alt="" />';
echo '</a></li>';
$count++;
}
}
echo '</ul>';
while ( ($file = readdir($handle)) !== false ) {
if ( !is_dir($file) && ($type = showPictureType($file)) != '' )
{
$has_next = true;
break;
}}}}
function showPictureType($file)
{
$split = explode('.', $file);
$ext = $split[count($split) - 1];
if ( preg_match('/jpg|jpeg/i', $ext) )
{
return 'jpg';
}
else if ( preg_match('/png/i', $ext) )
{
return 'png';
}
else if ( preg_match('/gif/i', $ext) )
{
return 'gif';
}
else
{
return '';
}
}
function makeThumb( $file, $type )
{
global $width, $height;
if ( $type == 'jpg' )
{
$src = imagecreatefromjpeg($file);
}
else if ( $type == 'png' )
{
$src = imagecreatefrompng($file);
}
else if ( $type == 'gif' )
{
$src = imagecreatefromgif($file);
}
if ( ($oldW = imagesx($src)) < ($oldH = imagesy($src)) )
{
$newW = $oldW * ($width / $oldH);
$newH = $height;
}
else
{
$newW = $width;
$newH = $oldH * ($height / $oldW);
}
$new = imagecreatetruecolor($newW, $newH);
imagecopyresampled($new, $src, 0, 0, 0, 0, $newW, $newH, $oldW, $oldH);
if ( $type == 'jpg' )
{
imagejpeg($new, 'gallery/'.$file);
}
else if ( $type == 'png' )
{
imagepng($new, 'gallery/'.$file);
}
else if ( $type == 'gif' )
{
imagegif($new, 'gallery/'.$file);
}
imagedestroy($new);
imagedestroy($src);
}
?>
<html>
<head>
<title>Pictures Gallery</title>
<style type="text/css">
body
{
width:780px;
margin:0 auto;
}
#pictures li
{
float:left;
height:<?php echo ($height + 10); ?>px;
list-style:none outside;
width:<?php echo ($width + 10); ?>px;
text-align:center;
}
img
{
border:0;
outline:none;
}
.prev
{
float:left;
}
.next
{
float:right;
}
</style>
</head>
<body>
<?php
showPictures();
?>
<div style="clear:both"></div>
<?php
if ( $has_previous )
echo '<p class="prev"><a href="?page='.($page - 1).'">← Previous Page</a></p>';
if ( $has_next )
echo '<p class="next"><a href="?page='.($page + 1).'">Next Page →</a></p>';
?>
<div style="clear:both"></div>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
</body>
</html>
Output
![pag1.jpg]()
Click on "Preview" to preview the image.
![pag2.jpg]()