Can someone please help me debug my image gallery script

votresivain

Hey everybody.

I have taken the Hoverbox Gallery, added Lightbox v2 as well as the PHP script from Slim to make the gallery dynamic. All of that went fine.

The problem is, I only want to display 15 images at a time per page from what the PHP script gets from the directory. In some directories, I have 200-300 pages so I want to add dynamic pagination to the script as well so that the script will count how many images are in the folder, determine how many images I want to display per page and split them up accordingly also creating navigation links. Using examples from other scripts I found online as well as my very basic and primitive knowledge of PHP, the script below is the final product.

The page is rendering without any errors, the dynamic navigation links are coming up accurately and functionally. The header, the dynamic page title, the CSS and Javascript links are all coming in fine, the only thing that is not working is the images. No errors are rendered, that section of PHP just seems to spit out no HTML results. I have tried endlessly to debug this and try new things, remove parts, add parts, etc. This project has consumed my time for the past week and now I want to give it to you guys. What's going wrong and how do I fix it?

<?php

$display = 15;

if (isset($_GET['type'])) {

if (($_GET['type']) == 'polaroids') {
$filmtype = 'Polaroids';
$imgdir = "polaroids/fullsize";
$thumbdir = "polaroids/thumbs";
$urltype = 'polaroids';

} elseif (($_GET['type']) == '35mm') {
$filmtype = '35mm';
$imgdir = "35mm/fullsize";
$thumbdir = "35mm/thumbs";
$urltype = '35mm';

} elseif (($_GET['type']) == 'digital') {
$filmtype = 'Digital';
$imgdir = "digital/fullsize";
$thumbdir = "digital/thumbs";
$urltype = 'digital';

} elseif (($_GET['type']) == 'portraits') {
$filmtype = 'Self-Portraits';
$imgdir = "portraits/fullsize";
$thumbdir = "portraits/thumbs";
$urltype = 'portraits';

} else {
die ("No film type was selected. Please go back to the photos page and choose a film type.");
}
} else {
    die ("No film type was selected. Please go back to the photos page and choose a film type.");
}

if (isset($_GET['np'])) {

$totalPages = $_GET['np'];

} else { 

$handle = opendir($imgdir);
while (false !== ($file = readdir($handle))) {
   $files[] = $file;
}

            $totalPix = count($files); // Get number of files in directory.


closedir($handle);// Close the directory.


// Calculate the number of pages.
    if ($totalPix > $display) { // More than 1 page.
        $totalPages = ceil ($totalPix/$display);
    } else {
        $totalPages = 1;
    }

}

if (isset($_GET['s'])) {
    $start = $_GET['s'];

} else {
    $start = 0;
}

$x=$start;
$current_page = ($start/$display) + 1;

function createGallery($path, $thumbpath){
	if (($dir = opendir($path))){
		// loops through while the readdir function returns true.
		while ((false !== ($file = readdir($dir))) && ($x <= ($start+$display))) {
			// picks only valid filenames
			if ($file != "." && $file != ".." && file !=!is_dir($file)) {
                        $imgtitlea = substr($file, 0, strrpos($file, '.'));
			$imgtitle = str_replace("_"," ",$imgtitlea);
			// echos to the client a nice unordered list of images
			echo
			"<li>".
			"<a href=\"".$path."/".$file."\" rel=\"lightbox[page]\" title=\"".$imgtitle."\">
			<img src=\"".$thumbpath."/".$file."\" alt=\"".$imgtitle."\" width=\"40\" border=\"0\" />
			<img src=\"".$thumbpath."/".$file."\" alt=\"".$imgtitle."\" class=\"preview\" />
			</a>".
			"</li>";
			$x++;
			}
		}
	}
	echo "</ul>";
}

print('<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">'."\r\n");
print('<html>'."\r\n".'<head>'."\r\n");
print('<title>'.$filmtype.': Page '.$current_page.'</title>'."\r\n");
print('<link href="styles.css" rel="stylesheet" type="text/css" />'."\r\n");
print('<!--[if IE]>'."\r\n");
print('<link rel="stylesheet" href="css/ie_fixes.css" type="text/css" media="screen, projection" />'."\r\n");
print('<![endif]-->'."\r\n");
print('<link href="css/hoverbox.css" rel="stylesheet" type="text/css" />'."\r\n");
print('<link href="css/lightbox.css" rel="stylesheet" type="text/css" />'."\r\n");
print('<script type="text/javascript" src="js/prototype.js"></script>'."\r\n");
print('<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>'."\r\n");
print('<script type="text/javascript" src="js/lightbox.js"></script>'."\r\n");
print('<link href="../../experime.css" rel="stylesheet" type="text/css" />'."\r\n");
print('</head>'."\r\n".'<body>'."\r\n");


echo "<h1>".$filmtype.": page ".$current_page."</h1>";
echo "<ul class=\"hoverbox\">";

createGallery($imgdir, $thumbdir);
$end = $x;

if ($totalPages > 1) {

echo '<br /><p>';
// Determine what page the script is on.    
$current_page = ($start/$display) + 1;

// If it's not the first page, make a Previous button.
if ($current_page != 1) {
    echo '<a href="index.php?type=' . $urltype. '&s=' . ($end - $display) . '&np=' . $totalPages . '">Previous</a> ';
}

// Make all the numbered pages.
for ($i = 1; $i <= $totalPages; $i++) {
    if ($i != $current_page) {
        echo '<a href="index.php?type=' . $urltype. '&s=' . (($display * ($i - 1))) . '&np=' . $totalPages . '">' . $i . '</a> ';
    } else {
        echo $i . ' ';
    }
}

// If it's not the last page, make a Next button.
if ($current_page != $totalPages) {
    echo '<a href="index.php?type=' . $urltype. '&s=' . ($end + $display) . '&np=' . $totalPages . '">Next</a>';
}

echo '</p>';

}

?>

matto

try the following simple debugging method.
this part should create output but it doesn't, right?

function createGallery($path, $thumbpath){
	if (($dir = opendir($path))){
		// loops through while the readdir function returns true.
		while ((false !== ($file = readdir($dir))) && ($x <= ($start+$display))) {
			// picks only valid filenames
			if ($file != "." && $file != ".." && file !=!is_dir($file)) {
                        $imgtitlea = substr($file, 0, strrpos($file, '.'));
			$imgtitle = str_replace("_"," ",$imgtitlea);
			// echos to the client a nice unordered list of images
			echo
			"<li>".
			"<a href=\"".$path."/".$file."\" rel=\"lightbox[page]\" title=\"".$imgtitle."\">
			<img src=\"".$thumbpath."/".$file."\" alt=\"".$imgtitle."\" width=\"40\" border=\"0\" />
			<img src=\"".$thumbpath."/".$file."\" alt=\"".$imgtitle."\" class=\"preview\" />
			</a>".
			"</li>";
			$x++;
			}
		}
	}
	echo "</ul>";
}

as the first entry in the function, insert a line:
echo "CALL to createGallery, parameters $path, $thumbpath<br />";

in the if construct, insert
echo "IF okay<br />";
(second if loop -> place similar output, e.g. "inner IF okay")

in the while, insert
echo "+";

then give it a test run in the browser.
if there are no "+" this means you never enter the while loop.
if there is no "IF okay" -> you don't pass the if condition. etc.

in order to inspect why this could happen, you could print_r($something) or var_dump($something) variable contents.

Proceeding like that you should see where the error occurs and you should be able to track it down.

Hope this helps!

votresivain

First of all let me say that I did find an error in my own script:

if ($file != "." && $file != ".." && file !=!is_dir($file)) {

You'll notice right before the !is_dir call, that I accidentally inserted a != so I got rid of that which also changed the results a bit.

Now instead of no pictures showing up. I get one picture. And I believe the readdir function should bring the results in alphabetical order as that's how they are held in the filesystem but the one image that gets returned is "end.jpg" which should come after all the numeric photos as well as the A's, B's, C's, and D's. So why is that happening?

Okay so the debug script I produced is:

if (isset($_GET['s'])) {
    $start = $_GET['s'];

} else {
    $start = 0;
}

$x = $start;
$current_page = ($start/$display) + 1;
$currmaxdisplay = ($start+$display);

function createGallery($path, $thumbpath){
	echo "CALL to createGallery, parameters $path, $thumbpath<br />";
	echo "Start Variable is: $start<br />";
	echo "Current maximum display is: $currmaxdisplay.<br />";
	if (($dir = opendir($path))){
		echo "1st IF statement is okay.<br />";
		// loops through while the readdir function returns true.
		while ((false !== ($file = readdir($dir))) && ($x <= $currmaxdisplay)) {
			// picks only valid filenames
			if ($file != "." && $file != ".." && !is_dir($file)) {
			echo "Inner IF statement is okay as well.<br />";
			echo "X Variable #1 = $x<br />";
                        $imgtitlea = substr($file, 0, strrpos($file, '.'));
			$imgtitle = str_replace("_"," ",$imgtitlea);
			// echos to the client a nice unordered list of images
			echo
			"<li>".
			"<a href=\"".$path."/".$file."\" rel=\"lightbox[page]\" title=\"".$imgtitle."\">
			<img src=\"".$thumbpath."/".$file."\" alt=\"".$imgtitle."\" width=\"40\" border=\"0\" />
			<img src=\"".$thumbpath."/".$file."\" alt=\"".$imgtitle."\" class=\"preview\" />
			</a>".
			"</li>";
			$x++;
			echo "X Variable #2 = $x<br />";
			echo "+";
			}
		}
	}
	echo "</ul>";
}

The results of the debug can be found at http://www.experimentalillness.com/photos/experiment/index.php?type=polaroids. Now the things that are catching my eye is that the $start variable is being echoed as empty. When as you can see, I have it being set to 0 if the URL does not contain its value. Why in the world is it being left empty. And why is only one image being returned now?! And as you can see, because $start is being left empty, $currmaxdisplay is being returned empty as well. That must be what is throwing my function off but why is it happening, is anything glaringly obvious to anyone else?

Any help is appreciated and matto I appreciate your reply, I usually get no answers when I look to forums so I appreciate your effort to help me.

EDIT: For those who don't want to go to an external link to see the debug results, I thought I'd include them:

CALL to createGallery, parameters polaroids/fullsize, polaroids/thumbs
Start Variable is:
Current maximum display is:
1st IF statement is okay.
Inner IF statement is okay as well.
X Variable #1 =
X Variable #2 = 1
+