This script looks through a directory, identifies all gif, jpg, jpeg, and png files, and displays them in a body section. The directory has images, an then a copy of each image with "_t" added to the end. The "_t" images displayed are the links to full-size images, which display in a lightbox. It's a thumbnail system, essentially.
Below the image is the filename with directory/extension removed, stored as $filename.
It is an adaptation from a display script for Lightbox2, written as a hack to display the contents with automatically-generated thumbnails. My question is about formatting the echo thumbnails in PHP.
Here is the code I have so far:
<?php
function lightbox_display($dir_to_search, $rel){
$image_dir = $dir_to_search;
$dir_to_search = scandir($dir_to_search);
$image_exts = array('gif', 'jpg', 'jpeg', 'png');
$excluded_filename = '_t';
foreach ($dir_to_search as $image_file){
$dot = strrpos($image_file, '.');
$filename = substr($image_file, 0, $dot);
$filetype = substr($image_file, $dot+1);
$thumbnail_file = strrpos($filename, $excluded_filename);
if ((!$thumbnail_file) and array_search($filetype, $image_exts) !== false){
echo "<table border=1><td><a href='".$image_dir.$image_file."' title='$filename' rel='".$rel."' data-lightbox=".$filename.">
<img src='".$image_dir.$filename."_t.".$filetype."' alt='".$filename."' width='100' height='80' title=''/ ><br>
$filename</td>
</a>
" ."\n ";
}
}
}
?>
The end portion just before < /a> is where I'm pulling in the filename as the "caption" below each thumbnail. However, that script causes a straight-down column of the images (and filename just below each individually) to be created, as it does those line-breaks per image.
What I want to do is have the table cells (or divs, etc) appear next to eachother such as:
[ ][ ][ ][ ][ ][ ]
..and then start a new row at 5 thumbnails across.
How can I format things within the echo that during the foreach, it results in 5 images being echoed per row across, with the $filename displayed under each image, and then starts a new line below it?
Edit: Code originally from http://www.fatbellyman.com/webstuff/lightbox_gallery/index.php
Here's what I did to achieve this:
<?php
function lightbox_display($dir_to_search, $rel){
$image_dir = $dir_to_search;
$dir_to_search = scandir($dir_to_search);
$image_exts = array('gif', 'jpg', 'jpeg', 'png');
$excluded_filename = '_t';
$piccounter = 0; /* this is how we monitor the length of the rows */
foreach ($dir_to_search as $image_file){
$dot = strrpos($image_file, '.');
$filename = substr($image_file, 0, $dot);
$filetype = substr($image_file, $dot+1);
$thumbnail_file = strrpos($filename, $excluded_filename);
if ((!$thumbnail_file) and array_search($filetype, $image_exts) !== false){
/*Variable $piccounter is the number of thumbnails across in the page per row*/
if ($piccounter >= 6){ echo "<tr />"; $piccounter=0; } /*Every 6, drop in a </tr> and reset the variable for the new row */
echo "<td><a href='".$image_dir.$image_file."' title='$filename' rel='".$rel."' data-lightbox=".$filename.">
<img src='".$image_dir.$filename."_t.".$filetype."' alt='".$filename."' width='100' height='80' title=''/ ><br>
$filename<br/>
</a></td>"; /*$filename is both the image name AND the caption in expanded lightbox*/
$piccounter++; /*After each image, add 1 to the $piccount counter to keep track of the length of the rows*/
}
}
}
?>
Variable $piccounter was created to keep track of how many thumbnails had been printed. When it hits 6 (or whatever number) it inserts a table row. Otherwise the foreach process creates TD's.
On the page itself I add the table open/close around this script call.