Question

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

Was it helpful?

Solution 2

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.

OTHER TIPS

I use something along this to generate tables in a loop (here a test for) with a specific row count:

<?php
$table_rows=5;

$table = "<table border=1><tbody>";
$i = 1;

for ($j = 0; $j < 13; $j++){

    if($i == 1) {
        $table .= "<tr>";
    }

    $table .= "<td>".$j." ".$i."</td>";

    $i = (($i+1)%$table_rows);

    if($i == 1) {
        $table .= "</tr>";
    }
}

if($i != 1){
    $table .= "</tr>";
}

$table .= "</tbody></table>";

echo $table;
?>

I am sure that this isn't the easiest method and the code looks horrible, but it usually worked for me.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top