2

I made a simple image gallery, I'm adding a password protected upload. With some help I'm using this php (thanks to sulthan-allaudeen). Attached the code I'm using.

The problem is that I can't find a way to have on the left side the thumbnails of all the images in the folder, but with this code I have the full-width images only. any idea?

thanks

<body>
<div id="containerfoto">
  <div id="gallery">   
    <div id="minipics">
<?php
$dir    = 'Images/photo/'; 
$files = scandir($dir);
$i = 1;
foreach ($files as $key) 
{
    if ($i>3) 
    {
    $j = $i-3;
     echo "<a href='Images/photo/".$key."'><img src ='Images/photo/".$key."'>".$key."</a>";
    }
    $i++;

}
?>
      <div style="clear:left">&nbsp;</div>
    </div>
    <div id="zoom">
        <img src="Images/foto/foto7.jpg" id="bigimage" alt="">
        <h3 id="titolo">Click to enlarge images.</h3>
    </div>
  </div>
</div>

<script>
window.onload=function(){
if(!document.getElementById || !document.getElementsByTagName) return;
links=document.getElementById("minipics").getElementsByTagName("a");
for(i=0;i<links.length;i++)
    links[i].onclick=function(){Show(this);return(false)}
}

function Show(obj){
bigimg=document.getElementById("bigimage");
bigimg.src=obj.getAttribute("href");
smallimg=obj.getElementsByTagName("img")[0];
t=document.getElementById("titolo");
t.removeChild(t.lastChild);
t.appendChild(document.createTextNode(smallimg.title));
}
</script>
</body>

this is the graphic view that I need

Community
  • 1
  • 1
Luigi
  • 151
  • 1
  • 11
  • The problem exists still now, what is the current status of the problem now :) – Sulthan Allaudeen Jul 04 '15 at 14:23
  • Hi Sulthan Allaudeen! Jay is really helping me with this code, actually this is the code http://pastebin.com/XsPKZheE that is working but has some problems: the 3 beginning thumbnails are not images but I think folder directories or something like this, and after the thumbnails with image (well ordered and pretty working) there are a lot of not working links for other thumbnails (which have the image of a missing pic, because there aren't other pics in the folder) this is the example image: https://www.dropbox.com/s/oxgh2vaogrr49dl/example.png?dl=0 – Luigi Jul 04 '15 at 18:17
  • I've added you to the chat between me and Jay – Luigi Jul 04 '15 at 18:30
  • Thats really great to hear ! – Sulthan Allaudeen Jul 05 '15 at 04:11

1 Answers1

2

Scandir() put's the file names within your directory into an array. Therefore, we can print each image using a for loop. I've given you an example below:

<?php
$dir    = 'Images/photo/'; 
$files = scandir($dir);

for($number = 0; $number <= count($files); $number++) { ?>
   <div class="thumbnail">
       <img src="<?php echo $dir; echo $files{$number} ?>">
   </div>
<?php } ?>

Now you just need to apply some css to the .thumbnail class and it should do the trick. For starters, you just need to apply some width and height to .thumbnail img, let me know if you need help with that too.

JayIsTooCommon
  • 1,714
  • 2
  • 20
  • 30
  • thanks, I'm experiencing an error in the line ` – Luigi Jul 02 '15 at 22:43
  • sorry, it's still giving an error " syntax error, unexpected ')', expecting ';' " on the line `for($number = 1, $number <= $maxnum, $number++) { ?>` – Luigi Jul 02 '15 at 22:50
  • thanks, Now it's ok! I tried to add a basic css to .thumbnail `.thumbnail{height:80px;width:auto}` but isn't working, the images are still in the full dimension – Luigi Jul 02 '15 at 23:00
  • change it to `.thumbnail img {height:80px;width:auto}` – JayIsTooCommon Jul 02 '15 at 23:04
  • sorry, my bad, the images are doubled, at the beginning I see the full width images and then the css modified images (however I don't know why but my simple css is not really working) – Luigi Jul 02 '15 at 23:10