0
ImはPHPでいくつか新しいことを実践しています。私は過去2日間からこれをやろうとしています。私は特定のフォルダ内の画像を数え、その画像をWebページに表示しています。 ここに私のページのコードがあります。フォルダから画像を取得し、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と命名されています。
私の問題はサムネイルが正しく表示されていることですが、イメージをクリックすると（最初かどうかにかかわらず）、モーダルは最初のイメージのみを表示します。 data-target="#image"
のあなたが使用することができますので、事前に
おかげで.....
これは@ ivan-paulに役立ちます。 –
ありがとうございます@SN Tiwari。コードは私のために働く。 –
回答があれば回答できます –