CODEWITHSUNDEEP
phphtmlimage
IVAN PAUL
IVAN PAUL

Reputation: 179

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

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

Code Output

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

Code Output

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.....

Upvotes: 0

Views: 1861

Answers (2)

Panup Pong
Panup Pong

Reputation: 1891

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

Upvotes: 0

helpdoc
helpdoc

Reputation: 1990

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

Upvotes: 1

Related Questions