AJAX Image Gallery - Make a Simple Image Gallery in PHP
This tutorial will show you how to make a fully automated image gallery using PHP and AJAX, it is designed so a user can view all of the images in the gallery without reloading the page. The script itself does not require much configuration to get running, although you will need the GD library enabled. Before we get started, first make a directory called "gallery" and dump the images you want to be in the gallery.
The first file will be called gallery.php
Code Breakdown:
include('functions.php'); - To simplyify this tutorial, I have separated most of the PHP into functions, which is going to be in a file called functions.php. (which we will go over later in this tutorial)
$path = 'gallery/'; - This is the only value you would need to change to get this script running. Although at the start of the tutorial I said to make a directory called "gallery" for the images, if you want a different directory to hold the images then change this value. (and make the directory for the new value)
if ($handle = opendir($path)) { - This will create a handle which we can use to access the directory holding the images.
while (false !== ($file = readdir($handle))) { - This will create a loop that will go through every file in the directory we have opened.
if ($file != "." && $file != "..") { - When reading the files in a directory it will also read '.' and '..', which we don't want so this will skip them.
$pics[] = $file; - The names of all the images will be fed into this array.
$total = count_total_images($pics); = This is a custom function (included from functions.php) which we will be going over later in this tutorial, but basically it just does what it says. It counts all of the images in the folder (excluding the thumbnails).
show_main($path, $pics, 581, 403); - This is another custom function which we will go over later on but the paramaters are (path to image directory, array of pictures, width, height). Basically it just finds the first non-thumbnail and displays it.
show_thumbnails($total, $path, $pics, 100, 75); - This is the last custom function we will be using (again we will go over it later on) but the paramaters are (total pictures in the directory, path to image directory, array of pictures, width of thumbnails, height of thumbnails).
Now onto the more complex part of the tutorial, the custom PHP functions we are using. Some of the function calls dealing with strings may be a bit confusing, but it is easier to understand if you look up these functions on PHP.net for more specific usage, the examples and the user comments are very helpful for learning about a specific function. Most of it is just handling images (e.g. creating thumbnails) or sorting out filenames. Save this as functions.php and make sure it is in the same directory as gallery.php.
The first file will be called gallery.php
<?php
include('functions.php');
// set the path to images, with a trailing slash
$path = 'gallery/';
// this script will only allow .jpg, .png or .gif
$pics = array();
// open directory
if ($handle = opendir($path)) {
// read directory
while (false !== ($file = readdir($handle))) {
// omit . and ..
if ($file != "." && $file != "..") {
// read files into an array
$pics[] = $file;
}
}
$total = count_total_images($pics);
}else{
die('Failed to open directory, check if it exists');
}
// close directory
closedir($handle);
?>
<script src="javascript.js" language="javascript" type="text/javascript"></script>
<center>
<h1>Image Gallery</h1>
<div style="width:600px;border: 1px solid;padding: 50px;">
<?php
show_main($path, $pics, 581, 403);
echo '<div style="white-space:nowrap;">';
show_thumbnails($total, $path, $pics, 100, 75);
echo '</div>';
?>
</div>
</center>
Code Breakdown:
include('functions.php'); - To simplyify this tutorial, I have separated most of the PHP into functions, which is going to be in a file called functions.php. (which we will go over later in this tutorial)
$path = 'gallery/'; - This is the only value you would need to change to get this script running. Although at the start of the tutorial I said to make a directory called "gallery" for the images, if you want a different directory to hold the images then change this value. (and make the directory for the new value)
if ($handle = opendir($path)) { - This will create a handle which we can use to access the directory holding the images.
while (false !== ($file = readdir($handle))) { - This will create a loop that will go through every file in the directory we have opened.
if ($file != "." && $file != "..") { - When reading the files in a directory it will also read '.' and '..', which we don't want so this will skip them.
$pics[] = $file; - The names of all the images will be fed into this array.
$total = count_total_images($pics); = This is a custom function (included from functions.php) which we will be going over later in this tutorial, but basically it just does what it says. It counts all of the images in the folder (excluding the thumbnails).
show_main($path, $pics, 581, 403); - This is another custom function which we will go over later on but the paramaters are (path to image directory, array of pictures, width, height). Basically it just finds the first non-thumbnail and displays it.
show_thumbnails($total, $path, $pics, 100, 75); - This is the last custom function we will be using (again we will go over it later on) but the paramaters are (total pictures in the directory, path to image directory, array of pictures, width of thumbnails, height of thumbnails).
Now onto the more complex part of the tutorial, the custom PHP functions we are using. Some of the function calls dealing with strings may be a bit confusing, but it is easier to understand if you look up these functions on PHP.net for more specific usage, the examples and the user comments are very helpful for learning about a specific function. Most of it is just handling images (e.g. creating thumbnails) or sorting out filenames. Save this as functions.php and make sure it is in the same directory as gallery.php.
Tutorial Statistics
Date Added: 16-07-2008
Votes: 16
Rating: 8.3
Views: 29760
Author: scott
Main Category:
PHP
Sub-Category:
General Development
Rate:
Votes: 16
Rating: 8.3
Views: 29760
Author: scott
Main Category:
PHP
Sub-Category:
General Development
Rate:
