javascript - 尝试使用模态预览图像时出现问题

Question

我试图做到当客户/用户点击他们的图像时，它会弹出他们点击的图像。我尝试过使用模型，但是当您单击图像时，它不显示您单击的图像，而是为所有照片显示不同的图像？关于为什么我的代码这样做有什么想法吗？提前谢谢您

下面的代码显示用户文件夹中的图像。

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> 

这是我的全部代码。

 $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 -->
'; 
}
?>

这就是它对您单击的所有图像所做的操作。

Answer 1

所有模式对话框都有相同的id - myModal因此，当您显示模式对话框时，始终会选择第一个模式。

简单的方法就是拥有各种 id 。

例如:

$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 -->
'; 
}
?>