Question

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

<?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更改为{ {1}}，但这也不起作用 - 当我点击图片时，它根本没有发生任何事情。

有人可以帮帮我吗？

提前致谢。

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

试图用弹出式引导程序创建一个简单的图像库

1 个答案: