issue when trying to preview images using a modal

Question

I'm trying to make it where when the client/user clicks on their image, it will pop up the image that they clicked on. I've tried using a model but when you go to click on the image it doesn't show the image you clicked, it shows a different image for all the photos? Any Ideas on why my codes doing this? Thank You In advance

This code below, is displaying the images from the users folder.

foreach($images as $image) {
    echo '
     <div id="gallery">
                                <div id="gallery-content">
                                    <div id="gallery-content-center">
 <a href="#" data-toggle="modal" data-target="#myModal"    data-gallery="multiimages"  ><img src="'.$image.'" alt="gallery" class="all studio" /> </a> 

This is all of my Code.

 $username = $_SESSION['user']['username'];
 $dirname = "photos/$username/";
// Only Get .png Images // $images = glob($dirname."*.png");
$images = glob("$dirname*.{jpg,gif,png}", GLOB_BRACE);
foreach($images as $image) {
    echo '
     <div id="gallery">
                                <div id="gallery-content">
                                    <div id="gallery-content-center">
 <a href="#" data-toggle="modal" data-target="#myModal"    data-gallery="multiimages"  ><img src="'.$image.'" alt="gallery" class="all studio" /> </a> 



                            <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                            <h4 class="modal-title" id="myModalLabel">Preivew of your Image</h4>
                                        </div>
                                        <div class="modal-body">
                                            <img src="'.$image.'" /> </a> 

                                            </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Close</button>
                                        </div>
                                    </div>
                                    <!-- /.modal-content -->
                                </div>
                                <!-- /.modal-dialog -->
                            </div>
                            <!-- /.modal -->
'; 
}
?>

This is what it does for all of the images that you click on.

Answer 1

All of your modal dialogs have same id - myModal So when you show up modal dialog, the first modal is always selected.

The simple way is to have various id .

For example:

$username = $_SESSION['user']['username'];
 $dirname = "photos/$username/";
// Only Get .png Images // $images = glob($dirname."*.png");
$images = glob("$dirname*.{jpg,gif,png}", GLOB_BRACE);
$image_index = 0;
foreach($images as $image) {
    $image_index++;
    echo '
     <div id="gallery">
                                <div id="gallery-content">
                                    <div id="gallery-content-center">
 <a href="#" data-toggle="modal" data-target="#myModal'.$image_index.'"    data-gallery="multiimages"  ><img src="'.$image.'" alt="gallery" class="all studio" /> </a> 



                            <div id="myModal'.$image_index.'" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                            <h4 class="modal-title" id="myModalLabel">Preivew of your Image</h4>
                                        </div>
                                        <div class="modal-body">
                                            <img src="'.$image.'" /> </a> 

                                            </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Close</button>
                                        </div>
                                    </div>
                                    <!-- /.modal-content -->
                                </div>
                                <!-- /.modal-dialog -->
                            </div>
                            <!-- /.modal -->
'; 
}
?>