Creating Picture Gallery in PHP

Introduction

In this article I explain creation of a picture gallery in PHP. This is a very simple technique for creating a picture gallery using CSS, HTML, and Lightbox. You will first ensure that your PHP GD library is enabled using of this code:

<?php

phpinfo();

Assuming your GD library is enabled, you can start the picture gallery code.

I will use Lightbox for the image gallery, as in the following:

<html>

<head>

<title>Image Gallery</title>

#pictures li

{

float:left;

height:<?php echo ($max_height + 2); ?>px;

list-style:none outside;

width:<?php echo ($max_width + 2); ?>px;

text-align:center;

}

#img

{

border:1;

outline:none;

}

</style>

</head>

<body>

<?php

showPictures();

</body>

</html>

Example

Using the following code you can create a simple image gallery in PHP.

<?php

//picture size setting

$max_width = 50;

$max_height = 50;

function checkpicture($image)

{

if ( preg_match('/jpg|jpeg/i', $image))

{

return 'jpg';

}

else if ( preg_match('/png/i', $image))

{

return 'png';

}

else if ( preg_match('/gif/i', $image))

{

return 'gif';

}

else

{

return '';

}

function showPictures()

{

global $max_width, $max_height;

if ( $handle = opendir("."))

{

$lightbox = rand();

echo '<ul id="pictures">';

while ( ($file = readdir($handle)) !== false)

{

if ( !is_dir($file) )

{

$split = explode('.', $file);

$image = $split[count($split) - 1];

if ( ($type = checkpicture($image)) == '')

{

continue;

}

if ( ! is_dir('gallery'))

{

mkdir('gallery');

}

if ( ! file_exists('gallery/'.$file))

{

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 * ($max_width / $oldH);

$newH = $max_height;

}

else

{

$newW = $max_width;

$newH = $oldH * ($max_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);

}

echo '<li><a href="'.$file.'" rel="lightbox['.$lightbox.']">';

echo '<img src="gallery/'.$file.'" alt="" />';

echo '</a></li>';

}}

echo '</ul>';

}}

<html>

<head>

<title>Image Gallery</title>

#pictures li

{

float:left;

height:<?php echo ($max_height + 2); ?>px;

list-style:none outside;

width:<?php echo ($max_width + 2); ?>px;

text-align:center;

}

#img

{

border:1;

outline:none;

}

</style>

</head>

<body>

<?php

showPictures();

</body>

</html>

Output

When you click on an image then your image will be shown in full size using Lightbox, as in the following:

You will see next an image, as in the following:

You will see a preview image, as in the following: