在单个Bootstrap模态框中显示图片

Question

在单个Bootstrap模态框中显示图片

javascriptphpjqueryhtmltwitter-bootstrap

4

我正在处理一个任务，需要几张图片，并且想要在Bootstrap模态框中展示这些图片。

我已经编写了下面的代码，在链接单击时显示图像，每个图像都有一个链接。

模态框打开并显示了所有的图片，但问题是我不想为每个图片创建一个模态框。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">

        <title>Image Demo</title>

        <link href="https://getbootstrap.com/docs/3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    </head>

    <body>
        <div class="container-fluid">
            <?php
            $images = ['image_1.png', 'image_2.png', 'image_3.png', 'image_4.png', 'image_5.png'];
            for ($cnt = 0; $cnt < count($images); $cnt++) {
                ?>
                <a href="#imagemodal_<?= $cnt ?>" data-toggle="modal" data-target="#imagemodal_<?= $cnt ?>">
                    <img src="images/<?php echo $images[$cnt] ?>" width="100px" height="100px"/>
                </a>
                <div class="modal fade " id="imagemodal_<?= $cnt ?>" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="modal-dialog modal-sm">
                        <div class="modal-content">
                            <img src="images/<?php echo $images[$cnt] ?>" width="100px" height="100px"/>
                        </div>
                    </div>
                </div>
                <?php
            }
            ?>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="https://getbootstrap.com/docs/3.3/dist/js/bootstrap.min.js"></script>
    </body>
</html>

我该如何实现这个？

- John Konner

你能展示你的JS代码吗？ - Badiparmagi

我已经更新了我所工作的代码。 - John Konner

谢谢您提供的所有答案，我会尝试全部。 - John Konner

3个回答

2

通过你的代码，你正在生成大量的HTML代码。有一种简单的方法可以减少代码并实现功能。首先，你需要将模态框代码从for循环中取出。在链接中添加一个名为“openmodal”的类，并像下面这样添加data-href="image-url"。所以所有链接将具有相同的类。点击此链接时，我们可以打开模态框。

<a href="javascript:;" data-href="images/<?php echo $images[$cnt] ?>" class="openmodal">

这是您的模态框代码。

<div class="modal fade " id="imagemodal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <img src="images/no-image.png" width="100px" height="100px"/>
        </div>
    </div>
</div>

使用以下脚本打开模态框并在其中查看图像。

<script>
    $(".openmodal").click(function(){
        var href = $(this).data("href");
        $("#imagemodal img").attr("src",href );
        $("#imagemodal").modal("show");
    })
</script>

- Pankaj Makwana

0

您可以根据用户单击的锚点动态更改模态框内图像的源。要实现此操作，只需为每个锚点添加一个类和一个Jquery函数。

以下是您的Php/Html代码：

<?php
$images = ['image_1.png', 'image_2.png', 'image_3.png', 'image_4.png', 'image_5.png'];
for ($cnt = 0; $cnt < count($images); $cnt++) {
    ?>
    <a href="#imagemodal" data-toggle="modal" data-target="#imagemodal">
        <img class="AnchorClass" src="images/<?php echo $images[$cnt] ?>" width="100px" height="100px"/>
    </a>
    <?php
}
?>


<div class="modal fade " id="imagemodal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <img src="" id="targetChange"/>
        </div>
    </div>
</div>

然后你需要一个jQuery函数来动态更改模态框内的<img>标签的src属性。

像这样：

<Script>
    $( document ).ready(function() {
        $(".AnchorClass").click(function(){
            //Assign the src with jquery attr()
        });
    });
</Script>

- Ank

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bourbia Brahim · Accepted Answer

您需要做的是使用PHP生成图像缩略图，创建一个没有图像标签的模态框（添加自定义类以通过jQuery访问）在循环之外，然后使用jQuery。只需创建一个脚本，获取所点击的图像链接并设置模态框内图像标签的src即可。

您的PHP代码应如下：

<?php
        $images = ['image_1.png', 'image_2.png', 'image_3.png', 'image_4.png', 'image_5.png'];
        for ($cnt = 0; $cnt < count($images); $cnt++) {
            ?>
            <a href="#imagemodal" data-toggle="modal" data-target="#imagemodal">
                <img src="images/<?php echo $images[$cnt] ?>" width="100px" height="100px"/>
            </a>

            <?php
        }
        ?>
            <div class="modal fade " id="imagemodal" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog modal-sm">
                    <div class="modal-content">
                        <img class="modal-content" src="" width="100px" height="100px"/>
                    </div>
                </div>
            </div>

请看下方的工作示例:

$(function(){
  $("#image img").on("click",function(){
     var src = $(this).attr("src");
     $(".modal-img").prop("src",src);
  })
})

.modal-img {
  width:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

  <div id="image">
    <a href="#imagemodal" data-toggle="modal" data-target="#imagemodal">
        <img src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg" width="100px" height="100px"/>
    </a>
    <a href="#imagemodal" data-toggle="modal" data-target="#imagemodal">
        <img src="http://imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/img_01.jpg" width="100px" height="100px"/>
    </a>
    <a href="#imagemodal" data-toggle="modal" data-target="#imagemodal">
        <img src="https://i2.wp.com/thenewcamera.com/wp-content/uploads/2015/08/Nikon-200-500mm-sample-img4.jpg?resize=750%2C502" width="100px" height="100px"/>
    </a>
    <a href="#imagemodal" data-toggle="modal" data-target="#imagemodal">
        <img src="https://i1.wp.com/thenewcamera.com/wp-content/uploads/2015/08/Nikon-200-500mm-sample-img2.jpg?resize=750%2C502" width="100px" height="100px"/>
    </a>
 <div>   
    <div class="modal fade " id="imagemodal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <img class="modal-img" />
            </div>
        </div>
    </div>