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();
?>
![imag1.jpg]()
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>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<style type="text/css">
#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();
?>
<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>
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>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<style type="text/css">
#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();
?>
<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
![imag2.jpg]()
When you click on an image then your image will be shown in full size using Lightbox, as in the following:
![imag3.jpg]()
You will see next an image, as in the following:
![imag4.jpg]()
You will see a preview image, as in the following:
![imag5.jpg]()