CODEWITHSUNDEEP
javascriptphphtmlimagegallery
Luigi
Luigi

Reputation: 251

Image gallery with php password protected upload: some issues

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

Upvotes: 2

Views: 821

Answers (1)

JayIsTooCommon
JayIsTooCommon

Reputation: 1714

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.

Upvotes: 2

Related Questions