0

Hi I've this simple php script for showing images from a folder.My problem is that images are displayed very closely .I want to add some space between images and border for each image.Pls help me.

$files = glob("images/gallery/thumb/*.*");
for ($i=1; $i<count($files); $i++)

{

$image = $files[$i];

echo '<img src="'.$image .'" alt="Random image" />';
}

3 Answers 3

2

Or, if you want a sort of grid:

    $files = glob("images/gallery/thumb/*.*");
    $count = count($files);
    for($i = 1; $i < $count; $i++){
    $image = $files[$i];
    echo '<img src="'.$image .'" alt="Random image" style="border:2px solid black; margin: 5px; float: left;" />';
}
0
1

Use plain HTML line break <br/> for the space between two images.
Use CSS style="border:2px solid black;" (change it to suit your need) for the border.
And I’ll suggest you to store count($files) in a variable; otherwise it’ll have to be evaluated in every iteration of your for loop, causing your script to run slower.
Now your entire code will be something like the following:

$files = glob("images/gallery/thumb/*.*");
$count = count($files);
for($i = 1; $i < $count; $i++){
$image = $files[$i];
echo '<img src="'.$image .'" alt="Random image" style="border:2px solid black;"/><br/>';
}
0
1

I would attach a class to to the images.

echo '<link rel="stylesheet" href="gallery.css" type="text/css"';

...

$files = glob("images/gallery/thumb/*.*");
foreach ($files as $image){
    echo '<img src="'.$image .'" alt="Random image" class="galleryImage"/>';
}

and then create a .css file with the style for the class. This will allow you to easily change the style via .css without having to touch your php code, and will make your rendered html file slightly smaller.

gallery.css

img.galleryImage{
    border: 2px solid #888888;
    padding: 10px;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.