Properly echoing gallery result

Dynamic TR and TD

[henry0]

In the spirit of light application (Only three scripts)
I made a dynamic gal where a member may decide up to the pre-defined max how many upload fields he/she requires
Then id does the usual such as thumb gallery and full size img
Actually when done I will post it
In the meanwhile I need some help in order to “Have all my ducks in row!”

I can not set the gallery displaying the thumbs by rows of 3
For example in my test I have 6 uploaded images and the result is

Img img empty-space
Img img img
Img empty-space empty-space

So the six pics are there but not organized as supposed by rows of three
if it was 7 pics then it should be 2 rows of 3 plus 1 row: img empty-space empty-space
Here is what I have:

while( $row = mysql_fetch_array( $result ) )
{
$result_array[] = "<a href='all_gal/$main_gal/".$row['img_filename']." '><img src='".$img_gal."/tb_".$row['img_filename']."'
border='0' alt='".$row['img_caption']."' /></a>";
}
mysql_free_result( $result );

$thumb_per_row =3;

$show = "<tr>\n";

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

$show .= "\t<td align='center'>".$thumbnail_link."</td>\n";
}

if($counter)
{
if($thumb_per_row-$counter)
$show .= "\t<td align='center' colspan='".($thumb_per_row-$counter)."'>&nbsp;</td>\n";

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

[omoutop]

too complex for my tastes

i usually go the css way in these matters

<style type="text/css">
#gallery { border: solid 0px #115; margin: 1em; padding: 0.5em; }
#gallery ul { display: block; margin: 0px; padding: 0px;}
#gallery li { display: block; list-style: none; float: left; margin: 0.25em; padding: 0px; border: solid 1px #111155; background: #ffffff; }
#gallery li p { text-align: center; margin: 0px; padding: 0.5em;}
#gallery hr { clear: both; visibility: hidden; margin: 0px; padding: 0px; height: 1px; }
</style>

and for the showing images:

<div id="gallery">
<ul>
// loop to showimages
<li>show image</li>
</ul>
<hr>
</div>

put this into a table with specific width. If for example your thumbs are 150px width, put the above in a table 500px width and you are set.

i think its easier this way

[henry0]

Thanks, I am not much of a css coder
and I do not see how this could work in defining only rows of three pics and sending the odd number (not divided by three) to the next row.
the above script I agree is complex but it could be very precise
I rather stick with it
it kind of making sense in my mind :)

[henry0]

OK I made it!
I wanted to go all the way through to figure it out
and make it working without shifting to another delivery means :) Mostly I had a $counter wrongly initiated.
As is it is cross browser IE FF Safari

while( $row = mysql_fetch_array( $result ) )
{
$result_array[] = "<a href='all_gal/$main_gal/".$row['img_filename']." '><img src='".$img_gal."/tb_".$row['img_filename']."'
border='0' alt='".$row['img_caption']."' /></a>";
}
mysql_free_result( $result );

$thumb_per_row =3;

$show = "<tr>\n";

$counter = 0;
foreach($result_array as $thumbnail_link)
{
if($counter == $thumb_per_row)
{
$counter=1;
$show .= "\n</tr>\n<tr>\n";
}
else
$counter++;

$show .= "<td align='center'>".$thumbnail_link."</td>\n";
}

if($counter)
{
if($thumb_per_row-$counter)
$show .= "<td align='center' colspan='".($thumb_per_row-$counter)."'>&nbsp;</td>\n";

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

When I will be totally done with that segment I will post it well documented.