The first file will be called gallery.php
 |
<?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.
<?php
function count_total_images($pics) {
$count = 0;
foreach($pics as $file) {
$type = strtolower(strrchr($file, '.'));
$name = substr($file, 0, -4);
$ending = substr($name, -6);
if(($type == '.jpg' || $type == '.gif' || $type == '.png') && $ending != '_thumb') {
$count++;
}
}
return $count;
}
function show_main($path, $pics, $width, $height) {
foreach($pics as $value) {
$name = substr($value, 0, -4);
$ending = substr($name, -6);
if($ending !== '_thumb') {
echo '<a id="fulllink" target="_blank" href="'.$path.$value.'"><img id="full" src="'.$path.$value.'" width="'.$width.'" height="'.$height.'" /></a><br />';
break;
}
}
}
function show_thumbnails($total, $path, $pics, $twidth, $theight) {
echo '<a href="javascript:prev('.$total.')" style="font-size: 30px;"><</a>';
foreach($pics as $value) {
$fullpath = $path.$value;
$type = strtolower(strrchr($fullpath, '.'));
list($width, $height) = getimagesize($fullpath);
$image_p = imagecreatetruecolor($twidth, $theight);
$name = substr($value, 0, -4);
$ending = substr($name, -6);
// skip the thumbnails
if($ending !== '_thumb') {
$i++;
// create a thumbnail if we need to
if(!file_exists($path.$name.'_thumb'.$type)) {
if($type == '.gif') {
$image = imagecreatefromgif($fullpath);
imagecopyresampled($image_p, $image, 0, 0, 0, 0, $twidth, $theight, $width, $height);
imagegif($image_p, $path.$name.'_thumb'.$type);
}elseif($type == '.jpg') {
$image = imagecreatefromjpeg($fullpath);
imagecopyresampled($image_p, $image, 0, 0, 0, 0, $twidth, $theight, $width, $height);
imagejpeg($image_p, $path.$name.'_thumb'.$type);
}else{
$image = imagecreatefrompng($fullpath);
imagecopyresampled($image_p, $image, 0, 0, 0, 0, $twidth, $theight, $width, $height);
imagepng($image_p, $path.$name.'_thumb'.$type);
}
}
if($i > 5) {
echo '<a href="javascript:show_full(''.$path.$name.$type.'')"><img width="'.$twidth.'" height="'.$theight.'" id="thumb_'.$i.'" style="display:none;margin: 10px 2px 0px 2px;border:0px;" src="'.$path.$name.'_thumb'.$type.'" alt="" /></a>';
}else{
echo '<a href="javascript:show_full(''.$path.$name.$type.'')"><img width="'.$twidth.'" height="'.$theight.'" id="thumb_'.$i.'" style="margin: 10px 2px 0px 2px;border:0px;" src="'.$path.$name.'_thumb'.$type.'" alt="" /></a>';
}
}
}
echo '<a href="javascript:next('.$total.')" style="font-size: 30px;">></a>';
}
?>
Code Breakdown:
function count_total_images($pics) { - This is how you declare a custom function in PHP.
foreach($pics as $file) { - This is a type of loop used to go through each value of an array.
$type = strtolower(strrchr($file, '.')); - This will find the last occurence of a "." in the filename, which means it will take the extension of the file, so if $file was 'mypicture.jpg', then $type will become '.jpg'. (strtolower just makes all the letters lowercase)
$name = substr($file, 0, -4); - This will just remove the last 4 characters of the filename, so 'mypicture.jpg' becomes 'mypicture'. It takes off 4 characters because in this case it is only possible for the extension to be 4 characters, since it can only be .jpg, .png, or .gif.
$ending = substr($name, -6); - This is used to establish if the file we have right now is a thumbnail or not. Thumbnails made by this script will have a '_thumb' ending. So if we have mypicture_thumb then this will take off the last 6 characters and $ending becomes '_thumb'.
if(($type == '.jpg' || $type == '.gif' || $type == '.png') && $ending != '_thumb') { - This will only return true if the image is either a .jpg, .gif, or .png and the image is not a thumbnail.
function show_main($path, $pics, $width, $height) { - This custom function simply just displays the original large image above the thumbnails. I am not going to go over what is in it because it is basically most of it is the same thing as the previous function, except this outputs the HTML for the image.
echo '<a href="javascript:prev('.$total.')" style="font-size: 30px;"><</a>'; - To browse through the thumbnails we are going to use this custom javascript function, which we will see later on in the last (javascript) file.
list($width, $height) = getimagesize($fullpath); - getimagesize() returns an array of information about the image and the function list() allows us to assign an array to the variables we supply, in this case, the width and height.
$image_p = imagecreatetruecolor($twidth, $theight); - If we are creating a thumbnail we need to create a handle/pointer to an image to work with.
if($ending !== '_thumb') { - We want to skip the images that are thumbnails in our folder, otherwise we would end up creating thumbnails of thumbnails every time we viewed the page.
if(!file_exists($path.$name.'_thumb'.$type)) { - As the name implies this returns true if the file does exist, so in this case it will only execute the code between the braces if the thumbnail does not already exist.
if($type == '.gif') { - We need to check the image type so we can use the specific functions required for that image type.
$image = imagecreatefromgif($fullpath); - This will get the image we want to make into a thumbnail and assign it to $image.
imagecopyresampled($image_p, $image, 0, 0, 0, 0, $twidth, $theight, $width, $height); - This will scale down the entire image (from $image) and set it to the thumbnail width and height passed to our custom function and assign that scaled image to our image handle/pointer, $image_p.
imagejpeg($image_p, $path.$name.'_thumb'.$type); - We are done creating our thumbnail, so now this will save it into our directory with the same name as the original image, just with '_thumb' added on.
if($i > 5) { - We are only going to display 5 thumbnails at once, so with this, all thumbnails after 5 will be invisible. Although the javascript which we will go over next can toggle that. (Note: if you want to show more than 5 you will have to change this 5 and a value in the javascript file which I will explain next)
The last file will just hold some simple javascript functions to allow us to browse the gallery or view images without reloading the page. Save this last file as javascript.js
|
var show = 5; |
Code Breakdown:
var show = 5; - This is the number of thumbnails that being shown at once. (so if you change the 5 in the previous script, then change this as well)
var current = 1; - This variable is just for reference, it is the thumbnail that it will start on. (in this case the first one)
function next(total) { - This is how you define a custom function in Javascript, just like PHP.
if(current + show - 1 < total) { - This will check if the image going to be shown is less than total number of images. In other words, it will prevent us from browsing more thumbnails, when there really isn't.
change(total); - This function will be used to actually change the thumbnails visibility.
function prev(total) { - This is the same thing as the next() function we made but this is for going back, instead of forward. The only difference is this will check if the script can go backwards (e.g. there are images to show).
for(i=1;i<total+1;i++) { - This will loop through every thumbnail.
document.getElementById('thumb_' + i).style.display = "none"; - This will hide every thumbnail.
if(i >= current && i < current + show) { - While looping through every thumbnail after we have hidden them all, this will calculate which ones should be showing.
document.getElementById('thumb_' + i).style.display = "inline"; - For the images that should be showing, it makes them visible.
function show_full(source) { - This custom function will display the large image when the user clicks on the thumbnail.
document.getElementById('full').src = source; - This changes the 'src' of the image, which makes it load and display the new one.
document.getElementById('fulllink').href = source; - This changes the link, making it go to the new image so the user can view the highest resolution available.
Now upload all of those files (gallery.php, functions.php and javascript.js) in the same directory and then create the image directory in that directory, if you haven't already (it should be 'gallery') by default. Put some images in the directory and open gallery.php which should display the thumbnails of all those images.
Note: It isn't beautiful but I did not want to make this more confusing by adding some CSS or some additional files. Also it will be easier to integrate and customize with this being so simple.
Here is my result:
discuss this topic to forum
