Write a comment on this article
In this tutorial we will create an image gallery with two frames. The image will be read from a folder, this folder will also contain a subfolder called "thumbs" containing the thumbnails. The thumbnails will be displayed as a navigation in the smaller left frame, the full image in the larger right frame. The name of the folder containing the images will be passed as a URL parameter called $path, so we can use the same script for different image folders. We will need three files:
index.php
This file is our main file and contains the frameset. It doesn't contain much PHP code, it only forwards the parameter $path to the navigation frame:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>An image gallery</title>
<frameset cols="126,*">
<frame src="navigation.php?path=<?php echo $_GET["path"]; ?>"
name="navigation" noresize marginwidth="0" marginheight="0" scrolling="yes" frameborder="0">
<frame src="main.php" name="main" noresize
marginwidth="0" marginheight="0" scrolling="no" frameborder="0">
</frameset>
</head>
<noframes>
<body>This page requires a frame-compatible browser.</body>
</noframes>
</html>
navigation.php
This will be the left small frame displaying the thumbnails. This for, we will read the folder which is passed with the parameter $path. First we will create the HTML structure and add the PHP code later:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>An image gallery</title>
<style type="text/css">
<!--
div {
margin:2px;
text-align:center;
}
img {
border:none;
margin:2px;
}
-->
</style>
</head>
<body>
<div>
<!-- HERE COMES THE PHP CODE -->
</div>
</body>
</html>
Now comes the more interesting part: reading the folder. To read the folder we need to open a handle. We will do this by using the function opendir. This function requires a foldername, which is stored in our parameter "path". As we will need the parameter more often, we declare a new variable $path. Before we open the folder, we check if it exists to avoid error messages. We will do this with the function file_exists. Moreover, we define a variable files as an array to store the filenames of the directory.
//path to the images folder
$path = $_GET["path"];
//check if folder exists
if(file_exists($path)){
//array to read files
$files = array();
//open folder
$handle = opendir($path);
//continue reading folder ...
//folder does not exist
}else{
//print an error message
}
Now that we have opened the directory, we can read its contents. This is done by the function readdir. This function needs a valid handle to work with (which is in our case referenced in $handle) and gives us all files in the folder one by one, which means we will have to use a loop.
while($file = readdir($handle)){
//do something
}
What do we do inside the loop? Because sorting of the folder is not possible, we store all filenames in an array called $files.
Why shall we sort at all? Imagine you made a series of pictures, e.g. the sunrise. The filenames are numbered automatically in an ascending order. Because the files in the folder are being read unsorted, the chronology of the images would be mixed up.
Back to the loop and to our first little challenge. When reading a folder's content, all files and folders are returned. So we also will get the subdirectory "thumbs", the current directory (.) and the parent directory. As these are not images, we may not store them in our array. This works with an if-statement.
if($file != "." && $file != ".." && $file != "thumbs"){
$files[] = $file;
}
Now that we have stored all filenames in our array $files, it's time to sort them using the function sort.
sort($files);
It's time for another important part, printing the HTML output. This means, we need to read our array $files using another loop like while or for. There is another option, the foreach loop, which is ideal for iterating through an array.
foreach($files as $f){
//do something
}
This way we get our files one by one in the variable $f. All we have to do now is writing the necessary code to print the thumbnail and create a link on it to open the full image in the right frame.
?>
<a href="main.php?path=<?php echo $path; ?>&show=<?php echo $f; ?>"
target="main"><img src="<?php echo $path; ?>/thumbs/<?php echo $f; ?>"
alt="<?php echo $f; ?>"></a><br>
<?php
We still have our handle opened, let's close it.
closedir($handle);
We also may not forget to print a proper error message if the folder doesn't exist.
?>
Folder does not exist.
<?php
That's all necessary PHP code for the navigation frame. Here is a summary:
<?php
//path to the images folder
$path = $_GET["path"];
//check if folder exists
if(file_exists($path)){
//array to read files
$files = array();
//open folder
$handle = opendir($path);
//read all images
while($file = readdir($handle)){
if($file != "." && $file != ".." && $file != "thumbs"){
$files[] = $file;
}
}
//sort files
sort($files);
//print thumbnails
foreach($files as $f){
?>
<a href="main.php?path=<?php echo $path; ?>&show=<?php echo $f; ?>"
target="main"><img src="<?php echo $path; ?>/thumbs/<?php echo $f; ?>"
alt="<?php echo $f; ?>"></a><br>
<?php
}
//folder does not exist
}else{
?>
Folder does not exist.
<?php } ?>
main.php
Time for the last file and frame. We will start again with the HTML structure which is very similar to the navigation.php.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>An image gallery</title>
<style type="text/css">
<!--
div {
margin:2px;
text-align:center;
}
img {
margin:50px;
}
-->
</style>
</head>
<body>
<div>
<!-- HERE COMES THE PHP CODE -->
</div>
</body>
</html>
Next step: some brain activity. We need to determine which image shall be displayed. This is specified in the parameters "show" (the image name) and "path" (the folder containing the images). Initially, when the image gallery is opened, these two parameters are not available and no image should be displayed. So we assign the parameters to new variables and check if the parameter "show" is set using the function isset. In case the parameter is missing, we print a white space, otherwise we print the HTML code to display the image.
<?php
$show = $_GET["show"]; //image to be displayed
$path = $_GET["path"]; //path to the images folder
//if an image is given, display it
if(isset($show)){
?>
<img src="<?php echo $path; ?>/<?php echo $show; ?>" alt="<?php echo $show; ?>" />
<?php
//display nothing when no image has been passed
}else{
?>
<?php } ?>
Viewing your image gallery
Our image gallery is now ready for take-off. To view a gallery, you need to open the file index.php and pass the parameter "path" with the name of an existing folder containing images and according thumbnails, e.g. index.php?path=testgallery
You can try this script here: demos/An_image_gallery/index.php. Or download it here: An_image_gallery_1-0.zip
PHP, tutorial, image, gallery, pictures, photos, read
If you have a question or a problem and you're looking for a solution, please use the forum. Comments might not be answered.