Problem with photo gallery PHP Code

Associate
Joined
21 Jun 2011
Posts
16
I am having problems displaying the photo's in the gallery 4 across as it currently only displays 1 and then starts a new line. Below is the code

<?php
$page = $_SERVER['PHP_SELF'];

//settings
$column = 5;

//directories
$base = "data";
$thumbs = "thumbs";

//get album
$get_album = $_GET['album'];

if(!$get_album)
{
echo "<b>Select an Album</b><p />";
$handle = opendir($base);
while (($file = readdir($handle))!==FALSE)
{
if (is_dir($base."/".$file) && $file != "." && $file != ".." && $file != $thumbs)
{
echo "<a href='$page?album=$file'>$file</a><br />";
}
}
closedir($handle);
}
else
{
if (!is_dir($base."/".$get_album) || strstr($get_album,".")!=NULL || strstr($get_album,"/")!=NULL ||strstr($get_album,"\\")!=NULL)
{
echo "Album doesn't exist.";
}
else
{
$x = 0;
echo "<b>$get_album</b><p />";
$handle = opendir($base."/".$get_album);
while (($file = readdir($handle)) !==FALSE)
{
if ($file != "." && $file !="..")
{
echo "<table style='display:inline; width='720px';><tr><td> <a href='$base/$get_album/$file' rel='lightbox'><img src='$base/$thumbs/$file' height='100' width='100'></td></tr></table>";
$x++;

if ($x==$column)
{
echo "<br />";
$x = 0;
}
}
}
closedir($handle);

echo "<p /><a href='$page'>Back to Albums</a>";
}
}

?>

I have been looking at it for a while now and cannot seem to see where i am going wrong. Any help would be much appreciated :)
Cheers
Ryan
 
Tables are block elements, so its always starting on a new line.

Take the images out of the table and float them or put them in cells and then make a new row when x == column.
 
From what I can read of the code, you're putting each thumbnail in it's own table. This is what's causing your issue. Tables are block level elements, so without putting any styling on them, there can only be one of them rendered at the same level.

To fix this, firstly replace the table with a single Div. Then put a class on this with float: right assigned. Something like:
Code:
**PHP** 
echo "<div class='thumbnail'><a href='$base/$get_album/$file' rel='lightbox'><img src='$base/$thumbs/$file' height='100' width='100'></div>";

**CSS**
.thumbnail {
    float: left;
    display: block;
    margin-right: 10px;
}
 
Back
Top Bottom