Question

我正在处理一项我想要少量图片的任务，我想在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>

我怎样才能做到这一点？

Answer 1

你需要做的是使用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>

见下面的工作片段：

＆＃13;

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

＆＃13;

.modal-img {
  width:100%;
}

＆＃13;

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

＆＃13;

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

Answer 3

您可以根据用户点击的锚点动态更改模式中图像的来源，只需在每个锚点和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函数来动态改变模态中标签的src。

这样的事情：

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

在单个bootstrap模式上显示图像

3 个答案: