带有php密码保护上传的图片库:一些问题

时间:2015-06-30 21:02:25

标签: javascript php html image gallery

我制作了一个简单的图片库,我正在添加一个受密码保护的上传。在一些帮助下,我正在使用this php(感谢sulthan-allaudeen)。附上我正在使用的代码。

问题在于我找不到在左侧显示文件夹中所有图像的缩略图的方法,但是使用此代码我只有全宽图像。任何想法?

感谢

<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

1 个答案:

答案 0 :(得分:2)

Scandir()将目录中的文件名放入数组中。因此,我们可以使用for循环打印每个图像。我给你举了一个例子:

<?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 } ?>

现在你只需要将一些css应用于.thumbnail类,它应该可以解决问题。对于初学者,你只需要为.thumbnail img应用一些宽度和高度,如果你需要帮助我也知道。