Creating an Image Gallery with PHP

By Darren W. Hedlund
2005-06-20

Creating an Image Gallery

The following PHP code will show you how to make a basic image gallery.

The first step is to make a new web folder, in this case we will make a folder called images.

Inside the images folder will be the main index.php code. Along with that main folder make two new sub folders, main and thumb.

The first part of the index.php code is to generate the HTML commands.

Next, to start the php code add the php start command.

<?php

Now, to assign the varibles.

$a = '0';
$filepath = "thumb";
$url_path = "main";
$dir = dir($filepath);

Notice the filepath = thumb, that is your thumbnailed image folder, and url_path is your main image folder.

Next is to assign the table layout:

echo "<table border=\"0\" cellpadding=\"5\" cellspacing=\"5\" width=\"75%\">";

Now we begin the stages of looping through all the images in the thumb nail directory, and assign a link to the main image.

while($entry=$dir->read()) {
    if($entry == "." || $entry == "..") {
        continue;
    }
    $fp = @fopen("$filepath/$entry","r");

This begins the scan through the thumb direcory too look for images (note: if you have no images in the thumb folder you will not get anything).

Now we cycle through the files and generate the php to html code for linking displaying the thumbnail images:

if ($a == '0') {echo "<tr>";}
if ($a == '5') {echo "<tr>";}
if ($a == '10') {echo "<tr>";}
if ($a == '15') {echo "<tr>";}
?><td>
<a href="<? echo "$url_path/$entry" ?>">
<img src="<? echo "$filepath/$entry" ?>" alt="<? echo $entry ?>"></a>
</td>
<?
$a = $a + 1;
}

The if ($a == '0') {echo "<tr>";} varible tell it to display them in a controlled table format, and after a set number of images, create a new sub table field.

Look at the $url_path/$entry, and $filepath/$entry. This part tells it to go through the folder thumb and generate all files the by the name $entry, same with $filepath.

after the loop is done, and no more files are found end the loop, and show the last html code.

?>
</tr>
</table>
</center></div>
</body>
</html>

Here is the complete code:

<html>  <head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="GENERATOR" content="Microsoft FrontPage Express 2.0">
</head> <body bgcolor="#FFFFFF">
<div align="center"><center>
<?php
$a = '0';
$filepath = "thumb";
$url_path = "main";
$dir = dir($filepath);
echo "<table border=\"0\" cellpadding=\"5\" cellspacing=\"5\" width=\"75%\">";
while($entry=$dir->read()) {
    if($entry == "." || $entry == "..") { 
        continue; 
    } 
    $fp = @fopen("$filepath/$entry","r");
if ($a == '0') {echo "<tr>";}
if ($a == '5') {echo "<tr>";}
if ($a == '10') {echo "<tr>";}
if ($a == '15') {echo "<tr>";}
?><td>
  <a href="<? echo "$url_path/$entry" ?>">
  <img src="<? echo "$filepath/$entry" ?>" alt="<? echo $entry ?>"></a>
  </td>
<?
$a = $a + 1;
}
?> 
</tr>
</table>
</center></div>
</body>
</html>

Thats it! make sure to have images in the thumb, and also in the main, and note the image name must be the same, but not the size.

Please check the convert tutorial to learn how to convert your original images to thumbnails.

Tutorial Pages:
» Creating an Image Gallery

Related Tutorials:
» Port Scanning and Service Status Checking in PHP
» Web Database Access from Desktop Applications
» CubeCart 3.0 Installation and Configuration
» PHP Site Search Made Easy
» Installing and Configuring Drupal 6.1
» Desktop Application Development with PHP-GTK

Advertise with Us!

Tutorials

Scripts

Web Hosting

Developer Manuals

Resources