PHP Directory Listing

[zigvt]

Hey guys I have found this peice of code and messed around with it. I got it to work with Thickbox and I would like to know how to seperate my images aka files to every 4th column. Heres the code I found and tweaked. The images would look great if it was every 4th column they break. Also where would I place he echo command if I want it to display information about that image. Heres the code...

<? 

/** 
* Change the path to your folder. 
* 
* This must be the full path from the root of your 
* web space. If you're not sure what it is, ask your host. 
* 
* Name this file index.php and place in the directory. 
*/ 

    // Define the full path to your folder from root 
    $path = "images/default/"; 

    // Open the folder 
    $dir_handle = @opendir($path) or die("Unable to open $path"); 

    // Loop through the files 
    while ($file = readdir($dir_handle)) { 

    if($file == "." || $file == ".." || $file == "default.php" ) 

        continue; 
        echo "<a href=\"images/default/$file\" class=\"thickbox\"><img src=\"images/default/$file\" height=\"150\" width=\"150\" border=\"0\"></a>"; 

    } 

    // Close 
    closedir($dir_handle); 

?>  

[Fadion]

There would be 2 methods to break the output into 4 columns.

 

The first, but not the good one:

<?php
$counter = 1;
while ($file = readdir($dir_handle) {
     if ($counter % 4 == 0) {
          echo '<br />';
     }
     if ($file != '.' or $file != '..' or $file != 'default.php') {
          echo "<a href=\"images/default/$file\" class=\"thickbox\"><img src=\"images/default/$file\" height=\"150\" width=\"150\" border=\"0\"></a>"; 
     }
     $counter++;
}
?>

 

Basically it will break the line every 4 images, but there is no way you can control how it looks, how far they're from each other, etc. That brings us method 2.

 

The second method and recommended one can be achieved just by using CSS. You need to wrap your images in a div, float them and set the width to 1/4 of your container.

 

The PHP code could look like this (I omitted part of it):

<?php
echo '<div id="container">';
while ($file = readdir($dir_handle) {
     if ($file != '.' or $file != '..' or $file != 'default.php') {
          echo '<div class="image">';
          echo "<a href=\"images/default/$file\" class=\"thickbox\"><img src=\"images/default/$file\" height=\"150\" width=\"150\" border=\"0\"></a>";
          echo '</div>';
     }
}
echo '</div>';

?>

 

While the CSS code could look like this:

#container { width:800px; overflow:hidden; }
div.image { width:190px; margin:0 10px 10px 0; /* top right bottom left */ float:left; }

 

The width of the container should be your page's width or can be omitted if there is any higher container with a specified width, which will be inherited. While the images div have a width of 190px that means: 800px (container) / 4 columns = 200px - 10px right margin = 190px. Inside that div you can add any other information you want and use once again CSS to style it.

 

Don't know your level on CSS, but this is pretty basic stuff. Hope you get it.

[zigvt]

Thank you for the help much apriciated.

[zigvt]

Ok I did this and it works but I see some X NO Image images lol. Any reason why this is?

<? 

/** 
* Change the path to your folder. 
* 
* This must be the full path from the root of your 
* web space. If you're not sure what it is, ask your host. 
* 
* Name this file index.php and place in the directory. 
*/ 

    // Define the full path to your folder from root 
    $path = "images/default/"; 

    // Open the folder 
    $dir_handle = @opendir($path) or die("Unable to open $path"); 

    // Loop through the files 
$counter = 1;
    while ($file = readdir($dir_handle)) {  

if ($counter % 5 == 0) {          
echo '<br />';
}     
if ($file != '.' or $file != '..' or $file != 'default.php') 
{           
	echo "<a href=\"images/default/$file\" class=\"thickbox\"><img src=\"images/default/$file\" height=\"150\" width=\"150\" border=\"0\"></a>";      
}     
$counter++;
}

    // Close 
    closedir($dir_handle); 

?>  

[zigvt]

Bump, Some how I need to exclude the no image rule not sure how and what code that is and also where to place it. So in example the column shows 4 but theres only 2 images in that folder. I need to make it show it only shows the images and not the No Image box.

[zigvt]

Bump still need help on hiding the images.

[zigvt]

Bump

[Fadion]

3 bumps in less than a day? Who's willing to help, will help without bumps!

 

Explain your problem as we can't read minds. What are the "no images"?

[zigvt]

Well my post where allways on the 2nd page so I wanted this question fixed.

 

Ok i got that code you helped me with and works great. It shows 4 columns and breaks each column. But some columns show the No Image thing and thats because theres prolly only 2 or 3 images in that column. I was wondering how I can make this code not show those Blank Image boxes.