question about loading images from folder and adjusting how to display them

[iNko]

Hello once again, i got this code that takes all images from a folder and displays them close to each other.

Heres the code:

<?php
$dir = 'uploads/thumbs/watermarkedthumbs/';
$file_display = array ('jpg', 'jpeg', 'png', 'gif');

if (file_exists($dir) == false) {
echo 'tt';
} else {
$dir_contents = scandir($dir);

foreach ($dir_contents as $file) {
$file_type = strtolower(end(explode('.', $file)));

if ($file !== '.' && $file !== '..' && in_array($file_type, $file_display) == true) {
echo '<img src="', $dir, '/', $file, '" alt="', $file, '" />';
}

}
}
?>

How do i add margins in between them? i wanna make it smth like 'margin-left:10px, margin-top-10px'.

Also, how do i add an 'overflow'? i mean, my images currently are displayed in a div, and i wanna make it so that if the folder has lets say 9 images, it would only display 6 of them, and the rest would be displayed in the same div after i click a button or smth (like '1' for the first div and '2' would appear if theres an overflow, and when i click '2' the rest of the images would appear).

 

To make these adjustments do i need to make a different php file or do i change something in this code?

Thx in advance.

[titan21]

With regards to the css - you coudl place this directly in the code

 

echo '<img style="margin-left:10px;margin-right:10px" src="', $dir, '/', $file, '" alt="', $file, '" />';

 

or use a class

 

echo '<img class="myimage" src="', $dir, '/', $file, '" alt="', $file, '" />';

 

and create some css in the head of your page

 

.myimage
{
   margin-left:10px;
   margin-right:10px;
}

 

With regards to outputting only six items at a time, ensure that the page is sent a GET variable call page and use this to change the way you handle cycling through the images:

 

$page = $_GET['page'];

$slicestart = $page * 6;
$arrImages = array_slice($dir_contents, $slicestart, 6);

//$arrimages now has six items in it

foreach($arrimages as $image)
{
    //do your output here
}

 

(Note - I haven't tested this so may need a bit of tweaking!!)

[iNko]

With regards to the css - you coudl place this directly in the code

 

echo '<img style="margin-left:10px;margin-right:10px" src="', $dir, '/', $file, '" alt="', $file, '" />';

 

or use a class

 

echo '<img class="myimage" src="', $dir, '/', $file, '" alt="', $file, '" />';

 

and create some css in the head of your page

 

.myimage
{
   margin-left:10px;
   margin-right:10px;
}

 

With regards to outputting only six items at a time, ensure that the page is sent a GET variable call page and use this to change the way you handle cycling through the images:

 

$page = $_GET['page'];

$slicestart = $page * 6;
$arrImages = array_slice($dir_contents, $slicestart, 6);

//$arrimages now has six items in it

foreach($arrimages as $image)
{
    //do your output here
}

 

(Note - I haven't tested this so may need a bit of tweaking!!)

thx for the help! the margin problem is solved, but still cant figure out how to output only certain amount of pictures at once..

 

i tried doing something like this:

<?php
$dir = 'uploads/thumbs/watermarkedthumbs/';
$file_display = array ('jpg', 'jpeg', 'png', 'gif');

if (file_exists($dir) == false) {
echo 'tt';
} else {
$dir_contents = scandir($dir);

foreach ($dir_contents as $file) {
$file_type = strtolower(end(explode('.', $file)));

if ($file !== '.' && $file !== '..' && in_array($file_type, $file_display) == true) {
$page = $_GET['page'];		
$slicestart = $page * 3;
$arrImages = array_slice($dir_contents, $slicestart, 3);
foreach($arrimages as $image)
{
    //do your output here
echo '<img style="border:thin solid #FFF;margin-top:10px;margin-left:10px;margin-right:10px" src="', $dir, '/', $file, '" alt="', $file, '" />';
}	

}

}
}



?>

but it just duplicates the images and shows them w/o any overflow

 

[titan21]

Haven't looked into this in too much detail but you have a typo:

 

$arrImages = array_slice($dir_contents, $slicestart, 3);
foreach($arrimages as $image)

 

$arrImages and $arrimages