Fetching Images from a folder and display them in modal using PHP

Question

Im practicing some new things in Php and I have been trying to do this since past two days. I am counting the images in a given folder and displaying those images on the web-page. Here's the code on my page.

<?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();
?>

What my code does is it first counts the number of images in a folder and display's the image Thumbnails on the page. Here is the screenshot of the output

When clicked on the image, a modal box opens and shows that image like as shown in the image.

The Images in the folder have been named 1,2,3,4.... and so on.

My problem is that thumbnails are being displayed properly, but on clicking the image(whether first or any), the modal shows only the first image.

Thanks in advance.....

Answer 1

it is because of data-target="#image"

You can use data-target="#image<?php echo $i ?>"

& change id="image<?php echo $i ?>" Modal <div> ID also

Like:

<?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();
?>

Answer 2

Alternatively, You can dynamically change bootstrap modal body and use only single modal.

<?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="img image-responsive g_img" src="../lib/media/imgs/uploads/gallery/<?php echo $i ?>.jpg"  height="250px" width="100%" alt="Image" />
                        <?php //$name = $i ?>
                    </a>

                </div>
            </div>
        </div>
    </div>

<?php }?>

 <!--image modal-->
    <div id="imageModal" 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 id="modalImg" 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-->

<script>
$(function(){
   //change the image on modal
   $('body').live('click','.img',function(){
      var activeSrc = $(this).attr('src');
      $("#modalImg").attr('src',activeSrc);
      $("#imageModal").modal('show');

   });
});
</script>

<?php


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