php - 尝试使用弹出 Bootstrap 制作一个简单的图片库

Question

我正在尝试创建一个带有 100x100 缩略图的简单图片库，并使用 Bootstrap 弹出窗口在您单击它时以完整尺寸查看每张图片。

<?php
$eventFiles1 = scandir($eventDir);
$eventFiles = array_diff($eventFiles1, array('.', '..'));

foreach($eventFiles as $eventFile)
{
    $image = "./".$eventDir."/".$eventFile;

    list($width, $height) = getimagesize($image);

    if($width > $height)
    {
        ?>
        <a data-toggle="modal" data-target="#myModal" href=""><div style="height:100px;width:100px;margin:10px;background-color:black;display:inline-block;background-position:center;background-image:url('<?php echo $image; ?>');background-size:auto 100%;"></div></a>

        <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        <img src="<?php echo $image; ?>" class="img-responsive">
                    </div>
                </div>
            </div>
        </div>

        <?php
    }
    else
    {
        ?>
        <a data-toggle="modal" data-target="#myModal" href=""><div style="height:100px;width:100px;margin:10px;background-color:black;display:inline-block;background-position:center;background-image:url('<?php echo $image; ?>');background-size:100% auto;"></div></a>

        <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        <img src="<?php echo $image; ?>" class="img-responsive">
                    </div>
                </div>
            </div>
        </div>
        <?php
    }
}
?>

现在，它并没有按照我想要的方式工作。我会解释原因:

假设我的画廊包含 5 张图片(image1.jpeg、image2.jpeg ......image5.jpeg)无论我点击放大哪张图片，出现在模态中的图片总是image1.jpeg。

现在，我确实认为问题在于我的模型始终具有相同的 ID - #myModal，但即使我尝试通过例如更改 ID 来为其提供动态 ID divModal 到 $image，但这也不起作用 - 当我单击图像时，它根本没有发生任何事情。

有人可以帮我解决这个问题吗？

提前致谢。

Answer 1

你必须为你的模态输入不同的 id 并链接

foreach($eventFiles as $key => $eventFile)

对于 html

data-target="#myModal'.$key.'"

<div id="myModal'.$key.'" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">