从文件夹中获取图像并使用PHP

时间:2017-11-14 07:59:18

标签: php html image

我在Php练习了一些新东西,而且自从过去两天以来我一直试图这样做。我正在计算给定文件夹中的图像并在网页上显示这些图像。 这是我页面上的代码。

<?php
require "../_inc/master.inc.php";
require "../webConfig/web.config.php";
?>
<?php
doctype();
head_start("Gallery");
?>
<link rel="stylesheet" type="text/css" href="../lib/css/gallery.css" media="all" />
<?php
head_close();
?>
<?php
disp_head_start();
disp_head_close();
menu();
function countFolder($dir) {
 return (count(scandir($dir)) - 2);
}
$count=countFolder('../lib/media/imgs/uploads/gallery');
?>
<p>&nbsp;</p>
<div class="row" style="background-color:#7D37CE; padding:2%">
<?php for($i=1;$i<=$count;$i++){ ?>
<script>$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();   
});</script>
    <div class="panel-group col-xs-12 col-sm-12 col-md-3 col-lg-3"> 
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="thumb">
                    <a href="#" class="image-responsive" data-toggle="tooltip" title="Click to View">
                    <?php echo $i ?>
                        <img class="image-responsive g_img" data-toggle="modal" data-target="#image" src="../lib/media/imgs/uploads/gallery/<?php echo $i ?>.jpg" height="250px" width="100%" alt="Image" />
                        <?php //$name = $i ?>
                    </a>
                <!--image modal-->
                    <div id="image" class="modal fade" role="dialog">
                    <div class="modal-dialog">
                    <div class="modal-content">
                    <div class="modal-header">
                    <input type="submit" class="close bt" data-dismiss="modal" value="&times;" />
                    </div>
                    <div class="modal-body">
                    <img src="../lib/media/imgs/uploads/gallery/<?php echo $i ?>.jpg" class="mimg" alt="This image failed to load. Please reload the page." />
                    </div>
                    <div class="modal-footer">
                    <input type="submit" class="close bt" data-dismiss="modal" value="Close" />
                    </div>
                    </div>
                    </div>
                    </div>
                <!--// modal-->
                </div>
            </div>
        </div>
    </div>

<?php }?>

<?php


footer();
?>
</div>
<?php
close();
?>

我的代码所做的是首先计算文件夹中的图像数量,并在页面上显示图像缩略图。这是输出的屏幕截图

Code Output

单击图像时,会打开一个模态框,并显示该图像,如图所示。

Code Output

文件夹中的图像已命名为1,2,3,4 ....等等。

我的问题是缩略图正在正确显示,但在点击图像(无论是第一个还是任何图像)时,模态仅显示第一个图像。

提前致谢.....

2 个答案:

答案 0 :(得分:1)

这是因为data-target="#image"

您可以使用data-target="#image<?php echo $i ?>"

&安培;更改id="image<?php echo $i ?>"模态<div> ID

像:

<?php
require "../_inc/master.inc.php";
require "../webConfig/web.config.php";
?>
<?php
doctype();
head_start("Gallery");
?>
<link rel="stylesheet" type="text/css" href="../lib/css/gallery.css" media="all" />
<?php
head_close();
?>
<?php
disp_head_start();
disp_head_close();
menu();
function countFolder($dir) {
 return (count(scandir($dir)) - 2);
}
$count=countFolder('../lib/media/imgs/uploads/gallery');
?>
<p>&nbsp;</p>
<div class="row" style="background-color:#7D37CE; padding:2%">
<?php for($i=1;$i<=$count;$i++){ ?>
<script>$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();   
});</script>
    <div class="panel-group col-xs-12 col-sm-12 col-md-3 col-lg-3"> 
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="thumb">
                    <a href="#" class="image-responsive" data-toggle="tooltip" title="Click to View">
                    <?php echo $i ?>
                        <img class="image-responsive g_img" data-toggle="modal" data-target="#image<?php echo $i ?>" src="../lib/media/imgs/uploads/gallery/<?php echo $i ?>.jpg" height="250px" width="100%" alt="Image" />
                        <?php //$name = $i ?>
                    </a>
                <!--image modal-->
                    <div id="image<?php echo $i ?>" class="modal fade" role="dialog">
                    <div class="modal-dialog">
                    <div class="modal-content">
                    <div class="modal-header">
                    <input type="submit" class="close bt" data-dismiss="modal" value="&times;" />
                    </div>
                    <div class="modal-body">
                    <img src="../lib/media/imgs/uploads/gallery/<?php echo $i ?>.jpg" class="mimg" alt="This image failed to load. Please reload the page." />
                    </div>
                    <div class="modal-footer">
                    <input type="submit" class="close bt" data-dismiss="modal" value="Close" />
                    </div>
                    </div>
                    </div>
                    </div>
                <!--// modal-->
                </div>
            </div>
        </div>
    </div>

<?php }?>

<?php


footer();
?>
</div>
<?php
close();
?>

答案 1 :(得分:0)

或者,您可以动态更改bootstrap模态体并仅使用单个模态。

$timeLimit1 = Get-Date
$timeLimit1.AddDays(-90)
$specialDates = (Get-Date "31-12-2014"), (Get-Date "31-05-2017") # continue the list 
Get-ChildItem <path> | ? {$_.LastWriteTime -le $timeLimit1 -and $specialDates -notcontains $_.LastAccessTime.Date } | Remove-Item