Forum Moderators: coopster
I'm trying to make a photo gallery for my website and I would like to echo three images per row, I wrote the below code but it is not useful, it shows one per row.
HELP PLEASE..
<table align="center" border="0">
<?php
$td = 1;
if ($handle = opendir('gallery')) {
while (false !== ($file = readdir($handle)))
{
echo"<tr><td>";
if ($td <= 3)
{
echo "<img src='gallery/$file' border=0>";
echo "</td><td>";
$td++;
}
else
{
echo "</td></tr>";
$td = 1;
}
echo('</tr>');
}
}
closedir($handle);
?>
</table>
Problem is, each time through the loop at the beginning it will echo "<tr><td>" and at the end of each time through the loop '</tr>', so therefore you are only set up for one tr per loop. What you need is a double loop (also as a matter of html best practice, always place double quotes on html attributes values):
<?php
if ($handle = opendir('gallery')) {
$bool = true;
while ($bool) {
$td = 1;
echo '<tr>';
while ($td < 4) {
$file = readdir($handle);
echo '<td>';
if ($file) {
echo '<img src="gallery/'.$file.'" border="0">';
} else {
$bool = false;
}
echo '</td>';
$td++;
}
echo '</tr>';
}
}closedir($handle);
?>
But now the above works, kinda, but is still no good. If you view source, you may see it including files with names of only '.' or '..' -hidden system files. Should be checking for valid file, look in to glob() instead of readdir and opendir, or at least check the file extension. All the time I got right at the moment. Good luck!
But unfortunately, the images still shows only one image per row
Any way, thanks for your support..Regards
I didn't test this, but it should work or give you an idea of what you need to do.
<?php
$td = 1;
if ($handle = opendir('gallery')) {
while(false !== ($file = readdir($handle))) {
if($td===1) {
echo"<tr><td>";
}
if($td <= 2) {
echo "<img src='gallery/$file' border=0>";
echo "</td><td>";
$td++;
}
else {
echo "<img src='gallery/$file' border=0>";
echo "</td></tr>";
$td = 1;
}
}
}
closedir($handle);
?>
<?php
function display_table($data=array('No data available'), $cols="1", $class="class")
{
// add extra blank cells if needed
for($i=0;$i<(count($data)%$cols);$i++){
$data[] = ' ';
}
// split array into rows
$data_rows = array_chunk($data,$cols);
// start table output code
$display = "<table class=\"$class\">\r\n";
// output each row
foreach($data_rows as $tr){
$display .= "<tr>\r\n";
// output each cell within the row
foreach($tr as $td){
$display .= "<td>$td</td>\r\n";
}
// close row tag
$display .= "</tr>\r\n";
}
// close table tag
$display .= "</table>\r\n";
// return table
return $display;
}
// initialize images array
$images = array();
// put image files into array (haven't test this)
if ($handle = opendir('gallery')) {
while(false !== ($file = readdir($handle))) {
$images[] = "<img src='gallery/$file' border=0>";
}
}
closedir($handle);
// display table (array, columns, table class)
echo display_table($images, 3, "class");
?>
Do a preg on $file, or if it's not just images, an is_file() test.
while (false !== ($file = readdir($handle))) {
if (preg_match('/\.jpg¦\.gif¦\.png$/i',$file)) {
array_push($images,$file);
}
}
Be sure to use a real pipe character instead of these ¦ :-\
The problem with these, except for the last (at first glance, sorry if I missed it) is that it doesn't address what happens with the last row. The number of last row cells must equal the number of columns above it, otherwise you're in for some weird displays. If you don't care about valid html, no matter.
If you do, here's the solution. It doesn't have to be three columns, it can be any number of columns, note configuration. I just used numbers in my images array, note comments, alter as necessary . . . Note it also alternates row colors. :-) Tested.
<?php
// Sub for your images, change $images[$i] in loop to
// <img src="$images[$i]">... etc.
$images = Array ('1','2','3','4','5','6','7');
$cols = 3;
$colcount = 0;
$light = 'light-rows'; // corresponds to css class, white BG
$dark = 'dark-rows'; // correcponds to light gray background in CSS
$rowdata=NULL; // Good practice
for ($i=0;$i<count($images);$i++) {
if ($colcount==0) {
$rowdata .= '<tr>';
// Switch these if you want $dark first
$thisBG=($thisBG==$dark)?$light:$dark;
}
$rowdata .= "<td class=\"$thisBG\">" . $images[$i] . "</td>";
$colcount++;
if ($colcount >= $cols) {
$rowdata .= '</tr>';
$colcount=0;
}
}
// Is the last row filled?
if (($colcount > 0) and ($colcount < $cols)) {
for ($i=$colcount;$i<$cols;$i++) { $rowdata .= '<td> </td>'; }
$rowdata .= '</tr>';
}
if ($rowdata) { $out = '<table border="1">' . $rowdata . '</table>'; }
else { $out = '<p>No data to display.</p>'; } // Good error checking=good apps
header("content-type:text/html");
echo $out;
?>
Another solution is to add colspan="0" for all cells, as this will span whatever exists. It will render correctly, but is not valid html.
All the above are working perfectly
Please accept my appreciation
css
.container {width: 700px; margin: 0 auto; clear: both;}
.third { float: left; width: 30%; }
content
<?php
if ($handle = opendir('gallery')) {
echo '<div class="container">';
while (false !== ($file = readdir($handle)))
{
echo '<div class="third">';
echo "<img src='gallery/$file' border=0>";
echo '</div>';
}
echo '</div><br style="clear: both;" />'; // close container div
}
closedir($handle);
?>
