Pagination in Image Gallery Using PHP

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).'">&larr; Previous Page</a></p>';

 

       if ( $has_next )

              echo '<p class="next"><a href="?page='.($page + 1).'">Next Page &rarr;</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

Up Next
    Ebook Download
    View all
    Learn
    View all