View gallery categories as a drop down menu instead of hard links

PHP
1

As I said in another post, I have built a php image gallery using a tutorial found here on sitepoint. The viewgallery.php displays the categories in hard link format accross the top of the page, but I would prefer to have them shown in a dropdown list instead if that’s possible, then maybe use the onSelect feature to load the new gallery?

here is the code:


<?php
	include("connect.php");

	// initialization
	$result_array = array();
	$counter = 0;

	$cid = (int)($_GET['cid']);
	$pid = (int)($_GET['pid']);

	// Category Listing

	if( empty($cid) && empty($pid) )
	{
		$number_of_categories_in_row = 4;

		$result = mysql_query( "SELECT c.category_id,c.category_name,COUNT(photo_id)
						FROM gallery_category as c
						LEFT JOIN gallery_photos as p ON p.photo_category = c.category_id
						GROUP BY c.category_id" );
		while( $row = mysql_fetch_array( $result ) )
		{
			$result_array[] = "<a href='viewgallery.php?cid=".$row[0]."'>".$row[1]."</a> "."(".$row[2].")";
		}
		mysql_free_result( $result );	

		$result_final = "<tr>\
";

		foreach($result_array as $category_link)
		{
			if($counter == $number_of_categories_in_row)
			{	
				$counter = 1;
				$result_final .= "\
</tr>\
<tr>\
";
			}
			else
			$counter++;

			$result_final .= "\	<td>".$category_link."</td>\
";
		}

		if($counter)
		{
			if($number_of_categories_in_row-$counter)
			$result_final .= "\	<td colspan='".($number_of_categories_in_row-$counter)."'>&nbsp;</td>\
";

			$result_final .= "</tr>";
		}
	}


	// Thumbnail Listing

	else if( $cid && empty( $pid ) )
	{
		$number_of_thumbs_in_row = 5;

		$result = mysql_query( "SELECT photo_id,photo_caption,photo_filename FROM gallery_photos WHERE photo_category='".addslashes($cid)."'" );
		$nr = mysql_num_rows( $result );

		if( empty( $nr ) )
		{
			$result_final = "\	<tr><td>No Category found</td></tr>\
";
		}
		else
		{
			while( $row = mysql_fetch_array( $result ) )
			{
				$result_array[] = "<a href='viewgallery.php?cid=$cid&pid=".$row[0]."'><img src='".$images_dir."/tb_".$row[2]."' border='0' alt='".$row[1]."' /></a>";
			}
			mysql_free_result( $result );	

			$result_final = "<tr>\
";
	
			foreach($result_array as $thumbnail_link)
			{
				if($counter == $number_of_thumbs_in_row)
				{	
					$counter = 1;
					$result_final .= "\
</tr>\
<tr>\
";
				}
				else
				$counter++;

				$result_final .= "\	<td>".$thumbnail_link."</td>\
";
			}
	
			if($counter)
			{
				if($number_of_photos_in_row-$counter)
			$result_final .= "\	<td colspan='".($number_of_photos_in_row-$counter)."'>&nbsp;</td>\
";

				$result_final .= "</tr>";
			}
		}
	}

	// Full Size View of Photo
	else if( $pid )
	{
		$result = mysql_query( "SELECT photo_caption,photo_filename FROM gallery_photos WHERE photo_id='".addslashes($pid)."'" );
		list($photo_caption, $photo_filename) = mysql_fetch_array( $result );
		$nr = mysql_num_rows( $result );
		mysql_free_result( $result );	

		if( empty( $nr ) )
		{
			$result_final = "\	<tr><td>No Photo found</td></tr>\
";
		}
		else
		{
			$result = mysql_query( "SELECT category_name FROM gallery_category WHERE category_id='".addslashes($cid)."'" );
			list($category_name) = mysql_fetch_array( $result );
			mysql_free_result( $result );	

			$result_final .= "<tr>\
\	<td>
						<a href='viewgallery.php'>Categories</a> > 
						<a href='viewgallery.php?cid=$cid'>$category_name</a></td>\
</tr>\
";

			$result_final .= "<tr>\
\	<td align='center'>
					<br />
					<img src='".$images_dir."/".$photo_filename."' border='0' alt='".$photo_caption."' />
					<br />
					$photo_caption
					</td>
					</tr>";
		}
	}

// Final Output
echo <<<__HTML_END

<html>
<head>
	<title>Gallery View</title>
</head>
<body>
<table width='100%' border='0' align='center' style='width: 100%;'>
$result_final		
</table>
</body>
</html>

__HTML_END;
?>
2

Well, lets see if you can do it yourself, shall we?

Based on what you see, which line(s) construct(s) the output for the category view?

3

This one

$result_array[] = "<a href='viewgallery.php?cid=".$row[0]."'>".$row[1]."</a> "."(".$row[2].")"; 
        }

This one


$result_final .= "<tr>\
\	<td> 
                        <a href='viewgallery.php'>Categories</a> >  
                        <a href='viewgallery.php?cid=$cid'>$category_name</a></td>\
</tr>\
";
4

and this one

echo <<<__HTML_END

<html>
<head>
	<title>Gallery View</title>
</head>
<body>
<table width='100%' border='0' align='center' style='width: 100%;'>
$result_final		
</table>
</body>
</html>

__HTML_END;
5

Mkay. So here’s my thoughts, and let’s see what you come up with;

  1. We’re not going to need any of the table tags, cause were not putting it in a table anymore.
  2. For that same reason, we don’t need any of the row-counting logic.
  3. What do we need to add around the query result to make it appear correctly? Select box items don’t need anchor tags…

Hint: do not touch code block 3; code blocks 1 and 2 will need work, as will the lines around them.

Hint 2: dont worry about the JavaScript yet - get the output you want first, then add the JavaScript.