Hi,
I am following a tutorial from PHPacademy.org about showing images in a directory; a very simple image gallery. Here is the link to the tutorial: http://www.youtube.com/watch?v=b4JrEYTfm5M
I have a small issue that images overlap with the footer, I asked this on their forum but couldn't get a reply that's why I am asking here.
I want to list images horizontally, not vertically, so that I will have 2 or 3 images in one row on my small screen. I tried to add some style but the gallery overlaps the footer. Here are the codes I am using:
The file where I will display images:
images.php
[syntax=php]<?php include 'includes/header.php'; ?>
<div id="title">Images</div>
<div id="content">
<?php
$dir = "images/gallery/";
if ($opendir = opendir($dir))
{
while (($file = readdir($opendir)) !== FALSE)
{
if ($file!="."&&$file!="..")
echo "<div class='images'><a href='$dir/$file'><img src='$dir/$file' width='100' height='100' alt='' /></a></div>";
}
}
?>
</div>
<?php include 'includes/footer.php'; ?>[/syntax]
footer.php
[syntax=php]<div id="footer">
<div class="copy">© <?php echo date('Y'); ?> <a href="index.php"><?php sitename(); ?></a></div>
</div>
</body>
</html>[/syntax]
style.css
[syntax=css]body,div,h1,h2,hr{padding:0;margin:0}
body{background-color:#dad3c2}
body{font-family:Tahoma,Arial;font-size:medium;color:#000}
body a{text-decoration:none}
p{margin:0;padding:5px 5px 5px 5px;font-size:small;color:#34220C}
img{border-style:none;vertical-align:middle}
label{padding:5px 0 10px 5px;font-size:small;color:#34220C}
#header{text-align:center}
#logo{margin:5px 5px 5px 5px;padding:5px 0 5px 0;background-color:#b73406;border:5px solid white}
#welcome{margin:0 5px 0 5px;padding:5px 0 5px 0;border:5px solid white;background-color:#382d2b;color:#f2bb00;text-align:center;font-weight:bold;text-shadow:1px 1px #000}
#content{margin:0 5px 0 5px;border:5px solid white;background-color:#cfc8b7}
#title{margin:0 5px 5px 5px;padding:5px 0 5px 5px;border:5px solid white;background-color:#382d2b;font-weight:bold;color:#f2bb00}
#title a{color:#f2bb00}
#footer{margin:5px 5px 5px 5px;padding:5px 5px 5px 5px;background-color:#cfc8b7;color:#624117;text-align:center;font-size:small}
#footer a{color:#624117;text-decoration:none}
#flogos{padding:5px 5px 5px 5px}
.copy{padding:5px 0 5px 0}
.credit{padding:5px 0 5px 0}
.lang{margin:5px 5px 0 5px;padding:5px 0 5px 25px;background-color:#b73406;border:5px solid white}
.langtext{padding:0 0 0 20px;color:#fff;font-weight:bold;text-shadow:1px 1px #000}
.page{padding:10px 0 10px 25px;font-weight:bold;background-color:#b73406;color:#fff;border-bottom:2px solid #cfc8b7}
.pagel{padding:10px 0 10px 25px;font-weight:bold;background-color:#b73406;color:#fff}
.center{text-align:center}
.textbold{font-weight:bold}
.images{padding:10px 10px 0 10px;float:left}[/syntax]
It seems left float on .images doesn't work properly. I can't see what I am doing wrong. Thanks for any help.
list images horizontally, not vertically
Re: Showing Images in a Directory Using PHP
Just commenting on the PHP code for now, you really should just use scandir there.
[syntax=php]$dirs = scandir('images/');
// gets rid of the . and ..
unset($dirs[0], $dirs[1]);
foreach ( $dirs as $dir ) {
// echo image
}[/syntax]
I really don't understand why Alex uses such a complicated method in that tutorial :/
[syntax=php]$dirs = scandir('images/');
// gets rid of the . and ..
unset($dirs[0], $dirs[1]);
foreach ( $dirs as $dir ) {
// echo image
}[/syntax]
I really don't understand why Alex uses such a complicated method in that tutorial :/
Please check out my CodeCanyon items.
Re: Showing Images in a Directory Using PHP
If you use
[syntax=css]div.images { float:left; }[/syntax]
on the images it should make them go across the screen
then you need to put them in a wrapper div that has a fixed width to get the number in each row right.
[syntax=css]div.images { float:left; }[/syntax]
on the images it should make them go across the screen
then you need to put them in a wrapper div that has a fixed width to get the number in each row right.
Re: Showing Images in a Directory Using PHP
Shall I use this one?
[syntax=php]$dirs = scandir('gallery/');
unset($dirs[0], $dirs[1]);
if ($opendir = opendir($dirs))
{
while (($file = readdir($opendir)) !== FALSE)
{
foreach ( $dirs as $dir )
echo "<img src='$dir/$file' width='200' height='200' alt='Melek Apart Hotel Resim' /><br /><br />";
}
}[/syntax]
It gives the following warning:
Warning: opendir() expects parameter 1 to be string, array given in C:\Apache2\htdocs\resimler1.php on line 8
I know I cannot see some very obvious things, that's why I am a newbie
[syntax=php]$dirs = scandir('gallery/');
unset($dirs[0], $dirs[1]);
if ($opendir = opendir($dirs))
{
while (($file = readdir($opendir)) !== FALSE)
{
foreach ( $dirs as $dir )
echo "<img src='$dir/$file' width='200' height='200' alt='Melek Apart Hotel Resim' /><br /><br />";
}
}[/syntax]
It gives the following warning:
Warning: opendir() expects parameter 1 to be string, array given in C:\Apache2\htdocs\resimler1.php on line 8
I know I cannot see some very obvious things, that's why I am a newbie
Re: list images horizontally, not vertically
Your php was fine, well it uses an outdated method as Tino said, but fine.
You need to change the CSS.
You need to change the CSS.
Re: list images horizontally, not vertically
The PHP worked but can be done better using what I did. So basically you'd get rid of what you had and replace it with what I gave.
Or just leave it and be satisfied with it, because it works perfectly fine
But yes, this is a CSS thing. I would do what Jacek did and see what you get.
Or just leave it and be satisfied with it, because it works perfectly fine
But yes, this is a CSS thing. I would do what Jacek did and see what you get.
Please check out my CodeCanyon items.
Re: list images horizontally, not vertically
Tino wrote:The PHP worked but can be done better using what I did. So basically you'd get rid of what you had and replace it with what I gave.
Or just leave it and be satisfied with it, because it works perfectly fine
But yes, this is a CSS thing. I would do what Jacek did and see what you get.
So, I have this code now:
[syntax=php]<?php
$dirs = scandir('gallery/');
unset($dirs[0], $dirs[1]);
foreach ( $dirs as $dir ) {
echo "<img src='$dirs/$file' width='200' height='200' alt='Melek Apart Hotel Resim' /><br />";
}
?>[/syntax]
Gives this:
Notice: Undefined variable: file in C:\Apache2\htdocs\resimler1.php on line 9
Re: list images horizontally, not vertically
It should be
[syntax=php] <?php
$dirs = scandir('gallery/');
unset($dirs[0], $dirs[1]);
foreach ( $dirs as $files ) {
echo "<img src='gallery/$file' width='200' height='200' alt='Melek Apart Hotel Resim' /><br />";
}
?>
[/syntax]
[syntax=php] <?php
$dirs = scandir('gallery/');
unset($dirs[0], $dirs[1]);
foreach ( $dirs as $files ) {
echo "<img src='gallery/$file' width='200' height='200' alt='Melek Apart Hotel Resim' /><br />";
}
?>
[/syntax]
Re: list images horizontally, not vertically
Actually...
foreach ( $dirs as $files ) {
should then be
foreach ( $dirs as $file ) {
foreach ( $dirs as $files ) {
should then be
foreach ( $dirs as $file ) {
Please check out my CodeCanyon items.
Re: Showing Images in a Directory Using PHP
jacek wrote:If you use
[syntax=css]div.images { float:left; }[/syntax]
on the images it should make them go across the screen
then you need to put them in a wrapper div that has a fixed width to get the number in each row right.
Jacek,
All the code and files I am using are given in the first post. I have .images{padding:10px 10px 0 10px;float:left} in my css file, images do align left but they get overlapped with the footer.
I want to cry
Re: list images horizontally, not vertically
Could you post a screenshot ?
Can you not use use the margin property to make things not overlap ?
Can you not use use the margin property to make things not overlap ?
Re: list images horizontally, not vertically
Or use
[syntax=css]clear: both;[/syntax]
in the footer div?
[syntax=css]clear: both;[/syntax]
in the footer div?
Please check out my CodeCanyon items.
Re: list images horizontally, not vertically
Tino wrote:Or use
[syntax=css]clear: both;[/syntax]
in the footer div?
That one seems to be the part of the solution. I added that to footer and it doesn't overlap anymore. There is a small issue left and I guess I can solve it with CSS. Thank you very much for your ongoing help.