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

Question

我正在尝试使其在客户端/用户单击其图像时会弹出他们单击的图像的位置。 我尝试使用模型，但是当您单击图像时，它没有显示您单击的图像，而是为所有照片显示了不同的图像？ 关于我的代码为什么要这样做的任何想法？ 先感谢您

下面的代码显示了users文件夹中的图像。

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