AJAX Image Gallery - Make a Simple Image Gallery in PHP


<?php

function count_total_images($pics) {
    
$count 0;
    foreach(
$pics as $file) {
        
$type strtolower(strrchr($file'.'));
        
$name substr($file0, -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($value0, -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($value0, -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$image0000$twidth$theight$width$height);
                    
imagegif($image_p$path.$name.'_thumb'.$type);                
                }elseif(
$type == '.jpg') {
                    
$image imagecreatefromjpeg($fullpath);
                    
imagecopyresampled($image_p$image0000$twidth$theight$width$height);
                    
imagejpeg($image_p$path.$name.'_thumb'.$type);
                }else{
                    
$image imagecreatefrompng($fullpath);
                    
imagecopyresampled($image_p$image0000$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)

Now on to the last page to finish up...




Pages (3) << [ First ] 1 2 3 [ Last ] >>
Tutorial Statistics
Date Added: 16-07-2008
Votes: 16
Rating: 8.3
Views: 29761

Author: scott

Main Category:
PHP
Sub-Category:
General Development


Rate:
1 2 3 4 5