我在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> </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="×" />
</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,2,3,4 ....等等。
我的问题是缩略图正在正确显示,但在点击图像(无论是第一个还是任何图像)时,模态仅显示第一个图像。
提前致谢.....
答案 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> </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="×" />
</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