duandeng1824 2018-03-28 14:12
浏览 82
已采纳

在单个bootstrap模式上显示图像

I am working on a task where I want few images and I want to display image in bootstrap modal.

I have done below code to to display image on modal on click of link, where link has below images. Each image have link.

Modal is opening with all the images, but issue is I don't want to create modal for each image.

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

How can I achieve this ?

  • 写回答

3条回答 默认 最新

  • douchen5971 2018-03-28 14:34
    关注

    What you have to do is generating you image thumbs using php , and create your modal which has an empty image tag (add custom class to access it with jquery ) outside the loop then using jquery

    just create script which get the link from clicked image and set the src of the image tag inisde the modal ,

    your php code should look like :

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

    see below working snippet :

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

    </div>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

悬赏问题

  • ¥15 聚类分析或者python进行数据分析
  • ¥15 逻辑谓词和消解原理的运用
  • ¥15 三菱伺服电机按启动按钮有使能但不动作
  • ¥15 js，页面2返回页面1时定位进入的设备
  • ¥50 导入文件到网吧的电脑并且在重启之后不会被恢复
  • ¥15 （希望可以解决问题）ma和mb文件无法正常打开，打开后是空白，但是有正常内存占用，但可以在打开Maya应用程序后打开场景ma和mb格式。
  • ¥20 ML307A在使用AT命令连接EMQX平台的MQTT时被拒绝
  • ¥20 腾讯企业邮箱邮件可以恢复么
  • ¥15 有人知道怎么将自己的迁移策略布到edgecloudsim上使用吗？
  • ¥15 错误 LNK2001 无法解析的外部符号